万事开头难，一开始的时候真的毫无头绪，根本不知道怎么实现。后来静下心来，把整个项目分解成一小步一小步，最终实现了。说一下，整个分解实现的步骤吧。
- 抽取出飞机怪兽的共同属性，写出他们的父类，由于英文一般，只能想到单词
Creature - 单独写出飞机类
Plane，并将其成功绘制出来 - 写出怪兽类
Enemy，在画布上绘制出来， -
使怪兽动起来，这个是第一个卡住我的地方，第一次使用
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));
至此，动画可以成功完成
- 飞机的移动和射击。
- 一开始飞机的移动还挺容易实现的，但是发现移动得很突兀，不流畅，而项目的演示demo中却很流畅，而且怪兽的移动也很流畅。这个问题也困扰了我很久。最后，发现，一开始移动是在按下的时候马上使飞机坐标发生变化，而怪兽却是在每次动画里才发生坐标变化，因此，在
keydown事件监听中只是把按下的方向键存放进keys数组中，在动画函数中，再把keys中的值取出来，改变飞机的坐标
- 飞机移动、射击同时进行。原来
keydown只能监听一个键的按下，如果有另一个键也按下了，将覆盖上一个键。因此，用一个数组keys来记录所有按下的键，配合keyup将松开的键的从数组中删除。因此，实现了移动和射击同时进行。而且，在多关卡的demo中发现了，如果是先按下空格键，再方向键，则飞机只能移动，不能发出子弹，如果是先方向键，再空格键，则可以边移动，边发出子弹。
子弹的实现。这个比较顺利，按下空格就新建一个
Bullet实例，并绘制出来，使其移动就可以了子弹射中怪兽。
- 怪兽被打中之后，修改状态和图片，并且删除子弹即可
// 修改怪兽图片
enemy.image.src = './img/boom.png';
// 设置状态为死亡
enemy.alive = false;
// 设置死亡时间为0
enemy.deadTime = 0;
// 删除该子弹
bullets.splice(i, 1);
- 怪兽的死亡过程保持3帧。怪兽被打中的时候，增加一个属性
deadTime并设置为0，每次动画执行时加1，直到3，使其维持3帧
- 多关卡的实现
- 每通过一关，
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;
}
}
},
总结：虽然整体功能实现了，但有几点还是有些疑惑
-
飞机移动不流畅的处理。本来，是想着在监听
keydown时，一按下方向键就马上移动。为了使飞机可以流畅地移动，采用了将按下的键存进keys数组中，在动画函数中遍历keys数组，改变飞机的坐标实现移动。
-
想知道实际上也是这么操作的吗？会不会在某些情况会有延迟？
飞机移动.gif
飞机移动_修改.gif
同时按下两个键的处理，用一个数组
keys保存按下的键，而释放某个键时再从数组中删除，不知道是否有更好的方法？多行怪兽的处理。我用的是一个大数组表示，再去计算每个怪兽的位置。也想过一个二维数组保存，不知道哪种会更好？
-
一开始的代码结构是这样的，怪兽、飞机、子弹类都是全局的
image.png
后来觉得不要有太多的全局变量，于是全部都写在了GAME里面，但是GAME的结构就复杂多了，不知道这样处理是否正确？
