摘要：結(jié)束展示游戲最終得分排名等。對(duì)象池游戲中生成非常多的元素，我們會(huì)需要一個(gè)對(duì)象池來維護(hù)他們，對(duì)象池可以理解成是一個(gè)。那么關(guān)于對(duì)象池有以下相關(guān)的操作盡可能的復(fù)用對(duì)象，可以減少內(nèi)存的開銷。

上一節(jié)我們認(rèn)識(shí)了Phaser.js，也說到了Phaser比較適合開發(fā)2D的小游戲，那么接下來的幾篇文章會(huì)以開發(fā)一個(gè)移動(dòng)端的小游戲?yàn)槔瑏斫榻B如何上手Phaser.js。這一節(jié)的主要內(nèi)容是用Phaser.js搭建游戲的骨架。

畫布

一般來說，做游戲的話基于Canvas會(huì)比基于DOM性能要好很多，尤其是涉及大量動(dòng)畫的情況下。Phaser會(huì)將一切渲染在canvas元素上，于是，毫不夸張地說，你的body標(biāo)簽里可能只包含一個(gè)canvas元素。

由于本節(jié)開發(fā)的目標(biāo)是一個(gè)移動(dòng)端的小游戲，因此畫布一般來說都是充滿全屏的。

場(chǎng)景

一個(gè)完整的游戲都是有分場(chǎng)景的，不是指“迷宮”、“沙漠”這些游戲場(chǎng)景，而是“加載”、“開始”、“游戲”、“結(jié)束”等場(chǎng)景。一般來說我們實(shí)際做項(xiàng)目的時(shí)候也大概是如下四種場(chǎng)景：

加載——展示進(jìn)度條和loading動(dòng)畫，主要操作為加載游戲資源，如圖片、音頻等。

開始——展示開始按鈕、活動(dòng)規(guī)則等，主要是讓玩家能有主動(dòng)開始的操作（很關(guān)鍵，后面會(huì)說到）。

游戲——整個(gè)游戲的主要邏輯都在這個(gè)場(chǎng)景中，最核心的部分。

結(jié)束——展示游戲最終得分、排名等。

這樣的場(chǎng)景的劃分也算是描述出了整個(gè)游戲的生命周期，我認(rèn)為上述四個(gè)場(chǎng)景是最基本的，缺了哪個(gè)場(chǎng)景游戲都不算完整，或者是體驗(yàn)不夠完善。

另外，關(guān)于再玩一次，有兩種方式，一種是回到開始場(chǎng)景，也就是說要再點(diǎn)一次開始游戲，這時(shí)候你可以再看看游戲規(guī)則等；另一種是直接開始游戲。選用哪一種方式視具體項(xiàng)目而定，比較常見的是直接開始游戲。

對(duì)象池

游戲中生成非常多的元素，我們會(huì)需要一個(gè)對(duì)象池來維護(hù)他們，對(duì)象池可以理解成是一個(gè)Group。那么關(guān)于對(duì)象池有以下相關(guān)的操作：

盡可能的復(fù)用對(duì)象，可以減少內(nèi)存的開銷。例如已經(jīng)移出可視范圍的對(duì)象（例如跑酷游戲的障礙），重新設(shè)置它們的位置，而不是重新創(chuàng)建。

如有確定要銷毀的對(duì)象，記得顯式調(diào)用distroy方法（一般游戲框架并不會(huì)被銷毀killed的對(duì)象，它們還能被“復(fù)活”）。

每一步我都會(huì)給出示例代碼，大家點(diǎn)擊示例代碼鏈接旁的“點(diǎn)擊預(yù)覽”即可看到效果。

第一步：創(chuàng)建實(shí)例

引入Phaser.js

創(chuàng)建游戲?qū)嵗?/p>

說明：這里寬高設(shè)置成320*568是為了方便大家查看示例，實(shí)際應(yīng)用場(chǎng)景應(yīng)該是

var width = window.innerWidth;
var height = window.innerHeight;

示例代碼：https://jsfiddle.net/Vincent_...

第二步：定義場(chǎng)景

定義每個(gè)場(chǎng)景的內(nèi)容

將場(chǎng)景添加到游戲?qū)嵗?/p>

說明：

每個(gè)場(chǎng)景都是一個(gè)function。

通過game.state.add可以將場(chǎng)景添加到游戲

示例代碼：https://jsfiddle.net/Vincent_...

第三步：將場(chǎng)景串通

具體定義每個(gè)場(chǎng)景的生命周期

從一個(gè)場(chǎng)景切換到另一個(gè)場(chǎng)景

啟動(dòng)游戲

說明：

每個(gè)場(chǎng)景都有自己的生命周期，常用的生命周期是preload（加載）、create（準(zhǔn)備就緒）、update（更新周期）、render（渲染完成）。順帶介紹一下這四個(gè)生命周期吧（詳細(xì)介紹可以查看官方離線文檔）：

preload - 盡管我們有預(yù)加載的場(chǎng)景，但如果你希望能縮短進(jìn)入頁面時(shí)加載的時(shí)間，可以分?jǐn)傄恍┑狡渌麍?chǎng)景，只需要在其他場(chǎng)景加入preload方法即可。

create - 如果存在preload方法，則會(huì)在加載完畢后執(zhí)行此方法；否則將在進(jìn)入該場(chǎng)景時(shí)直接執(zhí)行此方法。

update - 更新周期自動(dòng)執(zhí)行的方法，例如在play場(chǎng)景的update方法中可以去檢測(cè)兩個(gè)物體是否有接觸。

render - 渲染完畢后執(zhí)行的方法，例如可以在此方法中勾勒出物體的邊緣，來方便觀察物體的碰撞區(qū)域。

示例代碼：https://jsfiddle.net/Vincent_...

至此我們已經(jīng)將游戲的場(chǎng)景設(shè)置好，并成功啟動(dòng)了游戲，通過游戲背景顏色的變化可以體驗(yàn)到場(chǎng)景的切換，我們也能了解到整個(gè)游戲分為了四部分，每部分有自己的生命周期。

很多教程會(huì)從創(chuàng)建主角做起，但我認(rèn)為先把游戲骨架搭建好了，再豐富每個(gè)場(chǎng)景里面的細(xì)節(jié)，會(huì)更容易理解整個(gè)游戲的運(yùn)行過程。

代碼沒有很多行，我也都用ES5來寫，閱讀起來應(yīng)該不費(fèi)勁。這一節(jié)包括后面的章節(jié)的內(nèi)容都不會(huì)太多，方便大家消化。同時(shí)也盡可能的介紹每一步是怎么做的。

搭建好游戲的骨架后，我們總算是邁出了第一步。

回顧：Chapter 1 - 認(rèn)識(shí)Phaser.js

下一節(jié)：Chapter 3 - 加載游戲資源