Micro-channel demo games: World War II airplane from scratch

Micro-channel demo game war aircraft from scratch

 

Now create a new project will default to the aircraft of World War II Demo , here for everyone to start with the basics of the game from scratch to explain is how to achieve.

 

Specific implementation steps:

Create a background image -> background in motion -> Creating aircraft and with the background moving together -> Control Aircraft movement -> aircraft fired bullets -> Create a bandit -> destroy the enemy -> Players aircraft were destroyed -> display billing interface

 

First, delete all files built, leaving only game.js , game.json and project.config.json (best to keep the original, because so will want to copy some of the content)

 

Remove game.js content, this time a dark simulator, as shown in FIG.

 

 

Well, we started step by step to start writing war aircraft

 

Official provides Adapter libraries facilitate our operations, the official explanation is as follows:

 

 

Here weapp-adapter enough to use, you do not need the other game engine!

 

 

 

1、weapp-adapter

New JS folder, js create a new folder libs folder, weapp-adapter copied in (save the original copy), then js directory to create a new main.js file

 

 

2, the game.js add tags

 

 

main.js first empty, we must first establish the wizard class

 

3, create a sprite class

Elves, is the most basic units-game activity body (for example, airplanes, and other beasts game character) is.

 

In JS new directory sprite.js file, add the code, defined background image file, the size, location, and displayed on the canvas.

 

 

4 , the display background

Then add a background image images / bg.jpg, in background.js add code file

 

 

 

 

 

Background image process has been completed, and now the main function main.js achieve image display, add code

 

 

You can achieve the image is loaded, the effect is as follows:

 

 

 

5 , background in motion

If careful friends will find, in front of the background of a method is to draw the two pictures, one is covered and the screen, the other can not see the top of the screen.

If you allow background in motion, it is necessary that the picture moves down, because each frame will be redrawn, so the background again approach plus method of a downward movement

 

 

And then loop to add cycle

 

 

At this movement up on background

 

 

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文件,用于积分和结算界面

 

 

 

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

 

 

 

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

 

 

 

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

新增代码

 

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

 

 

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

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

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

 

Guess you like

Origin www.cnblogs.com/ziyunzhixuan/p/10992582.html