微信demo小游戏：飞机大战从无到有-蒲公英云

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

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

具体实现步骤：

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

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

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

format_png

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

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

format_png 1

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

1、weapp-adapter

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

format_png 2

2、在game.js中添加代码

format_png 3

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

3、创建精灵类

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

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

uploading.4e448015.gif 转存失败重新上传取消

4、显示背景图

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

uploading.4e448015.gif 转存失败重新上传取消

format_png 4

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

format_png 5

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

format_png 6

5、背景图运动起来

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

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

format_png 7

然后再loop循环中添加

format_png 8

此时背景图就运动起来了

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

新建玩家飞机类

uploading.4e448015.gif 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消

在主函数中添加飞机相关

format_png 9

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

format_png 10

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

uploading.4e448015.gif 转存失败重新上传取消正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消 uploading.4e448015.gif 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消 uploading.4e448015.gif 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消 uploading.4e448015.gif 转存失败重新上传取消

7、控制飞机移动

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

format_png 11

uploading.4e448015.gif 转存失败重新上传取消

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

8、发射子弹

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

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

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

飞机类新增代码发射子弹

format_png 12

主函数文件中新增

format_png 13

Render中重绘子弹

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

format_png 14

已完成子弹发射的功能。

9、创建敌机

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

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

敌机类：npc目录下enemy.js

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

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

format_png 15

format_png 16

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

10、消灭敌机

format_png 17

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

format_png 18

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

format_png 19

新增代码，显示爆炸动画

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

format_png 20

然后控制游戏不再更新

format_png 21

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

12、显示结算界面

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

format_png 22

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

format_png 23

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

uploading.4e448015.gif 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消 uploading.4e448015.gif 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消