這段時(shí)間突然來(lái)了點(diǎn)興趣，不如做做一些簡(jiǎn)單的小游戲開發(fā)。也算練練手
預(yù)覽地址
0 前提
對(duì)nodejs髓抑，git有一點(diǎn)點(diǎn)了解。
1 游戲引擎的選擇
目標(biāo)是一個(gè)html5小游戲优幸，在這方面可以利用很多成熟的游戲引擎吨拍，比如國(guó)內(nèi)大名鼎鼎的egret，還有一直大名鼎鼎的Cocos2d网杆，當(dāng)然還有在國(guó)外大行其道的phaser羹饰。我自己算是都體驗(yàn)過(guò)這三大引擎吧伊滋，個(gè)人非常喜歡egret，因?yàn)樗旧咸峁┝擞螒蜷_發(fā)的全套工具队秩。這次呢笑旺，我選擇了phaser游戲引擎，因?yàn)檫@個(gè)游戲引擎真的很簡(jiǎn)單馍资，可以說(shuō)什么都不用安裝就可以開始開發(fā)啦筒主。再加上本身就是自己的一次小小的折騰，那就這怎么快鸟蟹，怎么方便怎么來(lái)了乌妙。
2 偷了一下懶，用下別人的高起點(diǎn)
按照官方的教程建钥，下載好phaser庫(kù)文件以后藤韵，還需要去安裝什么xampp，Apache服務(wù)器之類的東西熊经，要不然看不到游戲的開發(fā)效果荠察。當(dāng)然這很重要。不過(guò)確實(shí)很懶奈搜，為了快速上手悉盆，就直接去git clone了人家的一個(gè)項(xiàng)目，搞定一切?( ????? )? get馋吗！焕盟。
git clone https://github.com/lean/phaser-es6-webpack
這是大神的項(xiàng)目，實(shí)現(xiàn)了利用webpack對(duì)phaser游戲項(xiàng)目的開發(fā)和打包宏粤。
這是項(xiàng)目的文件內(nèi)容
主要關(guān)注assets資源文件夾和src源代碼文件夾
開發(fā)時(shí)的代碼都在src里面
這里主要關(guān)注main.js這是整個(gè)項(xiàng)目的入口文件脚翘。還有兩個(gè)文件夾sprites和states。一個(gè)簡(jiǎn)單的游戲由各種狀態(tài)組成绍哎，包括加載狀態(tài)来农，游戲狀態(tài)，結(jié)束狀態(tài)等等崇堰，在這些狀態(tài)里面通過(guò)各種精靈實(shí)現(xiàn)了畫面的顯示和游戲過(guò)程沃于。
如名，boot代表啟動(dòng)時(shí)的狀態(tài)海诲，game是游戲進(jìn)行時(shí)的狀態(tài)繁莹，win表示你贏啦，lose表示你輸啦特幔。
在phaser的每一個(gè)狀態(tài)state里咨演，都有init(), preload(), create(), update()幾個(gè)函數(shù)，分別實(shí)現(xiàn)了狀態(tài)的初始化蚯斯，資源加載薄风，游戲角色創(chuàng)建饵较，以及更新。
我的boot就是這么寫的
import Phaser from 'phaser'
import config from '../config'
export default class extends Phaser.State {
init () {
this.stage.backgroundColor = config.colorOrange
}
preload () {
this.load.image('logo', './assets/images/an1.png')
this.load.image('loadbar', 'assets/images/loader-bar.png')
}
create () {
let an1 = this.add.sprite(this.game.width / 2, this.game.height / 2, 'logo')
an1.width = this.game.width
an1.height = this.game.height
an1.anchor.set(0.5)
let tx1 = this.add.text(20, 20, 'Go Home', {
font: '50px',
fill: config.colorYellow,
align: 'center'
})
let tx2 = this.add.text(50, 70, 'Powered by Phaser Game Engine', {
font: '10px',
fill: config.colorYellow,
align: 'center'
})
this.asset = this.add.sprite(0, this.game.height, 'loadbar')
this.asset.width = this.game.width
this.asset.anchor.setTo(0, 0.5)
this.load.onLoadComplete.addOnce(this.onLoadComplete, this)
this.load.setPreloadSprite(this.asset)
this.load.image('mushroom', 'assets/images/mushroom2.png')
this.load.image('an2', 'assets/images/an2.png')
this.load.image('an3', 'assets/images/an3.png')
this.load.image('an4', 'assets/images/an4.png')
this.load.image('st1', 'assets/images/st1.png')
this.load.image('st2', 'assets/images/st2.png')
this.load.image('tr1', 'assets/images/tr1.png')
this.load.image('tr2', 'assets/images/tr2.png')
this.load.image('ho1', 'assets/images/ho1.png')
this.load.image('ho2', 'assets/images/ho2.png')
this.load.image('gr1', 'assets/images/gr1.jpg')
// start load
this.load.start()
}
onLoadComplete () {
console.log('加載完成')
this.state.start('Game')
}
}
最后遭赂，各種狀態(tài)都會(huì)在main文件中添加到狀態(tài)管理器里面去循诉，然后通過(guò)phaser對(duì)象實(shí)現(xiàn)對(duì)狀態(tài)的控制。
import 'pixi'
import 'p2'
import Phaser from 'phaser'
import BootState from './states/Boot'
import GameState from './states/Game'
import WinState from './states/Win'
import LoseState from './states/Lose'
import config from './config'
import eruda from 'eruda'
eruda.init()
let game
const docElement = document.documentElement
const width = docElement.clientWidth
const height = docElement.clientHeight
window.onload = function () {
game = new Phaser.Game(width, height, Phaser.CANVAS, 'content', null)
game.state.add('Boot', BootState, false)
game.state.add('Game', GameState, false)
game.state.add('Win', WinState, false)
game.state.add('Lose', LoseState, false)
game.state.start('Boot')
}
更具體的內(nèi)容就在我的github里面啦https://github.com/zixusir/goHome
寫的不是特別好嵌牺，還希望路過(guò)的江湖大神多多包涵指點(diǎn)打洼。
