微信推出了小程序版小游戲，跳一跳小游戲火爆微信，從此大家就不用去下載小游戲類APP及使用H5小游戲了。直接用微信小程序玩小游戲，有很多好處，方維網(wǎng)絡(luò)簡單對比了下。

1、不用擔(dān)心手機(jī)中毒，因?yàn)樾∮螒蚴俏⑿艃?nèi)置的，而且必須通過微信官方審核才能上架，所以可以放心地玩。
2、有好友排行榜，邀好友對戰(zhàn)等功能，更多樂趣。
3、不需要下載，直接打開使用。
4、廣告相對較少，估計(jì)也是微信審核時(shí)的限制，不能影響用戶體驗(yàn)。

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

微信也為開發(fā)者提供了一個(gè)簡單的DEMO版飛機(jī)大戰(zhàn)，雖然簡單，但是可以讓開發(fā)者了解其開發(fā)流程和方法。根據(jù)方維網(wǎng)絡(luò)了解，其開發(fā)方法跟H5小游戲開發(fā)方式非常相似，因?yàn)槲⑿判∮螒蚓褪歉鶕?jù)H5內(nèi)核運(yùn)行，所以H5小游戲開發(fā)人員是很容易轉(zhuǎn)過來，甚至有些H5小游戲開發(fā)引擎直接可以導(dǎo)出。

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



其運(yùn)行圖如下。



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

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


import Sprite from '../base/sprite'
import DataBus from '../databus'
const BULLET_IMG_SRC = 'images/za1.png'
const BULLET_WIDTH = 64
const BULLET_HEIGHT = 64
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight
const __ = {
speed: Symbol('speed')
}
let databus = new DataBus()
function rnd(start, end) {
return Math.floor(Math.random() * (end - start) + start)
}
export default class Za extends Sprite {
constructor() {
var i = rnd(1,4)
console.log(i)
var img = '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ù)里隨機(jī)生成


//生成障礙物
zaGenerate() {
if (databus.frame % za_build_speed === 0) {
let za = databus.pool.getItemByClass('za', Za)
za.init(za_speed)
//console.log(za)
databus.zas.push(za)
}
}

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


//障礙物跟我方飛機(jī)相撞
for (let i = 0, il = databus.zas.length; i < il; i++) {
let za = databus.zas[i]
if (this.player.isCollideWith(za)) {
databus.gameOver = true
break
}
}


四、增加子彈補(bǔ)給，當(dāng)飛機(jī)獲得子彈補(bǔ)給后，火力增加一個(gè)，過一段時(shí)間消失。

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

import Sprite from '../base/sprite'
import DataBus from '../databus'
const BULLET_IMG_SRC = 'images/bullet.png'
const BULLET_WIDTH = 32
const BULLET_HEIGHT = 60
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight
const __ = {
speed: Symbol('speed')
}
let databus = new DataBus()
function rnd(start, end) {
return Math.floor(Math.random() * (end - start) + start)
}
export default class ButtetAdd extends Sprite {
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)
}
}

這里就不詳細(xì)講解了。