微信demo小游戏：飞机大战从无到有

微信demo游戏飞机大战从无到有

现在创建新项目会默认给飞机大战的demo，这里给大家从基础开始讲解游戏的从无到有是怎么实现的。

具体实现步骤：

创建背景图->背景图运动起来->创建飞机并随背景图一起动->控制飞机移动->飞机发射子弹->创建敌机->消灭敌机->玩家飞机被击毁->显示结算界面

首先删除所有自带文件，只保留game.js、game.json和project.config.json（原来的最好保留，因为等会要复制一些内容）

删除game.js中的内容，此时模拟器为一片漆黑，如下图所示

好，我们正式开始一步步开始编写飞机大战

官方提供了Adapter库，方便我们操作，官方的解释如下：

这里weapp-adapter足够用，就不用其它游戏引擎了！

1、weapp-adapter

新建JS文件夹，在js文件夹中新建libs文件夹，将weapp-adapter复制进来（原来保存中复制），然后js目录下新建一个main.js文件

2、在game.js中添加代码

main.js先空着，我们要先建立精灵类

3、创建精灵类

精灵，是构成游戏中活动体（比如，飞机、野兽等游戏人物）的最基本单元。

在JS目录下新建sprite.js文件，添加代码，定义背景图的文件，大小，位置等，并显示在画布上。

4、显示背景图

然后添加背景图片images/bg.jpg，在background.js文件中添加代码

背景图片的方法已经完成，现在到主函数main.js中实现图片显示，添加代码

即可实现图片加载，效果如下：

5、背景图运动起来

如果细心的朋友会发现，前面背景图方法里是绘制了两张图片的，一张是和铺满屏幕的，另一张是在屏幕上方看不到的。

如果让背景图运动起来，就要是图片向下移动，因为每一帧都会重新绘制，所以要再背景图方法中加一个向下运动的方法

然后再loop循环中添加

此时背景图就运动起来了

6、加载飞机，并随地图一起运动

新建玩家飞机类

在主函数中添加飞机相关

将loop循环中的内容拆分为重绘和更新

此时，玩家飞机出现，并可以和地图一起运动

7、控制飞机移动

新增判断手指的相关动作，以及判断是否处于屏幕中

此时，飞机的位置可以通过手指和鼠标进行控制

8、发射子弹

这个时候因为子弹会有很多个，而且超出屏幕的要回收掉，所以要加全局管理器和对象池

Base目录中新增pool.js文件（对象池），js目录中新增databus.js文件（全局管理器），这两个文件可以复制原来的

添加子弹类文件bullet.js，复制原来的即可

飞机类新增代码发射子弹

主函数文件中新增

Render中重绘子弹

Update中更新子弹的位置，并每隔20帧发射一枚子弹，数值越小，发射速度越快

已完成子弹发射的功能。

9、创建敌机

敌机会有爆炸的动画，所以要新建一个帧动画类和敌机类

帧动画类：base目录下的animation.js

敌机类：npc目录下enemy.js

（复制过来就行，具体不做详解）

主函数中新增生成敌机的代码

此时不会有敌机爆炸，也没有撞机的功能

10、消灭敌机

主函数中新增全局碰撞检测，被注释掉的是玩家飞机和敌机碰撞，暂时先不要

全局碰撞方法要放到update函数中，此时可以消灭敌机，但是没有爆炸动画，玩家也是出于无敌状态的。

新增代码，显示爆炸动画

11、玩家飞机被击毁，游戏结束

然后控制游戏不再更新

这个时候画面静止不动了，游戏结束了

12、显示结算界面

在runtime文件夹中新增gameinfo.js文件，用于积分和结算界面

判断游戏结束后，显示结算页面，并新增点击重新开始事件

游戏结束后，手指触摸事件

此时，如果游戏结束后，点击重新开始，会发现不正常，游戏立马结束了，原因是原来所有的游戏单元都还在。

新增代码

所有的单元全部重置，此时又有新的问题，游戏速度变的越来越快了

此时可以重新开始，但是飞机不能移动了，原因很简单，事件监听中还是开始的事件，要删除掉

至此，已经完成了飞机大战的制作了（音效就没管了，需要可以自己研究一下）

结束。。等等，游戏中的时候居然没有显示实时积分？？这个居然漏了，现在补上

上面是显示积分，下面是积分增加，消灭一个敌机加一

至此，真的结束了，至少每一步是怎么实现的，应该有所了解，具体实现的逻辑可以自己研究，后续会有更多的实例提供大家参考。

顺便打个广告，欢迎大家关注笑林新记，每天都有不一样的爆笑内容，可以放松一下，扫码关注一下吧，我的更新也在这里。

这里也附上我个人的微信，欢迎大家和我交流