如果你是一名游戲新手友扰，并且剛接觸游戲引擎的話批糟，個人推薦使用Phaser游戲引擎框架，因為它較簡單蜀撑，易上手挤巡，容易懂。先獻(xiàn)上開發(fā)參考文檔：
雖然有中文版的文檔酷麦，但是翻譯的真心不好矿卑，開發(fā)中，只要看好api文檔沃饶，結(jié)合官網(wǎng)的例子母廷，就很好開發(fā)了轻黑。
準(zhǔn)備工作
- 運行phaser小游戲需要web服務(wù)器環(huán)境，官網(wǎng)中有提到安裝web服務(wù)器環(huán)境琴昆，如果你是一名前端攻城獅氓鄙，你也可以自己用gulp或者webpack開發(fā)工具搭一個web服務(wù)器環(huán)境。我已寫好一套小游戲開發(fā)框架放在github上业舍，github地址抖拦。
- 把代碼拉下來運行后，就可以開始正式開發(fā)了舷暮。
開發(fā)過程
- 設(shè)置畫布
//在html中定義畫布將加載在那個dom元素上
<div id='main'></div>
//創(chuàng)建一個游戲?qū)ο?let game = new Phaser.Game(config.DesignSize.width, config.DesignSize.height, Phaser.CANVAS, 'main')
代碼中設(shè)置畫布的大小是987 * 1280态罪，本來是按照720 * 1280尺寸設(shè)置的，但是為了適應(yīng)不用的屏幕下面，需要將寬設(shè)置大一些，滿足在每個移動設(shè)備中高撐滿沥割，寬自適應(yīng)的效果券膀，所以設(shè)計稿中的背景圖的寬也需要長些。再根據(jù)每個設(shè)置月畫布大小的比例驯遇，算出游戲需要向左偏移的距離left芹彬。
- 添加場景：
//添加場景
game.state.add('boot', Boot)
game.state.add('preload', Preload)
game.state.add('play', Play)
- 開始運行場景
//開始“boot”場景
Game.state.start('boot')
一共有3個場景
states //游戲場景
├── boot.js //啟動場景
├── play.js //游戲邏輯處理場景
└── preload.js //預(yù)加載場景
每個場景都有自己的生命周期，常用的生命周期是init（初始化）叉庐，preload（加載）舒帮、create（準(zhǔn)備就緒）、update（更新周期）陡叠、render（渲染完成）
init - 初始化數(shù)據(jù)定義玩郊，最開始執(zhí)行。
preload - 盡管我們有預(yù)加載的場景枉阵，但如果你希望能縮短進(jìn)入頁面時加載的時間译红，可以分?jǐn)傄恍┑狡渌麍鼍埃恍枰谄渌麍鼍凹尤雙reload方法即可兴溜。
create - 如果存在preload方法侦厚，則會在加載完畢后執(zhí)行此方法；否則將在進(jìn)入該場景時直接執(zhí)行此方法拙徽。
update - 更新周期自動執(zhí)行的方法刨沦，例如在play場景的update方法中可以去檢測兩個物體是否有接觸。
render - 渲染完畢后執(zhí)行的方法膘怕，例如可以在此方法中勾勒出物體的邊緣想诅，來方便觀察物體的碰撞區(qū)域。
每個場景執(zhí)行都有先后順序，如果前一個場景執(zhí)行完后来破，就可以啟動下一個場景篮灼。
定義好每個場景后，就可以開始寫游戲邏輯了徘禁。此處就不展開具體的游戲?qū)懛ㄗ缬眨乱黄獙⒕唧w講一下游戲開發(fā)中總結(jié)的精華（Phaser制作h5小游戲（二））。
