基于 Canvas 实现的简易飞机大战

写在前面

项目地址：github
演示效果

---

基础知识

• 动画基础知识
• 实现动画效果主要有两种方法
  1.使用定时器一帧一帧的画：setTimeout(xxx,1000/60)，1000/60 意味着 1s 内有 60帧，也就是 33ms 1帧，这样会在人眼中形成一个连续的动画
  2.使用 window.requestAnimationFrame：其实与定时器类似，免去了计算一帧时间的部分
• 创建子弹和敌机采用工厂模式

---

部分代码依照思路流程简述

使用 ES6 的 class 写法，定义 class 后首先定义一个 init 初始化方法，该方法的作用主要分为三类

1.加载各类图片：背景，loading 过场，朕，敌机，子弹...
2.定义各种属性：游戏开关，画布宽高，飞机大小，子弹速度等等。注意，我们后续会定义创建子弹和创建敌机的方法，而创建的子弹对象需要保存在一个数组中，这个数组同样在 init 方法中定义，还有敌机的数组
3.循环绘制飞机，子弹的位置（loop 方法）

init() {
    Promise.all([
        //  加载图片
        this.createImg(bg),
        this.createImg(loading),
        this.createImg(loadingText),
        this.createImg(bullet),  //  子弹
        ...
    ]).then(res => {
        //  画布大小
        this._width = 400
        this._height = 600
        //  子弹
        this.bullet = res[3]
        this.bullet._width = this.bullet.width
        this.bullet._height = this.bullet.height
        this.bullet.speed = 5    //  子弹速度
        this.bullet.bullets = []
        this.bullet.interval = 500 //   子弹发射间隔
        ...
        //  循环绘图
        requestAnimationFrame(this.loop)
    })
}

---

循环绘制（loop）的内容

• 首先，通过 canvas 实例的 drawImage 方法将图片绘制到 canvas 上
• 游戏没开始，绘制 loading 内容，包括四个部分，依次是：
  1.loading 时，飞机 logo 从左侧进入的效果：通过循环判断，每次给飞机 logo 的水平方向 +4（随便你），如果飞机 logo 没有飞到指定位置，则继续 +4，直到飞机 logo 到达指定位置

  this.loading.left = this.loading.left >= 300 ? 300 : this.loading.left + 4
  ctx.drawImage(this.loading, this.loading.left - 200, 300)
  

  2.飞机 logo 停止后，上方显示的 “飞机大战” 文本，画出来就完了

  if (this.loading.left === 300) {
      ctx.drawImage(this.loadingText, 50, 150, 300, 70)
      ...
  }
  

  3.开始按钮，跟上面类似，我是固定好一个 div，通过 opacity 来做了个淡入的效果
  4.给开始按钮添加游戏开始事件

  startBtn.onclick = () => {
      ...
  }
  

---

游戏开始

• 点击开始按钮后，游戏正式开始，需要让我的飞机跟着鼠标走，同时，自动发射子弹，开始出现敌机。也就是说分为以下几个部分：
  1.飞机跟着鼠标走，注意，需要做一下判断，让飞机在 canvas 范围内活动

  document.addEventListener('mousemove', e => {
      ...
  }
  

  2.子弹和敌机，这里只是开始创建子弹和敌机，它们的运动效果需要通过 window.requestAnimationFrame 来实现。创建的子弹和飞机分别存在两个数组中。

  //    创建子弹
  setInterval(() => {
      this.createBullets()
  }, 300)
  //    创建敌机
  setInterval(() => {
      this.createPlants()
  }, 500)
  

  //    工厂模式创建子弹
  createBullets(x, y) {
    let blt = new Object()
    blt.src = this.bullet;
    blt.x = x
    blt.y = y
    this.bullet.bullets.push(blt)    //  保存创建的子弹
  }
  

---

游戏中

• 此时已经持续不断的创建子弹和敌机。首先，不能让创建的子弹无限制的向数组中添加，因此，当子弹飞出 canvas 后，从数组中去掉那一发子弹，通过 splice 实现，敌机同理。

  //  遍历所有子弹，把超出范围的子弹去掉，没超范围的就画在 canvas 上
  for (let i = 0; i < _self.bullet.bullets.length; i++) {
    const blt = _self.bullet.bullets[i]
    blt.y -= _self.bullet.speed;
    if (blt.y <= 0) {
        _self.bullet.bullets.splice(i, 1)
        i--
    } else {
        ctx.drawImage(blt.src, blt.x, blt.y)
    }
  }
  

• 还需要对子弹和敌机进行判断，只要接触到，就应当把子弹和飞机都从各自数组中去掉，原理与上方是一样的，这里就不做赘述。

---

结语

心血来潮研究了一下这个东西的流程，还有非常多的地方可以扩展，Todo 吧 ~