1 專案概述
遊戲開發，尤其是微信小遊戲開發，是最近幾年比較熱門的話題。
本次「雲開發」公開課，將通過實戰「線上對戰五子棋」，一步步帶領大家，在不借助後端的情況下，利用「小程式 ✖ 雲開發」，獨立完成一款微信小遊戲的開發與上線。
2 任務目標
根據專案初始框架，閱讀教程的同時，逐步完成棋盤繪製、音樂播放、玩家對戰、輸贏判定等功能，最終實現一個可以快樂玩耍的線上對戰五子棋。
在這個過程中，會了解到 Serverless 的一些概念，並且實際應用它們，比如：雲資料庫、雲端儲存、雲函式、增值能力。除了這些基本功能，還準備了更多的硬核概念與落地實踐，比如：實時資料庫、聚合搜尋、許可權控制。
完成開發後，上傳並且設定為體驗版，歡迎邀請更多人來體驗。
3 準備工作
從 TencentCloudBase/tcb-game-gomoku 中下載程式碼到本地：
git clone https://github.com/TencentCloudBase/tcb-game-gomoku.git
cd tcb-game-gomoku/切換課程專用的 minigame-study 分支：
git checkout minigame-study4 實戰任務
4.1 建立雲開發與小遊戲環境
1、開啟微信 IDE，點選左側的小遊戲，選擇右側的匯入專案，匯入之前下載的「線上對戰五子棋」的目錄，AppID 修改為你已經註冊好的小遊戲 AppID。
2、進入後，點選上方的雲開發按鈕。如果之前沒有開通過雲開發，需要開通雲開發，新開通的話需要等待 10 ～ 20 分鐘。
3、進入「雲開發/資料庫」，建立新的集合，新集合的名稱是rooms。
4、進入「雲開發/儲存」，點選“上傳檔案”。上傳的內容是/static/下的bgm.mp3 和 fall.mp3。之後的程式碼中會通過雲端儲存的介面，請求檔案的臨時 url，這樣做的目的是減少使用者首次進入遊戲載入的靜態資源。
4.2 準備配置檔案
建立配置檔案：
cp miniprogram/shared/config.example.js miniprogram/shared/config.js將關鍵欄位的資訊，換成自己賬號的資訊即可：
4.3 建立雲開發介面
開啟 miniprogram/shared/cloud.js，在裡面初始化雲開發能力，並且對外暴露雲資料庫以及聚合搜尋的 API。
4.4 獲取雲端儲存資源的連結
為了減少使用者首屏載入的靜態資源，音樂資源並沒有放在miniprogram目錄下，而是放在了雲端儲存中，通過呼叫雲端儲存的 api 介面，來返回靜態資源的臨時連結。
在 miniprogram/modules/music.js中，會呼叫資源介面，獲取資源連結：
getTempFileURL函式屬於雲開發相關，因此放在了 miniprogram/shared/cloud.js中。這裡只需要臨時連結tempFileURL屬性，其它返回值直接過濾調即可。
為了方便外面呼叫，promise 內部不再用 reject 拋錯。對於錯誤異常，返回空字串。這樣，載入失敗的資源不會影響正常資源的載入和 Promise.all 中邏輯進行。
4.5 遊戲進入與身份判斷
根據前面的流程圖我們可以看到，遊戲玩家的身份是分為 owner 與 player。它們的含義如下：
- owner：玩家進入遊戲後，查詢是否有空閒房間，如果不存在空閒房間，那麼就會主動建立新的空閒房間。那麼對於新建立的房間，玩家就是 owner。
- player：玩家進入遊戲後，查詢是否有空閒房間，如果存在空閒房間，那麼就加入空閒房間。那麼對於空閒房間，玩家就是 player。
判斷的依據就是 judgeIdentity 方法中，讀取雲資料庫集合中的 rooms 的記錄。如果存在多個空閒房間，需要選取建立時間最近的一個房間。因此，這裡需要用到「聚合搜尋」的邏輯。
聚合搜尋的條件，在這裡有 3 個：
- 標記人數的欄位，是否為 1
- 建立時間倒敘排序
- 只選擇 1 個
4.6 建立新房間
在上述的身份判斷函式邏輯中，如果聚合搜尋查詢的結果為空，說明沒有空閒房間，玩家需要作為 owner 來建立新的房間，等待其它玩家加入。
建立房間的邏輯就是將約定好的欄位，放進雲資料庫的記錄中。這些欄位有：
- roomid<
String>: 6 位房間號，唯一 - nextcolor<
"white" | "black">: 下一步是白棋/黑棋走 - chessmen<
String>: 編碼後的棋盤資料 - createTimestamp<
String>: 記錄建立時間戳，精確到 ms - people<
Number>: 房間人數
是的，你可能注意到了，這裡需要保證 roomid 是不重複的。因此本地生成的隨機 roomid，需要先呼叫雲資料庫的查詢介面，檢測是否存在。如果存在，那麼遞迴呼叫，重新生成隨機字串。
4.7 監聽玩家進入
對於 owner 身份來說，除了要建立新房間，還需要在建立後監聽 player 身份的玩家進入遊戲。
對於 player 身份的玩家進入遊戲後，會更新記錄中的 people 欄位（1 => 2）。這時候就需要利用「實時資料庫」的功能，監聽遠端記錄的 people 欄位變化。
程式碼實現上，呼叫watch方法，並且傳遞onChange函式引數。一旦有任何風吹草動，都可以在onChange回撥函式中獲得。對於傳遞給回撥函式的引數，有兩個比較重要：
- docChanges<
Array>: 陣列中的每一項對應每條記錄的變化型別，變化型別有 init、update、delete 等。 - docs<
Array>: 陣列中的每一項對應每條記錄的當前資料。
4.8 越權更新欄位
對於 player 身份來說，進入房間後，既不需要「建立新房間」，也不需要「監聽玩家進入」。但需要更新記錄的 people 欄位。由於記錄是由 owner 身份的玩家建立的，而云資料庫只有以下 4 種許可權：
- 所有使用者可讀，僅建立者可讀寫
- 僅建立者可讀寫
- 所有使用者可讀
- 所有使用者不可讀寫
以上 4 種許可權，並沒有「所有使用者可讀寫」。因此，對於越權讀寫的情況，需要通過呼叫雲函式來以“管理員”的許可權實現。在 cloudfunction 中建立 updateDoc 雲函式，接收前端傳來的 collection、docid、data 欄位。對於 data 欄位來說，就是資料記錄的最新更新資料。
在小遊戲中，通過wx.cloud.callFunction來呼叫雲函式。傳入的 data 欄位指明被呼叫的雲函式，傳入的 data 欄位可以在雲函式的回撥函式的 event 引數中訪問到（如上圖所示）。
4.9 落子更新邏輯
不論對於 player 還是 owner 身份，都需要處理落子的邏輯。落子邏輯中，下面的兩種情況是屬於無效落子：
- 點選位置已經有棋子
- 對方還未落子，目前依然處於等待情況
對於以上兩種情況，處理的邏輯分別是：
- 棋盤狀態儲存在內部類中，呼叫落子的函式，會返回是否成功的欄位標識
- 只有監聽到遠端棋盤更新後，才會開啟本地的鎖，允許落子；落子後，會重新上鎖
落子成功後，要在本地判斷是否勝利。如果勝利，需要呼叫退出的邏輯。但無論是否勝利，都要將本地的最新狀態更新到雲端。
4.10 監聽遠端棋盤更新
不論對於 player 還是 owner 身份的玩家，都需要監聽遠端棋盤的更新邏輯。當遠端棋盤欄位更新時，本地根據最新的棋盤狀態，重繪整個棋盤。並且進行輸贏判定，如果可以判定輸贏，則退出遊戲；否則，開啟本地的鎖，玩家可以落子。
因為不同身份均需要監聽，因此這一塊的監聽邏輯可以複用。不同的是，兩種身份的監聽啟動時間不一樣。owner 身份需要等待 player 身份玩家進入遊戲後才開啟棋盤監聽；player 身份是更新了 people 欄位後，開啟棋盤監聽。
在監聽邏輯中，需要判斷遠端更新的欄位是否是 chessmen，這是通過前面提及的 dataType 來實現的。還徐喲啊判斷記錄中的 nextcolor 欄位是否和本地的 color 一樣，來決定是否開啟本地的鎖。
如果上述的兩個條件均滿足，則執行更新本地棋盤、判定輸贏、開啟本地鎖的邏輯。
4.11 遊戲結束與退出
每次需要判定輸贏的地方，如果可以判定輸贏，那麼都會走到遊戲退出邏輯。退出的邏輯分為 2 個部分，第 1 個是給使用者提示，第 2 個是呼叫雲函式清空記錄。
第 1 個邏輯中使用者提示，需要判定使用者勝負狀態：
第 2 個邏輯中清除記錄的原因是為了方便除錯，對於真正的業務場景，一般不會刪除歷史資料，方便問題定位。同時，這也是一個越權操作，需要呼叫雲函式來實現。
6. 課程完整原始碼
https://github.com/TencentCloudBase/tcb-game-gomoku
7. 聯絡我們
更多雲開發使用技巧及 Serverless 行業動態，掃碼關注我們~
