飞机大战是微信上非常火爆的一款小游戏，在这里，我们主要利用js去制作一个网页版的飞机大战游戏。玩家点击并移动自己的大飞机，在躲避迎面而来的其它飞机时，大飞机通过发射炮弹打掉其它小飞机来赢取分数。一旦碰撞其它飞机，会减一条命，3次之后游戏就结束。

首先我们做一下游戏分析，大致可以分为5个阶段：

1、游戏准备阶段

2、游戏过渡阶段

3、游戏运行阶段

4、游戏暂停阶段

5、游戏结束阶段

首先我们需要运用H5的canvas，因为发现即使游戏结束了，背景图片也会呈现动态的效果。但是canvas有一个问题，就是在设置宽高时可能会导致绘制的东西有些变形。而且我们看到，整个游戏画面只在网页的正中间，那就可以用css的定位。我们可以添加一个div，做一些样式，然后里面写canvas

绘制这个不难，关键在于js部分

我们在准备阶段可以给他分为几个步骤

1、获取canvas元素，创建画布对象
2、获取画布的宽高
3、利用常量初始化游戏的5个阶段
4、定义表示用于表示游戏当前处在哪个阶段

现在我们一起来完善一下初始化阶段的代码

现在呢 来写一下游戏的第一个阶段，也就是游戏的欢迎阶段。

我们一起分析一下。我们知道，这个动态背景一定是个图片。如果在canvas里绘制一张图片并不是很难。除了有动态背景以外，我们还有一个静态的logo。他其实就是两张图片的叠加效果。难点也就在动态效果上。

我们可以使用面向对象的方式，来完成这个效果。我们游戏的背景图片有2张，一个是背景，他还要具有动态效果，那么我们可以把它当个对象，对象有属性和方法。第一我们得有一个图片，这就算一个属性，还得有坐标值，xy也算是一个属性。方法有2个，第一个是绘制图片的方法。还得有一个让他有动态效果的方法。

然后就是我们的游戏logo，这个用一个简单的绘制方法就行，因为他不用动。

现在分析一下，这个背景图片一定有一个固定的高度。如果他是动态的，不管动的多慢，总会移动出画布。那么图片向下运动，改变的是Y，也就是 Y++。那么这个事情怎么搞定呢。我们用一个思路，就是我们用2张背景图，第二个放在第一个的上面。我让第二种和第一张一起向下移动，也就是画布上原本空白出来的区域，被第二张填充上了，当第一张背景图完全超出画布，第二张正好卡在画布上的时候，如果第二张在往下一点，是不是又露出白边了。所以我还要将当背景图卡到边界的时候，第一张回到上面，以此类推，第一张第二张来回切换到上面，利用边界的判断就很容易做出这个效果。

那么正常情况下，应该这么写。但是有一个问题，这样我们是绘制不上的。因为在drawImage()必须要保证图片加载完毕之后才能绘制，不然有可能失败。我们可以试验一下，刷新浏览器，是没有的。那么在这里我们做一个另外的方法。

因为这个游戏一定是动态的。所以可以在代码最后定义一个统一的游戏核心控制器，控制我们所有的内容。在这里调用游戏的绘制方法以及移动方法。

最后还剩一个，就是静态的logo，那就比较简单了 ，因为是一个静态图片，直接绘制就可以，不需要创建很多方法。我们默认情况下，坐标值可以绘制在0,0的位置上，然后在去手动更改一下，没有固定要求，看着舒服就可以了。

完成以上这些操作，我们就完成了游戏的第一阶段，我们成功的做出了游戏的准备阶段，动态背景图片没有出错，一直缓慢滚动，也没有露出空白的地方。下一章我们将介绍游戏的过渡阶段