微信小游戏 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（）函数暂停