微信小游戏 demo 飞机大战 代码分析 （三）(spirit.js, animation.js)

微信小游戏 demo 飞机大战 代码分析（三）(spirit.js, animation.js)

微信小游戏 demo 飞机大战 代码分析（一）(main.js)

微信小游戏 demo 飞机大战 代码分析（二）(databus.js)

微信小游戏 demo 飞机大战 代码分析（四）(enemy.js， bullet.js, index.js)

本博客将使用逐行代码分析的方式讲解该demo，本文适用于对其余高级语言熟悉，对js还未深刻了解的同窗，博主会尽量将全部遇到的不明白的部分标注清楚，如有不正确或不清楚的地方，欢迎在评论中指正

本文的代码均由微信小游戏自动生成的demo飞机大战中获取

spirit.js

游戏基础的精灵类

代码

/**
 * 游戏基础的精灵类
 */
export default class Sprite {
  constructor(imgSrc = '', width=  0, height = 0, x = 0, y = 0) {
    this.img     = new Image()
    this.img.src = imgSrc

    this.width  = width
    this.height = height

    this.x = x
    this.y = y

    this.visible = true
  }

  /**
   * 将精灵图绘制在canvas上
   */
  drawToCanvas(ctx) {
    if ( !this.visible )
      return

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }

  /**
   * 简单的碰撞检测定义：
   * 另外一个精灵的中心点处于本精灵所在的矩形内便可
   * @param{Sprite} sp: Sptite的实例
   */
  isCollideWith(sp) {
    let spX = sp.x + sp.width / 2
    let spY = sp.y + sp.height / 2

    if ( !this.visible || !sp.visible )
      return false

    return !!(   spX >= this.x
              && spX <= this.x + this.width
              && spY >= this.y
              && spY <= this.y + this.height  )
  }
}

Spirite类

constructor

构造器

• 根据输入图片路径，高度，宽度，初始坐标（x,y)生成一个精灵
  • 这里的x,y 是指图片的左上角坐标
  • 应注意的一点是此处全部参数均有缺省值
• 初始visible设置为true，便可见

drawToCanvas(ctx)

将精灵画于画布上

• 若是不可见，那么不画到画布上
• 若是可见，根据该精灵的x，y坐标

isCollideWith(sp)

• 根据传入物体的左上角的坐标和大小计算中心坐标
• 若两个物体中任意一个不可见，则无需计算，直接返回失败
• 判断传入物体的中心坐标有没有在该物体的方框以内

animation.js

动画类所在文件

代码

import Sprite  from './sprite'
import DataBus from '../databus'

let databus = new DataBus()

const __ = {
  timer: Symbol('timer'),
}

/**
 * 简易的帧动画类实现
 */
export default class Animation extends Sprite {
  constructor(imgSrc, width, height) {
    super(imgSrc, width, height)

    // 当前动画是否播放中
    this.isPlaying = false

    // 动画是否须要循环播放
    this.loop = false

    // 每一帧的时间间隔
    this.interval = 1000 / 60

    // 帧定时器
    this[__.timer] = null

    // 当前播放的帧
    this.index = -1

    // 总帧数
    this.count = 0

    // 帧图片集合
    this.imgList = []

    /**
     * 推入到全局动画池里面
     * 便于全局绘图的时候遍历和绘制当前动画帧
     */
    databus.animations.push(this)
  }

  /**
   * 初始化帧动画的全部帧
   * 为了简单，只支持一个帧动画
   */
  initFrames(imgList) {
    imgList.forEach((imgSrc) => {
      let img = new Image()
      img.src = imgSrc

      this.imgList.push(img)
    })

    this.count = imgList.length
  }

  // 将播放中的帧绘制到canvas上
  aniRender(ctx) {
    ctx.drawImage(
      this.imgList[this.index],
      this.x,
      this.y,
      this.width  * 1.2,
      this.height * 1.2
    )
  }

  // 播放预约的帧动画
  playAnimation(index = 0, loop = false) {
    // 动画播放的时候精灵图再也不展现，播放帧动画的具体帧
    this.visible   = false

    this.isPlaying = true
    this.loop      = loop

    this.index     = index

    if ( this.interval > 0 && this.count ) {
      this[__.timer] = setInterval(
        this.frameLoop.bind(this),
        this.interval
      )
    }
  }

  // 中止帧动画播放
  stop() {
    this.isPlaying = false

    if ( this[__.timer] )
      clearInterval(this[__.timer])
  }

  // 帧遍历
  frameLoop() {
    this.index++

    if ( this.index > this.count - 1 ) {
      if ( this.loop ) {
        this.index = 0
      }

      else {
        this.index--
        this.stop()
      }
    }
  }
}

准备内容

• 引入Spirit类和DataBus类
• 生成一个databus对象
• 肯定一个Symbol对象

Animation类

继承于Sprite类

constructor

构造器

• 先用图片路径和宽度高度初始化超类（spirit类）
• 一些基本的动画设置参数，如备注所述做用

initFrames(imgList)

初始化帧动画的全部帧

• 对传入参数imgList进行遍历
  • forEach是对js中对数组遍历的一种方式
  • =>是匿名函数的语法

aniRender（ctx)

把播放中的帧画到画布上

• 经过调用drawImage画上动画在该时刻应该有的图像
• 该函数在main.js中的render中有调用

playAnimation(index = 0, loop = false)

• 将精灵图的可见设为false
  • 在本例子中有一个敌机被击毁，发生了敌机爆炸，展现爆炸的动画
• 设置正在播放
• 将是否循环的状况设置为初始设置的（初始设置为不循环）
• 判断是否有动画切换间隔和帧数
  • 有的话设置定时器，使用函数setInterval
  • setInterval函数
    • 第一个参数是回调函数，是在这个过程当中不断调用的函数
    • 第二个参数是间隔
    • 整个函数的含义就是在该间隔内不断调用传入的回调函数
    • （博主猜想通常状况来讲主函数中的图像切换频率大于该间隔，这样才能体现动画的变化）

stop()

中止帧动画播放

• 将播放设置为false
• 清除本来设置的定时器

frameLoop()

帧遍历

• 帧计数变量index加加
• 若帧数大于图片数-1（因为计数从0开始）
  • 若是要求循环，将index置0
  • 不然将index--，即设置为最后一张图片，而且调用stop（）函数暂停