html5遊戲引擎phaser官方示例學習

phaser官方示例學習進行中，把官方示例調整爲簡明的目錄結構，學習過程當中加了點中文註釋，代碼在這裏。

目前把官方的完整遊戲示例看了一大半，

breakout是敲磚塊，gemmatch是鑽石消除，invaders是小蜜蜂，matching是配對，simon是記憶遊戲，sliding是拼圖，starstruck相似超級馬里奧，tanks是坦克遊戲。

遊戲場面上看，敲磚塊、小蜜蜂是豎版，超級馬里奧是橫版，坦克遊戲是俯瞰，鑽石、配對、記憶、拼圖這四個都是棋盤。

界面構成上看，棋盤類遊戲基本都用到了瓦塊圖，磚塊蜜蜂和坦克是基本精靈，馬里奧是瓦塊和精靈組合。

瓦塊圖的繪製使用Tiled進行可視化繪製，繪製完生成json文件，該文件即保存了世界的結構，這個還在摸索。瓦塊圖的素材網上有不少，其實RPGMaker各個版本自帶的素材就不錯，它們自帶的效果素材如爆炸什麼的也能夠在phaser中使用，行走圖也能用。

由於phaser自身支持動畫，定義精靈的時候除了能夠指定一張簡單圖片，還能夠指定一張包含了許多幀的大圖片（其實只使用其中的一幀如磚塊鑽石，或者將其中的許多幀一塊兒做爲動畫使用如小蜜蜂的敵機），甚至能夠指定多張圖片來造成動畫（坦克例子有所演示），除此以外也能夠將多個精靈組成一個邏輯精靈（也是坦克例子演示的，車身、炮塔、陰影分別是不一樣的精靈）。

敵人精靈的行爲，簡單的就在主循環update方法裏爲之寫邏輯，例如小蜜蜂的敵機，複雜點的能夠把敵人定義個類，用prototype的方式編寫實例方法，在update方法中遍歷之調用某方法，甚至你可能將多個不一樣類的敵人放到同一個數組裏，調用它們的同名方法便可，這有點像java的多態特性，但javascript是弱類型的。

玩家的行爲，分爲鼠標操做和鍵盤操做，鍵盤操做在主循環update裏判斷是否按下，若是不想太頻繁地響應用戶操做，能夠用個變量保存上次操做時間，再有操做看看其間是否已隔了足夠多的毫秒數，不然就不處理，這種「臨界值」的使用各個例子中很常見。

鼠標操做能夠在主循環判斷鼠標鍵是否按下，更直觀的是爲精靈添加按下/釋放/移動..等響應函數，當鼠標在精靈上作了操做直接調用函數，鑽石遊戲是很好的演示。至於鼠標的位置，棋類遊戲能夠把其先轉化爲在棋盤中的哪一格，獲得行數列數再處理，而坦克遊戲則直接使用指針的位置來做爲目標旋轉炮塔和發炮。

遊戲中能夠用重複而自鏈接的小圖片做爲背景，相似現實中地磚或牀單上的圖案，實際上是一個精靈，鎖定在屏幕上，你本身來寫代碼讓它捲動，例如小蜜蜂自動將星空向下滾相似飛機在向上飛，而坦克遊戲則是向坦克的移動方向反方向卷，看着效果就是坦克和地面的相對位置變化與現實中一致，至於超級馬里奧遊戲，乾脆不捲了，這是由於畫面上的地圖元件已經足夠呈現移動的效果。

配對、記憶、拼圖都有「電腦知道而玩家不必定記得」的信息，例如配對遊戲中每一個格子背後的畫是什麼，記憶遊戲到底出的題目的數字序列是什麼，拼圖遊戲成功時每一個碎片應該在什麼位置，這些信息固然存在遊戲的全局變量裏，另外例如坦克遊戲裏敵人坦克的血量，則由敵人坦克類的一個屬性保存。遊戲狀態的保存使用什麼編程元素均可以，能夠想到的還有html5的本地存儲甚至數據庫，甚至是用ajax或者websocket存到服務器上。

記憶遊戲有「關卡」的概念，而小蜜蜂遊戲當三條命死絕以後有點擊從新開始遊戲的功能，這些進入新關卡或者從新開始遊戲，固然不要location.reload，也不要從新初始化dom之類這樣大張旗鼓的事，其實從新開始遊戲只是邏輯上的從新開始，將全局變量重設爲初始狀態（過關則是關卡數加一其餘數據清零），並從新顯示適當的交互信息便可，例如播放動畫、提示用戶點擊開始什麼的。

棋盤類遊戲中的精靈，既有座標，也有身處第幾行、第幾列的概念，遊戲邏輯中固然是用行數列數寫邏輯最合理，當要移動棋子時，則使用座標編寫動畫語句優美地滑過去，而行數列數則直接指定，表明「該在哪兒」。

小蜜蜂和坦克有炮彈和爆炸的臨時精靈，用「池」來預先初始化一批這樣的精靈，用到就取出，用完再歸還，與數據庫的鏈接「池」、服務器的線程「池」是相同的思想，避免對象過多。炮彈打到敵人坦克/飛機上時的事件，則是主循環中檢測接觸，若是接觸則作點什麼，好比銷燬炮彈、播放動畫效果、敵人血量減小甚至死亡。

目前的體會就這些，總結核心的關鍵點是主循環、精靈、全局狀態、玩家行爲、精靈策略，固然還有tile地圖。

長期歡迎項目合做機會介紹，項目收入10%用於酬謝介紹人。新浪微博：@冷鏡，QQ：908789432。