原生JS-飞机大战

还有谁记得儿时游戏机上的经典游戏-飞机大战，那是陪伴我们一个又一个寒暑假的伙伴。今天小编闲来写了飞机大战的游戏demo，给大家分享一下我的思路。

首先原生JS写游戏，必须将每个游戏的部分分为对象来写。

第一，将我的飞机和游戏引擎当做对象；

第二，将子弹和敌机当做构造函数；

第三，游戏中小的功能全部写进游戏引擎当中去，比如，敌机遇到子弹爆炸的效果，敌机撞到我的飞机时我的飞机爆炸的效果。

接下来，就是将我的分数传给服务器，当我的飞机被撞毁，页面显示成绩并跳转至一个成绩排行榜的页面。在这个页面里，我将获取服务器传过来的数据并显示。

在这个游戏中首先创建html文件中加点击事件，即选择困难程度后就决定了子弹的发射频率。点击后移除ul节点，并进入游戏加载界面，即进入游戏引擎。游戏引擎以对象的形式创建，分为属性和方法。游戏引擎主要方法有开始游戏、加载游戏、监听键盘（即通过键盘控制我的飞机移动）、创建敌机、碰撞检测。

加载游戏的方法是个回调函数，即当游戏加载完毕，回调再进行其他处理，比如创建我的飞机、监听键盘、创建敌机、碰撞检测。

当游戏加载完成后就需要创建我的飞机了。首先需要初始化，即创建飞机节点并实现移动，飞机移动有拖拽和键盘事件两种实现方式，需要注意的是移动需要控制左右边界。另外我的飞机创建好之后，就需要发射子弹了。发射子弹通过定时器实现，同时需要创建子弹这一构造函数。

子弹是功能是撞击敌机，即让它运动起来。在这之前也需要将子弹初始化，将它定位到我的飞机的正中靠上位置。

子弹创建完后，需要创建敌机。敌机也需要当做构造函数来创建，敌机所具备的属性是它的速度和血量。

不同大小的敌机速度和血量都是不同的，我这里的敌机类型有三种，分别为大中小型敌机，我们给每种敌机添加不同的类型、血量、速度，并将这些属性放在原型中。首先初始化时需要判断敌机类型，并赋给它属性。同样再用定时器让敌机也运动起来。

接下来，我们需要判断子弹碰撞敌机时的动作。在游戏引擎中添加一个判断碰撞的方法，并给个定时器，每隔30毫秒判断一次。要判断碰撞，即需要判断屏幕上的所有敌机节点和所有子弹节点是否有重叠，首先需要获取屏幕上所有的子弹对象和敌机对象，我们就用数组分别保存子弹对象和敌机对象，在子弹和敌机这两个构造函数中，每创建一个对象节点，就需要将该对象用push的方式存入数组中。另外，当子弹或敌机运动超出边界，将该超出边界的对象从数组中用splice的方式移除。除此之外，还需要判断是否发生重叠，重叠可以用以下的方式判断，将其封装成一个函数isCrash。

话说回来，用两个for循环分别遍历子弹数组和敌机数组，判断一下当发生碰撞时，首先子弹爆炸，在子弹这一构造函数中需加一个爆炸的动画boom。爆炸完后将其移除，然后敌机掉血，并进入敌机构造函数中的hurt方法判断敌机的血量是否减为0。如果血量是0，则键入敌机爆炸的函数（boom）中，给一个定时器实现爆炸的动画。

最后，还需要判断敌机是否碰撞了我的飞机，即在for循环遍历敌机数组时，加上判断敌机与我的飞机碰撞的语句。如果发生碰撞，首先在我的飞机中加个爆炸的动画效果的函数，在判断语句中调用该函数实现爆炸效果，当动画完成后，用callback回调回去。在回调函数中，再用prompt提示游戏结束，并显示成绩（成绩的计算我是根据打了多少敌机来算的，比如大型敌机40分，中型敌机20分，小型敌机10分，最后将总分相加），还需要用ajax将成绩和姓名等数据传给（post）服务器（这里我将ajax直接封装成一个函数），传输数据成功后，还要用location.href跳转页面至“飞机大战成绩排行榜”。

最后，完成页面跳转，在另外一个页面中再用ajax获取（get）服务器传过来的数据。并创建ul，li节点使其信息显示在页面上。

这样，一个完整的飞机大战游戏就做完了！