摘要：由于公司項目轉型，需要創造一個小游戲平臺，需要使用一個比較成熟的前端游戲框架來快速開發小游戲。僅支持開發游戲，因為專注，所以高效。早在年的光棍節前一天晚上，這個游戲就誕生了。原型是一個之前很火的非常魔性的小游戲，叫尋找程序員。

實際上我從未想過我會接觸到H5小游戲開發，那是在2015年末，當時我還剛開始學習iOS不久，用Swift在寫一個類似于Snapchat的應用。由于公司項目轉型，需要創造一個小游戲平臺，需要使用一個比較成熟的前端游戲框架來快速開發小游戲。都說創業公司有無限的實踐機會，于是，我就接觸到了Phaser.js，并在此后的兩個月的時間里開發了十多個H5小游戲模板。

可能大家都沒聽說過，先貼個官網地址吧：http://phaser.io/。

沒錯，在國內可能比較少聽說這個框架，畢竟是老外在維護的一個開源項目，看風格就知道。說真的，這個洋蔥頭愛心臉的外星人不可能會是我國的設計師想出來的形象，國內比較有名的游戲開發引擎，例如白鷺，就很有中國特色。

由于近幾年H5的火熱，H5游戲框架如雨后春筍般一個個地冒出來，甚至有很多定位不是游戲開發的框架都被歸到這個范疇中，如Pixi.js等。那么大家肯定會問一個問題：為什么選擇Phaser？以下是我選擇它的一些原因：

出現在國外幾乎所有的H5游戲框架的榜單中，而且名列前茅。

支持原生JS及TypeScript。

可以方便地在Canvas和WebGL之間切換。

僅支持開發2D游戲，因為專注，所以高效。

定位如上圖所示，是桌面和移動端H5游戲框架，Pixi.js、Three.js這些框架則不同，它們不是專門針對游戲開發設計的，拿來開發游戲并沒有很輕松。

非常完善的文檔及示例（當然是英文文檔）。

持續更新，目前Phaser 3正在開發，沒什么比一個熱度高的開源框架更值得推薦了。

當然了，每個框架都有優缺點，這里只作介紹，并不是要比個高低。網上也有很多H5游戲框架的介紹和評測，不過大多數都是2016年的，可以分享一下：

HTML5游戲引擎深度測評 - 冬夏之旅/簡書
2016年最火的15款HTML5游戲引擎 - linshulin/diycode
Top 15: Best open source javascript game engines

列舉其中一個榜單，非常好奇的是國內常見的Create.js，LAYABOX之類的框架并沒有出現：

第一點：體積并不小

也許就游戲框架而言并不算很大，但對于還沒有接觸過游戲開發的我來說，當時真是嚇到我了。（一般來說框架不都在100KB以內嗎~）因此拿Phaser來開發的話就基本要拋棄2G用戶了，盡管這部分用戶為數不多。

可優化的方案是gzip、CDN等等，另外可能的方案是拆解phaser用不上的部分（我本人沒有試過）。

第二點：靠文檔和示例能解決90%以上的問題

官網有大量的Examples，示例詳情還帶在線編輯、運行環境，照顧到家了。另外官方提供example的zip下載，大概300M左右，里面的素材都夠玩很久了。

上文也有提到Phaser的文檔非常完善，而且從github或官網download下來后離線版文檔體驗也非常好。每個類和API都有詳細的說明，順便推薦大家寫文檔可以用jsdoc來自動生成，非常方便。

第三點：上手非常簡單

首先由于Phaser支持原生JS，因此并無閱讀障礙。另外預設配置已非常完善，很多情況下使用默認配置已經能滿足需求。一個小游戲的主體邏輯在100行內基本可以搞定，其余的就是豐富游戲的表現了。

我們公司曾在廣州大學城設立一個小游戲工作室，招納了6個前端開發實習生，在沒有H5游戲開發的經驗的前提下，基本在1-2周內（每周只有3天工作時間）就完全上手Phaser，可以獨立開發小游戲了。在往后的幾個月內，也為我們平臺24好玩貢獻了不少模板。

借此說明Phaser上手非常簡單~

如果你玩過《尋找單身狗》這個游戲，希望你能給我點個贊。早在2015年的光棍節前一天晚上，這個游戲就誕生了。原型是一個之前很火的非常魔性的小游戲，叫尋找程序員。后來變成24好玩的模板后，還是很受追捧，以致于使用該模板創建的活動已有過百萬玩家參與，甚至我們公司設計的單身狗形象都被盜用了，就是下面這個doge：

目標就是在一堆人中找到doge，隨著游戲難度增加，人會越來越多，也會越來越小。

游戲截圖：

這里是游戲鏈接，也可以掃描下面的二維碼進入游戲，也算是供大家娛樂娛樂吧。

Phaser.js的介紹就到這里，想了解更多可以到Phaser的官網去。接下來還會更新幾篇文章，直接以實際項目為示例來介紹如何使用Phaser.js來開發小游戲，最后會附上一些開發的常用方法和實戰技巧。希望大家會喜歡。

下一節：Chapter 2 - 搭建游戲的骨架