微信小游戲體驗之飛機大戰(zhàn)簡單改造

　　微信推出了小程序版小游戲，跳一跳小游戲火爆微信，從此大家就不用去下載小游戲類APP及使用H5小游戲了。直接用微信小程序玩小游戲，有很多好處，中企動力簡單對比了下。

　　1、不用擔(dān)心手機中毒，因為小游戲是微信內(nèi)置的，而且必須通過微信官方審核才能上架，所以可以放心地玩。

　　2、有好友排行榜，邀好友對戰(zhàn)等功能，更多樂趣。

　　3、不需要下載，直接打開使用。

　　4、廣告相對較少，估計也是微信審核時的限制，不能影響用戶體驗。

　　有這么多好處，完全可以終結(jié)小游戲類APP和H5小游戲，讓這類開發(fā)者轉(zhuǎn)而開發(fā)微信小游戲。

　　微信也為開發(fā)者提供了一個簡單的DEMO版飛機大戰(zhàn)，雖然簡單，但是可以讓開發(fā)者了解其開發(fā)流程和方法。根據(jù)中企動力了解，其開發(fā)方法跟H5小游戲開發(fā)方式非常相似，因為微信小游戲就是根據(jù)H5內(nèi)核運行，所以H5小游戲開發(fā)人員是很容易轉(zhuǎn)過來，甚至有些H5小游戲開發(fā)引擎直接可以導(dǎo)出。

　　第一次使用微信開發(fā)者工具會為你生成一個演示版的飛機大戰(zhàn)小游戲，直接可運行使用，里面還包括一些適配器，方便H5開發(fā)人員，還附有代碼結(jié)構(gòu)圖，如下。

　　其運行圖如下。

　　筆者看了下源碼，然后覺得沒有難度，就做了一些小改造。

　　一、增加級別，級別越高，敵機出現(xiàn)幾率越多，主要修改main.js文件enemyGenerate函數(shù)。

　　/**

　　*隨著幀數(shù)變化的敵機生成邏輯

　　*幀數(shù)取模定義成生成的頻率

　　*/

　　enemyGenerate(){

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

　　enemy.init(enemy_speed_now)

　　enemy.shoot(7)//敵機發(fā)射

　　databus.enemys.push(enemy)

　　}

　　}

　　二、敵機也可以發(fā)射

　　在npc目錄復(fù)制bullet.js函數(shù)為bullet

　　2.js作為敵機類，然后在enemy.js敵機類增加敵機射擊函數(shù)，然后每次產(chǎn)生敵機的時候射出一個敵機。

　　shoot(speed){

　　bullet

　　2.init(

　　this.x+this.width/2-bullet

　　2.width/2，

　　this.y-10，

　　speed

　　)

　　databus.bullets

　　2.push(bullet2)

　　}

　　敵機發(fā)射

　　enemyGenerate(){

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

　　enemy.init(enemy_speed_now)

　　enemy.shoot(7)//敵機發(fā)射

　　databus.enemys.push(enemy)

　　}

　　}

　　三、增加障礙物，戰(zhàn)機碰到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函數(shù)里隨機生成

　　//生成障礙物

　　zaGenerate(){

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

　　za.init(za_speed)

　　//console.log(za)

　　databus.zas.push(za)

　　}

　　}

　　最后在碰撞函數(shù)里增加邏輯

　　//障礙物跟我方飛機相撞

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

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

　　databus.gameOver=true

　　break

　　}

　　}

　　四、增加補給，當(dāng)飛機獲得補給后，火力增加一個，過一段時間消失。

　　增加一個bullet_add.js函數(shù)，其生成邏輯和碰撞邏輯類似

　　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)

　　}

　　}

　　這里就不詳細講解了。