飞机小游戏总结

万事开头难，一开始的时候真的毫无头绪，根本不知道怎么实现。后来静下心来，把整个项目分解成一小步一小步，最终实现了。说一下，整个分解实现的步骤吧。

1. 抽取出飞机怪兽的共同属性，写出他们的父类，由于英文一般，只能想到单词Creature
2. 单独写出飞机类Plane，并将其成功绘制出来
3. 写出怪兽类Enemy，在画布上绘制出来，
4. 使怪兽动起来，这个是第一个卡住我的地方，第一次使用requestAnimationFrame发现，怎么都是一片空白，在这里查找到相关的原因，（https://segmentfault.com/q/1010000011134452/a-1020000011136064），因为一开始显示怪兽图片是这么写的

this.image.onload = function() {
  context.drawImage(self.image, self.left, self.top, self.width, self.height);
      };

原来，Image类的onload函数只有在图片加载完成时候执行一次。因此，修改代码为

// 当是第一加载时，
this.image.onload = function() {
  context.drawImage(self.image, self.left, self.top, self.width, self.height);
};
// 已经加载好了
context.drawImage(this.image, this.left, this.top, this.width, this.height);

图片可以显示了，但是又有一个Bug出现了，说是属性错误，原来requestAnimationFrame的执行环境是window，所以需要将它的执行环境修改为GAMEthis.animation = requestAnimationFrame(this.move.bind(this));
至此，动画可以成功完成

5. 飞机的移动和射击。

• 一开始飞机的移动还挺容易实现的，但是发现移动得很突兀，不流畅，而项目的演示demo中却很流畅，而且怪兽的移动也很流畅。这个问题也困扰了我很久。最后，发现，一开始移动是在按下的时候马上使飞机坐标发生变化，而怪兽却是在每次动画里才发生坐标变化，因此，在keydown事件监听中只是把按下的方向键存放进keys数组中，在动画函数中，再把keys中的值取出来，改变飞机的坐标

• 飞机移动、射击同时进行。原来keydown只能监听一个键的按下，如果有另一个键也按下了，将覆盖上一个键。因此，用一个数组keys来记录所有按下的键，配合keyup将松开的键的从数组中删除。因此，实现了移动和射击同时进行。而且，在多关卡的demo中发现了，如果是先按下空格键，再方向键，则飞机只能移动，不能发出子弹，如果是先方向键，再空格键，则可以边移动，边发出子弹。

6. 子弹的实现。这个比较顺利，按下空格就新建一个Bullet实例，并绘制出来，使其移动就可以了

7. 子弹射中怪兽。

• 怪兽被打中之后，修改状态和图片，并且删除子弹即可

// 修改怪兽图片
enemy.image.src = './img/boom.png';
// 设置状态为死亡
enemy.alive = false;
// 设置死亡时间为0
enemy.deadTime = 0;
// 删除该子弹
bullets.splice(i, 1);

• 怪兽的死亡过程保持3帧。怪兽被打中的时候，增加一个属性deadTime并设置为0，每次动画执行时加1，直到3，使其维持3帧

8. 多关卡的实现

• 每通过一关，CONFIG.level加1
• 绘制怪兽时，怪兽的数量为CONFIG.level * CONFIG.numPerLine采用一个大数组来存放所有的数据，一行为6个，计算出每个怪兽的位置

 // 根据关卡数生成怪兽数组
  for (var i = 0; i < CONFIG.numPerLine * CONFIG.level; i++) {
    // 计算出怪兽的左坐标
    var enemyLeft = CONFIG.canvasPadding + (CONFIG.enemyGap + CONFIG.enemySize) * (i % CONFIG.numPerLine);
    // 计算出怪兽的上坐标
    var enemyTop = CONFIG.canvasPadding + CONFIG.enemySize * Math.floor(i / CONFIG.numPerLine);
    var enemy = new this.Enemy(self, enemyLeft, enemyTop, CONFIG.enemySize, CONFIG.enemySize, CONFIG.enemyIcon);
    this.elements.enemys.push(enemy);
  }

• 怪兽越界的判断。比如，向右移动，则从函数getRightEnemy中遍历获取最右边怪兽的索引，判断它继续向右移动是否会越界，如果会越界，则需要所有怪兽向下移动一行。接着从函数getBottomEnemy中获取最后一个活怪兽，判断其向下移动是否越界，如果不越界，则集体下移一行，如果越界，说明游戏失败。

  // 获取最右边的怪兽
  getRightEnemy: function() {
    var length = this.enemys.length;
    var left = 0;
    var index = -1;

    for (var i = 0; i < length; i++) {
      var enemy = this.enemys[i];
      // 如果当前怪兽是活的，并且左坐标大，则取之
      if (enemy.alive && enemy.left > left) {
        left = enemy.left;
        index = i;
      }
    }
    return index;
  },

// 获取最底下的活着怪兽
getBottomEnemy: function() {
    var length = this.enemys.length;
    for (var i = length - 1; i > -1; i--) {
      if (this.enemys[i].alive) {
        return i;
      }
    }

  },

总结：虽然整体功能实现了，但有几点还是有些疑惑

1. 飞机移动不流畅的处理。本来，是想着在监听keydown时，一按下方向键就马上移动。为了使飞机可以流畅地移动，采用了将按下的键存进keys数组中，在动画函数中遍历keys数组，改变飞机的坐标实现移动。

• 想知道实际上也是这么操作的吗？会不会在某些情况会有延迟？

  
  
  飞机移动.gif

飞机移动_修改.gif

2. 同时按下两个键的处理，用一个数组keys保存按下的键，而释放某个键时再从数组中删除，不知道是否有更好的方法？

3. 多行怪兽的处理。我用的是一个大数组表示，再去计算每个怪兽的位置。也想过一个二维数组保存，不知道哪种会更好？

4. 一开始的代码结构是这样的，怪兽、飞机、子弹类都是全局的
   

   image.png
   
   后来觉得不要有太多的全局变量，于是全部都写在了GAME里面，但是GAME的结构就复杂多了，不知道这样处理是否正确？