6、更新键盘面板
按下回车键执行 stop() 函数，按下左键执行飞机左移，按下右键执行飞机右移，按下空格执行飞机发射子弹，为了不让子弹连成一条直线，在这里设置 keyBoard.pressedUp 和 keyBoard.pressedSpace 为 false。
| updatePanel: function () { var plane = this.plane; var keyBoard = this.keyBoard; if (keyBoard.pressedEnter) { this.stop(); return; } if (keyBoard.pressedLeft || keyBoard.heldLeft) { plane.direction('left'); } if (keyBoard.pressedRight || keyBoard.heldRight) { plane.direction('right'); } if (keyBoard.pressedUp || keyBoard.pressedSpace) { keyBoard.pressedUp = false; keyBoard.pressedSpace = false; plane.shoot(); } }, |
7、绘制所有元素
| draw: function () { this.renderScore(); this.plane.draw(); this.enemies.forEach(function (enemy) { //console.log('draw:this.enemy',enemy); enemy.draw(); }); }, |
8、更新所有元素
首先判断怪兽数组长度是否为 0 ，为 0 且 level 等于 totalLevel 说明通关，否则显示下一关游戏准备画面；如果怪兽数组 y 坐标大于飞机 y 坐标加怪兽高度，显示游戏失败。
canvas 动画的原理就是不断绘制、更新、清除画布。
游戏暂停的原理就是阻止 requestAnimationFrame() 函数执行，但不重置元素。因此判断 status 的状态为 stop 时跳出函数。
| //更新所有元素状态 updateElement: function () { var self = this; var opts = this.opts; var enemies = this.enemies; if (enemies.length === 0) { if (opts.level === opts.totalLevel) { this.end('all-success'); } else { this.end('success'); } return; } if (enemies[enemies.length - 1].y >= this.planePosY - opts.enemySize) { this.end('failed'); return; } //清理画布 ctx.clearRect(0, 0, canvasWidth, canvasHeight); //绘制画布 this.draw(); //更新元素状态 this.updatePanel(); this.updateEnemeis(); //不断循环updateElement requestAnimationFrame(function () { if(self.status === 'stop'){ return; }else{ self.updateElement(); } }); }, |
写在最后
通过以上几个步骤，游戏的基本功能就完成了，其他一些游戏流程控制，包括开始、结束、得分计算等在此就不叙述了。
可以优化的地方：在按住空格键的时候，可以连续发射子弹。但是，这时再按一下方向键，发现无法再发射子弹了。最好是能移动的时候，也能保持着子弹的发射。
canvas 做游戏还是比较有趣的，另外还可以把这个游戏加以扩展，改成手机版，画布尺寸通过获取屏幕宽高确定，键盘部分改成触摸事件（touchstart、touchmove、touchend），怪兽出现方式也可以改成从屏幕顶端随机下落，怪兽增加血量（如射击4次才消失）等。
