Egret白鷺H5開發-圍住神經貓
官網連結：www.egret.com/ 簡單地說，白鷺引擎就是一套H5遊戲開發解決方案，擁有以下產品，其中最核心的就是 Egret Engine ，其他的都是一些開發輔助工具。關於這些的介紹，還是直接戳上方官網連結去看看吧。
瞭解下圍住神經貓遊戲
遊戲介面
遊戲gif動圖
遊戲玩法介紹
點選螢幕上的白色格子，將神經貓圍起來，別讓貓跑到上下左右四個邊界上，最後貓無路可走就玩家贏了，如果貓跑到了邊界上，貓就贏了。
新建一個專案
下面是安裝和專案建立步驟，具體可看官網教程 我用的是Mac osx系統，所以下面以mac軟體安裝為例。
安裝引擎庫管理工具(Egret Launcher)
直接下載mac版安裝包安裝，安裝完成後開啟Egret Launcher.app，出現以下介面，可以選擇引擎版本下載，我這裡下載了最新的5.2.11版本。
接著點選工具，安裝Egret Wing 3，這是一個Egret白鷺專案開發的IDE，專案開發，除錯編譯都可以使用這個來，比較方便。
建立專案
直接在Egret Launcher上面點選專案選項，建立專案
- 專案型別這裡選擇 Egret 遊戲專案
- 縮放模式[官方文件] 這裡我選擇fixedWide，舞臺寬高為螢幕寬高，背景圖片需要處理一下，可能四周會被裁剪。
專案結構
上面選項選好填好後，點選建立，然後點選專案這裡，就可以用Egret Wing 3開啟專案
專案結構如下：
- bin-debug: 專案除錯時，所產生的檔案存放於此目錄。
- libs: 庫檔案，包括 Egret 核心庫和其他擴充套件庫存放於此目錄。
- resource: 專案資原始檔存放於此目錄，比如圖片、音訊等。
- scripts: 專案構建和釋出時需要用到的指令碼檔案存放在此目錄。
- src: 專案程式碼檔案存放於此目錄。
- template: 專案模板檔案存放於此目錄。
- egretProperties.json: 專案的配置檔案。具體的配置說明可以參考：EgretProperties說明
- index.html: 入口檔案。具體的配置說明可以參考：入口檔案說明
- manifest.json: 網頁清單檔案。
- tsconfig.json: typescript 編譯配置檔案。
執行專案
用Egret Wing 3開啟專案開啟專案後，直接點選工具欄中的 編譯 按鈕：
編譯完成後，點選右下角http server按鈕，在彈窗中點選連結，就可以在瀏覽器檢視效果了（或者編譯完成後，點選專案-除錯）：
效果（白鷺專案預設的）：
至此，專案算是 新建完成也跑成功了，接下來就開始實現自己的遊戲。
開發神經貓遊戲
專案架構
我有一個習慣，寫專案總喜歡儘可能地提取共用程式碼封裝起來，所以每次寫新專案都會先想好如何架構。由於第一次自己用白鷺寫一個完整的遊戲專案，場景跳轉等實在不知道如何控制，所以看了一下視訊，覺得挺不錯的，所以我的這個專案也是這樣的架構：
- 遊戲分為開始、遊戲、結束三個場景
- 一個場景控制器類，用於控制顯示哪些場景（全域性可呼叫）
- 一個儲存遊戲資料（全域性可用，方便各個場景直接使用）
- 一個工具類（獲取寬高、圖片等）
- ...
於是專案結構就是這樣：
┗ src ┣ common // 存放一些共用的類 ┃ ┗ GameUtil.ts // 遊戲工具類，獲取圖片、舞臺寬高等 ┣ game // 遊戲相關 ┃ ┣ bean // 一些bean，比如貓類、普通圓點 ┃ ┃ ┣ Cat.ts // 貓（有座標，狀態，搜尋路徑方法等） ┃ ┃ ┣ GridNode.ts // 格子節點（x，y，狀態等） ┃ ┃ ┣ Point.ts // 圓點（x，y） ┃ ┣ scene // 遊戲場景 ┃ ┃ ┣ BaseScene.ts // base場景，所有場景繼承這個 ┃ ┃ ┣ EndScene.ts // 結束場景 ┃ ┃ ┣ PlayScene.ts // 遊戲場景 ┃ ┃ ┗ StartScene.ts // 開始場景 ┃ ┣ GameData.ts // 存放遊戲資料 ┃ ┗ SceneControlloer.ts // 場景控制器 ┣ LoadingUI.ts // 載入頁 ┣ Main.ts // 遊戲主類（入口，所有場景都放在這個上面顯示） ┗ Platform.ts // 可用於定義一些window上的物件，介面（比如微信登入等），暫時用不到 複製程式碼
寫遊戲
建好目錄
先按上面專案結構建好各個目錄檔案（內容暫時為空，完後再寫）
修改Main.ts
刪除Main.ts中createGameScene方法裡面的內容、刪除createBitmapByName方法（待會寫到GameUtil類中）和startAnimation方法（不需要），刪除之後的Main.ts是這樣：
實現工具類
common/GameUtil.ts中寫一個GameUtil類，新增getStageHeight（獲取舞臺高度）、getStageWidth（獲取舞臺寬度）、createBitmapByName（根據傳入的名稱建立Bitmap）、createMovieClipByName（根據傳入的名稱建立MovieClip）方法，實現如下：
修改LoadingUI.ts
修改LoadingUI.ts，讓進度條居中顯示
實現BaseScene類
實現BaseScene類，繼承egret.DisplayObjectContainer類，擁有initView方法，之後的所有場景繼承自該類，只需實現initView方法即可
新增背景圖片
在Main.ts的createGameScene方法中新增背景圖片，後面紅色方框內兩句是用於設定場景，初始化場景，暫時先不用理
實現遊戲控制類SceneController.ts
寫SceneController.ts類（場景控制），這是一個單例，有initGame（初始化遊戲，顯示開始遊戲場景）、showPlayScene（顯示遊戲場景）、showLevelTip（開始遊戲時提示關卡的動畫）、showEndScene（顯示結束場景）
實現開始場景1
首先寫開始場景StartScene.ts，很簡單，就一張圖片和一個按鈕，這裡的GameUtil.bitmapToBtn()方法是給元件新增點選縮放效果（類似按鈕），具體實現如下
實現開始場景2
在場景控制類中的initGame方法裡面顯示開始場景，程式碼和效果如下：
實現遊戲場景
遊戲場景PlayScene.ts，遊戲場景有中間一些格子和一隻貓，格子用二維陣列存放，自己實現GridNode.ts繼承自egret.Sprite表示格子節點並可新增到舞臺上（有節點狀態（可走、不可走、有貓）、在陣列中的下標、在舞臺上的座標、格子的大小、格子的背景圖片、遊戲監聽介面（PlayScene.ts實現這個介面，並在建立格子的時候傳進來，用於通知使用者點選哪個格子、貓走哪個格子、誰贏等等）），再來實現貓精靈Cat.ts繼承egret.Sprite（有狀態（有路可走、被圍住但是還有空格可以走，只是走不出去了）、在陣列中的下標、大小、背景、遊戲監聽介面、坐在的格子節點），同時貓還有尋找路徑等方法（後面再說）。 在遊戲控制類中，控制顯示遊戲場景
遊戲開始前，有一個提示關卡的動畫，也是在遊戲控制類中控制提示（具體看專案程式碼） 初始化格子節點，偶數行需要縮排（就是加多個左邊距）
初始化建立一些障礙物
建立貓節點（在陣列中間）
此刻執行效果如下
GridNode.ts主要方法，監聽觸控事件，判斷是否可以點選
PlayScene.ts中實現一個playerRun方法表示玩家點選格子、catRun方法為貓走的格子、canRun方法返回當前貓是否走完（還在思考中那麼玩家就不能點選格子）
實現貓搜尋路徑演算法
到這裡，遊戲場景基本完成，現在就來寫最重要的一點，貓搜尋路徑的演算法，分析一下，貓要跑出去，第一步就是要選擇最短路徑，很簡單，用bfs演算法搜尋（只貼主要程式碼，其他可以到github檢視）：
如果沒有路徑走出，那麼得到的結果是一個空陣列，那麼此時需要判斷是否有格子可以走，如果沒有代表貓輸了，如果有就隨機走一個可以走的格子（反正走不出去了，那就隨機走）
如果有路徑走出，那麼就隨機選一條路徑走。
優化演算法上面的演算法等找出左右最短路徑，但隨機走的話，可能走的還不是最優路徑，因為可能某些路徑只有一條路，這種情況很容易被堵掉，那麼需要再實現一個演算法篩選出有多個終點的路徑，因為上一步存放了所有路徑需要走的第一個格子，那麼演算法可以通過判斷第一步格子相同的路徑的數量來選擇，可能得到的就剩下一條路徑（如果還有多條，那就可以隨機選擇一條路徑了）
這還不是最優演算法！！！這個演算法有一種死路也會被選擇（多個路徑需要再第二步之後才會出現，但是第一步走完可能就會被堵死，這種情況我沒有判斷，有興趣的可以自己去實現），另外，如果有其它更好的演算法，歡迎評論區推薦~
結束場景很簡單，就根據GameData.ts中儲存的全域性遊戲資料，判斷顯示成功彈窗還是失敗彈窗 成功彈窗：失敗彈窗：