什么是Phaser？
簡單來說，Phaser就是一款免費開源的HTML5游戲框架
它有什么特點？
高性能：快速、免費、易於維護。一方面，開發者可以直接通過Koding平台上的VM開發系統進行代碼編寫及預覽。另一方面，也可以在支持Canvas的瀏覽器中直接安裝Phaser來進行游戲開發。
多種支持：JavaScript、TypeScript雙重支持、內置游戲對象的物理屬性、WebGL、Canvas渲染自由切換、完全支持Web音頻、輸入：多點觸控、鍵盤、鼠標、MSPointer事件。
兼容性強：除了IE 9+、Firefox、Chrome、Safari及Opera等桌面瀏覽器之外，Phaser還支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移動瀏覽器。使用Phaser進行游戲開發沒有任何語言設定。
為什么選擇它？
在根據統計到的《2016年最火的15款html5游戲引擎》（原文地址：https://www.diycode.cc/topics/16）文章中可以看到，phaser.js排在第二位，在pixi.js和egret.js之前，而排在第一位的three.js學習難度和周期比較高，如果從受歡迎程度來講的話，當然優先考慮phaser.js，如果專注於html5游戲開發或者有這方面的發展意向，那這幾個都可以深入學習下。另外值得一提的是，egret.js是國內開發的一款H5框架，也就是俗稱的白鷺，來自北京白鷺時代信息技術有限公司，毫無疑問，國人開發的框架，中文API讀起來是最方便的，有興趣的同學也可以優先考慮這個框架。
一起學習
引入
創建一個簡單得游戲場景
new Phaser.Game參數為：游戲的寬，游戲的高，游戲的引擎，游戲的容器id，游戲的各種狀態，背景是否透明，是否消除鋸齒，物理引擎設置。這樣就會在id為phaser-example創建一個canvas場景，返回這個游戲對象。
物理引擎
物理引擎，聽起來很高大上，其實說白了，就是解決物理現象的一些算法：比如速度、加速度、重力等等。
Phaserjs中的物理引擎有三個，Arcade、Ninja和P2，三個物理引擎都提供了關於碰撞、重疊、移動等的處理方法，也都包含了重力、加速度、移動等方面的屬性，不過也有不同，Arcade屬於Phaserjs的內置引擎，Ninja引擎不是Phaserjs默認捆綁的物理引擎，使用的話需要先注冊，P2物理引擎則是一個單獨的物理引擎，很強大，不僅支持Phaserjs，也支持其他的一些框架
碰撞檢測
游戲的狀態
游戲的狀態中包括初始化游戲參數，加載資源，創建場景，監測更新，實時渲染等，使用什么的游戲狀態，根據自己的需求來
所有狀態：init，preload，loadUpdate，loadRender，create，update，preRender，render，resize，paused，resumed，pauseUpdate，shutdown
加載圖片，文字，動畫
為了減少請求可以使用這種紋理圖片，根據位置找到不同的圖片
加載動畫其實就是每隔多長時間變化一下渲染的圖片位置
常用的基礎屬性
anchor（錨點）：取值范圍0~1，其實就是，元素（圖片、文字等）中心與放置位置（添加到的坐標）相對於自身長寬的一個比例，比如（0,0）表示元素左上角坐標和放置位置坐標重合，（1,1）表示元素右下角坐標和放置位置坐標重合，（0.5,0.5）表示元素中心和放置位置重合，其他則根據元素長寬比例來設置。
scale（縮放比例）：相對於元素原始尺寸的比例。
angle（角度）：一個有效的數字，一般取值0~360.
alpha（透明度）：也就是rgba中的a，取值范圍0~1.
鼠標，觸屏，按鍵事件
有很多是都發現down打印不出來，我們都會使用mousePointer或者activePointer對象來操作鼠標
不同的鍵對用不同的屬性 http://phaser.io/docs/2.6.2/Phaser.KeyCode.html
音頻視頻
音頻和視頻要注意的點就是兼容性，據我測試一些低端的手機是不支持的。剩下的就是播放、暫停、繼續、停止、加大音量、減小音量這類操作，找到對應的api即可
位移，拖拽和補間動畫
游戲j對象的位移都是通過改變游戲對象x,y坐標來實現的
enableDrag的參數
enableDrag(lockCenter,bringToTop, pixelPerfect, alphaThreshold, boundsRect, boundsSprite)
lockCenter：是否鎖定中心，無論你按下的位置是在sprite的哪里，下一個畫面sprite中心就會出現在你按下的地方；
bringToTop：是否置頂，就是拖動結束后是否位於最頂層；
pixelPerfect：是否啟用像素識別，這樣翻譯有利於理解，一張png圖片只可能是矩形，但是上面的圖像不一定占滿整個矩形，如果啟用像素識別，代碼會判斷你點擊的位置是否在圖像上，如果點擊的位置在空白區域，則拖動無效；
alphaThreshold：像素識別的精度，取值范圍0~255，數值越大精度越高；
boundsRect：定義矩形邊界；
boundsSprite：定義一個sprite為邊界，你可以試着添加一個和游戲窗口一樣大的sprite圖片，然后參數設置為它試下。
補間動畫最重要的兩個方法是from和to
time（時間對象）和timer（定時器對象）
time調用得到時間對象timer，也有對應的api去啟動，暫停，重啟，銷毀
組
組有點類似數組，將子項添加到組內，設置組的屬性會給每個子項都設置，不用每個都操作一遍，這樣很方便。
總結：使用phaserjs創建小游戲要先了解自己得需求適合什么引擎，像p2引擎支持多邊形碰撞，使用對了引擎才能走向成功。創建對象並給他設置他自己得屬性，搞懂事件知道自己什么時候做出什么動作，使用紋理圖和補間動畫讓對象動起來，時間對象就跟普通js得差不多，多個子項一定要使用組，做好碰撞檢測。多去看看例子。
phaser官網上有大量的例子，基本涵蓋了常用的東西。phaser小站上也有一些大牛寫的例子，仿照着寫寫，就會有提高的。
找了點博客幫助理解： https://blog.csdn.net/qq_36843675/article/details/79096043#load
https://blog.csdn.net/daveleecn/article/details/79017410
https://segmentfault.com/a/1190000009212221
中文網：http://www.phaserengine.com/
phaser小站：https://www.phaser-china.com/example-detail-422.html
制作多邊形圖片：https://www.codeandweb.com/physicseditor
社區：http://club.phaser-china.com/
QQ群：519413640，384427721