Egret白鷺H5開發-圍住神經貓

前言

       今年9月份跳槽從Android轉向前端H5網頁和H5小遊戲開發，一開始本身學習用Canvas作了拼圖、貪吃蛇大做戰等小遊戲，在公司邊學習邊用phaser寫了個手勢識別的小遊戲，如今公司想嘗試轉型Egret白鷺引擎來開發H5，碰巧最近有個相似圍住神經貓的H5小遊戲項目，因此我就拿圍住神經貓來學習學習練練手。

       其實幾個月前，微信小遊戲出現的時候，我就用本身學過一點點Egret，就照着官方的簡單的demo下了一遍，大概瞭解了下，因此此次開發起來也是挺輕鬆的。

       多是我本身學習能力比較好，因此入門比較快，加上Egret用TypeScript來開發，寫法上有點相似於java和kotlin，而我之前就是作Android開發的，因此相對來講上手很快，學習成本下降了不少。

       這個遊戲的開發，前先後後共花了一天多的時間，圖片素材和音頻素材是在網上找的（有幾個按鈕仍是我本身用photoshop作的），僅用來學習。上午瞭解下，下午就直接上手開發，遊戲中有什麼寫得很差的，還望大神指點指點~

用Egret白鷺引擎寫的圍住神經貓H5遊戲

demo以及源碼地址

在線demo

(pc端看的話，打開開發者模式，切換手機模式) game.codebear.cn/nervecat

源碼地址

github.com/CB-ysx/game…

原文連接(個人博客)

codebear.cn/article?id=…

Egret白鷺引擎

官網連接：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按鈕，在彈窗中點擊連接，就能夠在瀏覽器查看效果了（或者編譯完成後，點擊項目-調試）：

效果（白鷺項目默認的）：

至此，項目算是 新建完成也跑成功了，接下來就開始實現本身的遊戲。

開發神經貓遊戲

項目架構

我有一個習慣，寫項目總喜歡儘量地提取共用代碼封裝起來，因此每次寫新項目都會先想好如何架構。因爲第一次本身用白鷺寫一個完整的遊戲項目，場景跳轉等實在不知道如何控制，因此看了一下視頻，以爲挺不錯的，因此個人這個項目也是這樣的架構：

1. 遊戲分爲開始、遊戲、結束三個場景
2. 一個場景控制器類，用於控制顯示哪些場景（全局可調用）
3. 一個保存遊戲數據（全局可用，方便各個場景直接使用）
4. 一個工具類（獲取寬高、圖片等）
5. ...

因而項目結構就是這樣：

┗ 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查看）：

若是沒有路徑走出，那麼獲得的結果是一個空數組，那麼此時須要判斷是否有格子能夠走，若是沒有表明貓輸了，若是有就隨機走一個能夠走的格子（反正走不出去了，那就隨機走）

若是有路徑走出，那麼就隨機選一條路徑走。

優化算法 上面的算法等找出左右最短路徑，但隨機走的話，可能走的還不是最優路徑，由於可能某些路徑只有一條路，這種狀況很容易被堵掉，那麼須要再實現一個算法篩選出有多個終點的路徑，由於上一步存放了全部路徑須要走的第一個格子，那麼算法能夠經過判斷第一步格子相同的路徑的數量來選擇，可能獲得的就剩下一條路徑（若是還有多條，那就能夠隨機選擇一條路徑了）

這還不是最優算法！！！這個算法有一種死路也會被選擇（多個路徑須要再第二步以後纔會出現，可是第一步走完可能就會被堵死，這種狀況我沒有判斷，有興趣的能夠本身去實現），另外，若是有其它更好的算法，歡迎評論區推薦~

實現結束場景

結束場景EndScene.ts

結束場景很簡單，就根據GameData.ts中保存的全局遊戲數據，判斷顯示成功彈窗仍是失敗彈窗 成功彈窗：

失敗彈窗：

寫在最後

以上寫了遊戲實現的步驟和部分代碼，具體代碼可前往github查看：github.com/CB-ysx/game… 這是我用egret寫的第一個項目，可能某些地方寫的不夠好，但願你們能指點指點~