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

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

 

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

 

具体实现步骤：

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

 

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

 

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

 

 

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

 

官方提供了Adapter库，方便咱们操做，官方的解释以下：

 

 

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

 

 

 

一、weapp-adapter

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

 

 

二、在game.js中添加代码

 

 

main.js先空着，咱们要先创建精灵类

 

三、建立精灵类

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

 

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

 

 

4、显示背景图

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

 

 

 

 

 

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

 

 

便可实现图片加载，效果以下：

 

 

 

5、背景图运动起来

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

若是让背景图运动起来，就要是图片向下移动，由于每一帧都会从新绘制，因此要再背景图方法中加一个向下运动的方法

 

 

而后再loop循环中添加

 

 

此时背景图就运动起来了

 

 

六、加载飞机，并随地图一块儿运动

新建玩家飞机类

 

 

在主函数中添加飞机相关

 

 

 

 

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

 

 

此时，玩家飞机出现，并能够和地图一块儿运动

 

 

 

七、控制飞机移动

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

 

 

 

此时，飞机的位置能够经过手指和鼠标进行控制

八、发射子弹

这个时候由于子弹会有不少个，并且超出屏幕的要回收掉，因此要加全局管理器和对象池

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

 

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

 

飞机类新增代码发射子弹

 

 

主函数文件中新增

 

 

Render中重绘子弹

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

 

 

 

已完成子弹发射的功能。

 

九、建立敌机

 

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

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

敌机类：npc目录下enemy.js

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

 

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

 

 

 

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

 

十、消灭敌机

 

 

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

 

 

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

 

 

 

新增代码，显示爆炸动画

 

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

 

 

而后控制游戏再也不更新

 

 

 

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

 

十二、显示结算界面

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

 

 

 

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

 

 

 

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

 

 

 

此时，若是游戏结束后，点击从新开始，会发现不正常，游戏立马结束了，缘由是原来全部的游戏单元都还在。

新增代码

 

 

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

 

 

此时能够从新开始，可是飞机不能移动了，缘由很简单，事件监听中仍是开始的事件，要删除掉

 

 

至此，已经完成了飞机大战的制做了（音效就没管了，须要能够本身研究一下）

 

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

 

 

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

 

 

 

 

至此，真的结束了，至少每一步是怎么实现的，应该有所了解，具体实现的逻辑能够本身研究，后续会有更多的实例提供你们参考。

顺便打个广告，欢迎你们关注笑林新记，天天都有不同的爆笑内容，能够放松一下，扫码关注一下吧，个人更新也在这里。

这里也附上我我的的微信，欢迎你们和我交流