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-study

4 實戰任務

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
2. 建立時間倒敘排序
3. 只選擇 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 身份，都需要處理落子的邏輯。落子邏輯中，下面的兩種情況是屬於無效落子：

1. 點選位置已經有棋子
2. 對方還未落子，目前依然處於等待情況

對於以上兩種情況，處理的邏輯分別是：

1. 棋盤狀態儲存在內部類中，呼叫落子的函式，會返回是否成功的欄位標識
2. 只有監聽到遠端棋盤更新後，才會開啟本地的鎖，允許落子；落子後，會重新上鎖

落子成功後，要在本地判斷是否勝利。如果勝利，需要呼叫退出的邏輯。但無論是否勝利，都要將本地的最新狀態更新到雲端。

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 行業動態，掃碼關注我們~

相關推薦