网页HTML5--飞机大战小游戏开发--canvas的应用

一，概述

此小项目，是用来练习HTML5的canvas的编程运用。在这个项目中，我们需要创建一个可运行的网页小游戏，开发此小游戏并不难，大概如下图所示：

在整个游戏的运行中，总共要分为5个状态（state）去实现，分别是首页（START），加载中（STARTING），游戏中（RUNNING），暂停（PAUSE）和游戏结束（GAME_OVER），运用一个计时器在网页的canvas画布上画出对应的图片，再通过鼠标的事件来触发并转换状态，就可以实现游戏的运行了。大体代码框架：

二，首页

编写好大体框架后，接下来，我们要逐步逐步完成各个状态的代码。首页很简单的，包括两元素，一个是背景天空的图片（持续由上往下循环滚动），一个是飞机大战的图标（固定在网页正中间）。如下图所示：

对应代码如下，将它补充到上述框架中：

三，游戏中

游戏中的状态是最复杂的，里面需要有滚动的天空，我们自己控制的飞机（跟随鼠标位置移动），子弹（自动从飞机头发射），敌方飞机（随机从上方生成，不会攻击，有三种类型，按大小分为大中小），分数（score）以及生命值（life）。大致如下图所示：

对应代码如下所示：

我方飞机（hero）由2个正常状态与4个爆炸状态的图片组成，子弹（b）由单独一张图片表示，小飞机（e1）由一张正常状态和4张爆炸状态组成， 中型飞机（e2）由一张正常状态和4张爆炸状态图片组成，大型飞机（e3）由两张正常状态与6张爆炸状态图片组成。

***************************hero的位置问题***************************

在获取鼠标位置时，如果直接将鼠标位置添加给图片，会发现图片在鼠标的右下方，并不是图片的正中间是鼠标，所有，我们还有在获取到鼠标位置后，在横纵轴的方向上各自减去hero的图片大小的一半，将图片向左上移动。

******************敌机与子弹和英雄的碰撞问题**********************

我们可以将碰撞问题简化，简化为两个矩形，如果对方的顶点进入了对方矩形范围的区域，则为发生了碰撞。这时，我们可以以敌机（e）为参考对象，计算出敌机与对方的碰撞范围（横纵坐标的范围值）与对方的中心坐标进行比较，如果我方飞机或者子弹的中心坐标进入了敌机的碰撞范围，则触发爆炸效果。大致如下图所示：

四，暂停

游戏中的状态做完，接下来就简单多了。暂停状态，只要鼠标离开了canvas的范围，就游戏暂停，敌机，子弹，hero都停止，天空继续动，并且在中间位置出现暂停的图标，鼠标移回canvas范围，则又继续游戏。效果如下所示：

对应代码如下：

五，游戏结束

游戏结束只需要所有元素都停止，并显示GAME_OVER即可，所以直接改计时器的内容。如下所示：

只需要将各个状态的代码加入对应的位置，即可实现运行。各个阶段的代码也可单独运行，所有的代码资源和图片资源已打包上传在该账号的资源上了。

注：本文的代码与图片皆为转发自已有的项目内容，本文内容我个人为项目的经验归纳总结。