用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

云開發之實時數據推送:打造在線對戰五子棋

Rolan 2019-8-30 00:56

1 項目概述游戲開發,尤其是微信小游戲開發,是最近幾年比較熱門的話題。本次「云開發」公開課,將通過實戰「在線對戰五子棋」,一步步帶領大家,在不借助后端的情況下,利用「小程序 ? 云開發」,獨立完成一款微信 ...

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

??minigame分支保存著「小游戲版」的完整代碼,miniprogram分支保存著「小程序版」的完整代碼。

4 游戲流程圖

小游戲版本的核心放在了實時對戰上,中間穿插應用了云開發的各個方面。如果想體驗完整的流程與交互,請前往miniprogram分支

5 實戰任務

5.1 創建云開發與小游戲環境

1、打開微信 IDE,點擊左側的小游戲,選擇右側的導入項目,導入之前下載的「在線對戰五子棋」的目錄,AppID 修改為你已經注冊好的小游戲 AppID。

2、進入后,點擊上方的云開發按鈕。如果之前沒有開通過云開發,需要開通云開發,新開通的話需要等待 10 ~ 20 分鐘。

3、進入「云開發/數據庫」,創建新的集合,新集合的名稱是rooms

4、進入「云開發/存儲」,點擊“上傳文件”。上傳的內容是/static/下的bgm.mp3 和 fall.mp3。之后的代碼中會通過云存儲的接口,請求文件的臨時 url,這樣做的目的是減少用戶首次進入游戲加載的靜態資源

5.2 準備配置文件

創建配置文件:

cp miniprogram/shared/config.example.js miniprogram/shared/config.js

將關鍵字段的信息,換成自己賬號的信息即可:

5.3 創建云開發接口

打開 miniprogram/shared/cloud.js,在里面初始化云開發能力,并且對外暴露云數據庫以及聚合搜索的 API。

5.4 獲取云存儲資源的鏈接

為了減少用戶首屏加載的靜態資源,音樂資源并沒有放在miniprogram目錄下,而是放在了云存儲中,通過調用云存儲的 api 接口,來返回靜態資源的臨時鏈接。

在 miniprogram/modules/music.js中,會調用資源接口,獲取資源鏈接:

getTempFileURL函數屬于云開發相關,因此放在了 miniprogram/shared/cloud.js中。這里只需要臨時鏈接tempFileURL屬性,其它返回值直接過濾調即可。

為了方便外面調用,promise 內部不再用 reject 拋錯。對于錯誤異常,返回空字符串。這樣,加載失敗的資源不會影響正常資源的加載和 Promise.all 中邏輯進行。

5.5 游戲進入與身份判斷

根據前面的流程圖我們可以看到,游戲玩家的身份是分為 owner 與 player。它們的含義如下:

  • owner:玩家進入游戲后,查找是否有空閑房間,如果不存在空閑房間,那么就會主動創建新的空閑房間。那么對于新創建的房間,玩家就是 owner。
  • player:玩家進入游戲后,查找是否有空閑房間,如果存在空閑房間,那么就加入空閑房間。那么對于空閑房間,玩家就是 player。

判斷的依據就是 judgeIdentity 方法中,讀取云數據庫集合中的 rooms 的記錄。如果存在多個空閑房間,需要選取創建時間最近的一個房間。因此,這里需要用到「聚合搜索」的邏輯。

聚合搜索的條件,在這里有 3 個:

  1. 標記人數的字段,是否為 1
  2. 創建時間倒敘排序
  3. 只選擇 1 個


5.6 創建新房間

在上述的身份判斷函數邏輯中,如果聚合搜索查詢的結果為空,說明沒有空閑房間,玩家需要作為 owner 來創建新的房間,等待其它玩家加入。

創建房間的邏輯就是將約定好的字段,放進云數據庫的記錄中。這些字段有:

  • roomid<String>: 6 位房間號,唯一
  • nextcolor<"white" | "black">: 下一步是白棋/黑棋走
  • chessmen<String>: 編碼后的棋盤數據
  • createTimestamp<String>: 記錄創建時間戳,精確到 ms
  • people<Number>: 房間人數

是的,你可能注意到了,這里需要保證 roomid 是不重復的。因此本地生成的隨機 roomid,需要先調用云數據庫的查詢接口,檢測是否存在。如果存在,那么遞歸調用,重新生成隨機字符串。

5.7 監聽玩家進入

對于 owner 身份來說,除了要創建新房間,還需要在創建后監聽 player 身份的玩家進入游戲。

