微信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文件,用于积分和结算界面
判断游戏结束后,显示结算页面,并新增点击重新开始事件
游戏结束后,手指触摸事件
此时,如果游戏结束后,点击重新开始,会发现不正常,游戏立马结束了,原因是原来所有的游戏单元都还在。
新增代码
所有的单元全部重置,此时又有新的问题,游戏速度变的越来越快了
此时可以重新开始,但是飞机不能移动了,原因很简单,事件监听中还是开始的事件,要删除掉
至此,已经完成了飞机大战的制作了(音效就没管了,需要可以自己研究一下)
结束。。等等,游戏中的时候居然没有显示实时积分??这个居然漏了,现在补上
上面是显示积分,下面是积分增加,消灭一个敌机加一
至此,真的结束了,至少每一步是怎么实现的,应该有所了解,具体实现的逻辑可以自己研究,后续会有更多的实例提供大家参考。
顺便打个广告,欢迎大家关注笑林新记,每天都有不一样的爆笑内容,可以放松一下,扫码关注一下吧,我的更新也在这里。
这里也附上我个人的微信,欢迎大家和我交流
标签:飞机,游戏,微信,子弹,敌机,js,小游戏,demo,背景图 来源: https://www.cnblogs.com/ziyunzhixuan/p/10992582.html