微信小游戏体验之飞机大战简单改造

　　微信推出了小程序版小游戏，跳一跳小游戏火爆微信，从此大家就不用去下载小游戏类APP及使用H5小游戏了。直接用微信小程序玩小游戏，有很多好处，中企动力简单对比了下。

　　1、不用担心手机中毒，因为小游戏是微信内置的，而且必须通过微信官方审核才能上架，所以可以放心地玩。

　　2、有好友排行榜，邀好友对战等功能，更多乐趣。

　　3、不需要下载，直接打开使用。

　　4、广告相对较少，估计也是微信审核时的限制，不能影响用户体验。

　　有這么多好处，完全可以终结小游戏类APP和H5小游戏，让这类开发者转而开发微信小游戏。

　　微信也为开发者提供了一个简单的DEMO版飞机大战，虽然简单，但是可以让开发者了解其开发流程和方法。根据中企动力了解，其开发方法跟H5小游戏开发方式非常相似，因为微信小游戏就是根据H5内核运行，所以H5小游戏开发人员是很容易转过来，甚至有些H5小游戏开发引擎直接可以导出。

　　第一次使用微信开发者工具会为你生成一个演示版的飞机大战小游戏，直接可运行使用，里面还包括一些适配器，方便H5开发人员，还附有代码结构图，如下。

　　其运行图如下。

　　笔者看了下源码，然后觉得没有难度，就做了一些小改造。

　　一、增加级别，级别越高，敌机出现几率越多，主要修改main.js文件enemyGenerate函数。

　　/**

　　*随着帧数变化的敌机生成逻辑

　　*帧数取模定义成生成的频率

　　*/

　　enemyGenerate(){

　　if(databus.frame%enemy_build_speed_now===0){

　　enemy.init(enemy_speed_now)

　　enemy.shoot(7)//敌机发射

　　databus.enemys.push(enemy)

　　}

　　}

　　二、敌机也可以发射

　　在npc目录复制bullet.js函数为bullet

　　2.js作为敌机类，然后在enemy.js敌机类增加敌机射击函数，然后每次产生敌机的时候射出一个敌机。

　　shoot(speed){

　　bullet

　　2.init(

　　this.x+this.width/2-bullet

　　2.width/2，

　　this.y-10，

　　speed

　　)

　　databus.bullets

　　2.push(bullet2)

　　}

　　敌机发射

　　enemyGenerate(){

　　if(databus.frame%enemy_build_speed_now===0){

　　enemy.init(enemy_speed_now)

　　enemy.shoot(7)//敌机发射

　　databus.enemys.push(enemy)

　　}

　　}

　　三、增加障碍物，战机碰到gameover

　　增加一个za.js类

　　importSpritefrom'../base/sprite'

　　importDataBusfrom'../databus'

　　constBULLET_IMG_SRC='images/za

　　1.png'

　　constBULLET_WIDTH=64

　　constBULLET_HEIGHT=64

　　constscreenWidth=window.innerWidth

　　constscreenHeight=window.innerHeight

　　const__={

　　speed：Symbol('speed')

　　}

　　functionrnd(start，end){

　　returnMath.floor(Math.random()*(end-start)+start)

　　}

　　exportdefaultclassZaextendsSprite{

　　constructor(){

　　vari=rnd(1，4)

　　console.log(i)

　　varimg='images/za'+i+'.png'

　　super(img，BULLET_WIDTH，BULLET_HEIGHT)

　　}

　　init(speed){

　　this.x=rnd(0，window.innerWidth-BULLET_WIDTH)

　　this.y=-this.height

　　this[__.speed]=speed

　　this.visible=true

　　}

　　//每一帧更新位置

　　update(){

　　//console.log(this.y)

　　this.y+=this[__.speed]

　　//console.log(this.y)

　　//超出屏幕外回收自身

　　//sconsole.log(this.height)

　　if(this.y=screenHeight)

　　databus.removeZas(this)

　　}

　　}

　　然后在main.js函数里随机生成

　　//生成障碍物

　　zaGenerate(){

　　if(databus.frame%za_build_speed===0){

　　za.init(za_speed)

　　//console.log(za)

　　databus.zas.push(za)

　　}

　　}

　　最后在碰撞函数里增加逻辑

　　//障碍物跟我方飞机相撞

　　for(leti=0，il=databus.zas.length;iil;i++){

　　if(this.player.isCollideWith(za)){

　　databus.gameOver=true

　　break

　　}

　　}

　　四、增加补给，当飞机获得补给后，火力增加一个，过一段时间消失。

　　增加一个bullet_add.js函数，其生成逻辑和碰撞逻辑类似

　　importSpritefrom'../base/sprite'

　　importDataBusfrom'../databus'

　　constBULLET_IMG_SRC='images/bullet.png'

　　constBULLET_WIDTH=32

　　constBULLET_HEIGHT=60

　　constscreenWidth=window.innerWidth

　　constscreenHeight=window.innerHeight

　　const__={

　　speed：Symbol('speed')

　　}

　　functionrnd(start，end){

　　returnMath.floor(Math.random()*(end-start)+start)

　　}

　　exportdefaultclassButtetAddextendsSprite{

　　constructor(){

　　super(BULLET_IMG_SRC，BULLET_WIDTH，BULLET_HEIGHT)

　　}

　　init(speed){

　　this.x=rnd(0，window.innerWidth-BULLET_WIDTH)

　　this.y=-this.height

　　this[__.speed]=speed

　　this.visible=true

　　}

　　//每一帧更新位置

　　update(){

　　//console.log(this.y)

　　this.y+=this[__.speed]

　　//console.log(this.y)

　　//超出屏幕外回收自身

　　//sconsole.log(this.height)

　　if(this.y=screenHeight)

　　databus.removeBulletAdds(this)

　　}

　　}

　　这里就不详细讲解了。