對于 player 身份的玩家進入游戲后,會更新記錄中的 people 字段(1 => 2)。這時候就需要利用「實時數據庫」的功能,監聽遠程記錄的 people 字段變化。

代碼實現上,調用watch方法,并且傳遞onChange函數參數。一旦有任何風吹草動,都可以在onChange回調函數中獲得。對于傳遞給回調函數的參數,有兩個比較重要:

  • docChanges<Array>: 數組中的每一項對應每條記錄的變化類型,變化類型有 init、update、delete 等。
  • docs<Array>: 數組中的每一項對應每條記錄的當前數據。

5.8 越權更新字段

對于 player 身份來說,進入房間后,既不需要「創建新房間」,也不需要「監聽玩家進入」。但需要更新記錄的 people 字段。由于記錄是由 owner 身份的玩家創建的,而云數據庫只有以下 4 種權限:

  • 所有用戶可讀,僅創建者可讀寫
  • 僅創建者可讀寫
  • 所有用戶可讀
  • 所有用戶不可讀寫

以上 4 種權限,并沒有「所有用戶可讀寫」。因此,對于越權讀寫的情況,需要通過調用云函數來以“管理員”的權限實現。在 cloudfunction 中創建 updateDoc 云函數,接收前端傳來的 collection、docid、data 字段。對于 data 字段來說,就是數據記錄的最新更新數據。

在小游戲中,通過wx.cloud.callFunction來調用云函數。傳入的 data 字段指明被調用的云函數,傳入的 data 字段可以在云函數的回調函數的 event 參數中訪問到(如上圖所示)。

5.9 落子更新邏輯

不論對于 player 還是 owner 身份,都需要處理落子的邏輯。落子邏輯中,下面的兩種情況是屬于無效落子:

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

對于以上兩種情況,處理的邏輯分別是:

  1. 棋盤狀態保存在內部類中,調用落子的函數,會返回是否成功的字段標識
  2. 只有監聽到遠程棋盤更新后,才會打開本地的鎖,允許落子;落子后,會重新上鎖

落子成功后,要在本地判斷是否勝利。如果勝利,需要調用退出的邏輯。但無論是否勝利,都要將本地的最新狀態更新到云端。

5.10 監聽遠程棋盤更新

不論對于 player 還是 owner 身份的玩家,都需要監聽遠程棋盤的更新邏輯。當遠程棋盤字段更新時,本地根據最新的棋盤狀態,重繪整個棋盤。并且進行輸贏判定,如果可以判定輸贏,則退出游戲;否則,打開本地的鎖,玩家可以落子。

因為不同身份均需要監聽,因此這一塊的監聽邏輯可以復用不同的是,兩種身份的監聽啟動時間不一樣。owner 身份需要等待 player 身份玩家進入游戲后才開啟棋盤監聽;player 身份是更新了 people 字段后,開啟棋盤監聽。

在監聽邏輯中,需要判斷遠程更新的字段是否是 chessmen,這是通過前面提及的 dataType 來實現的。還徐喲啊判斷記錄中的 nextcolor 字段是否和本地的 color 一樣,來決定是否打開本地的鎖。

如果上述的兩個條件均滿足,則執行更新本地棋盤、判定輸贏、打開本地鎖的邏輯。

5.11 游戲結束與退出

每次需要判定輸贏的地方,如果可以判定輸贏,那么都會走到游戲退出邏輯。退出的邏輯分為 2 個部分,第 1 個是給用戶提示,第 2 個是調用云函數清空記錄。

第 1 個邏輯中用戶提示,需要判定用戶勝負狀態:

第 2 個邏輯中清除記錄的原因是為了方便調試,對于真正的業務場景,一般不會刪除歷史數據,方便問題定位。同時,這也是一個越權操作,需要調用云函數來實現。

6. 課程源碼

7. 更多

更多云開發使用技巧及 Serverless 行業動態,掃碼關注我們~


https://user-gold-cdn.xitu.io...;h=344&f=jpeg&s=8884" width="200px">

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 心譚 來自: segmentfault
不朽的浪漫援彩金
怎样网赚 山西11选5任三倍投 云南十一选五开奖今 深圳风采历史开奖结果 血流成河单机麻将下载 福建快3开奖号码 山东11选5走势图 河北排列七今晚开奖结果 电竞比分直播彩虹六号 吉林大乐透开奖结果今天 皇冠比分直播皇冠直播 天天彩选4走势图500期 中超足球联赛积分榜 微信能四人联机的麻将 广西快三三号码推荐 贵州十一选五开