万事开头难,一开始的时候真的毫无头绪,根本不知道怎么实现。后来静下心来,把整个项目分解成一小步一小步,最终实现了。说一下,整个分解实现的步骤吧。
- 抽取出飞机怪兽的共同属性,写出他们的父类,由于英文一般,只能想到单词
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
-
同时按下两个键的处理,用一个数组
keys
保存按下的键,而释放某个键时再从数组中删除,不知道是否有更好的方法? -
多行怪兽的处理。我用的是一个大数组表示,再去计算每个怪兽的位置。也想过一个二维数组保存,不知道哪种会更好?
-
一开始的代码结构是这样的,怪兽、飞机、子弹类都是全局的
image.png
后来觉得不要有太多的全局变量,于是全部都写在了GAME
里面,但是GAME
的结构就复杂多了,不知道这样处理是否正确?
网友评论