藉助實時資料推送快速製作線上對戰五子棋小遊戲丨實戰
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
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 行業動態,掃碼關注我們~
相關推薦
藉助實時資料推送快速製作線上對戰五子棋小遊戲丨實戰
1 專案概述 遊戲開發,尤其是微信小遊戲開發,是最近幾年比較熱門的話題。 本次「雲開發」公開課,將通過實戰「線上對戰五子棋」,一步步帶領大家,在不借助後端的情況下,利用「小程式 ✖ 雲開發」,獨立完成一款微信小遊戲的開發與上線。 2 任務目標 根據專案初始框架,閱讀教程的同時,逐步完成棋盤繪製、音樂播放、玩家
用雲開發快速製作客戶業務需求收集小程式丨實戰
一、導語 如何省去企業上門(現場)蒐集客戶需求的環節,節約企業人力和時間成本,將客戶的業務定製需求直接上傳至雲資料庫?雲開發為我們提供了這個便利! 二、需求背景 作為一名XX公司IT萌萌新,這段時間對小程式開發一直有非常濃厚的興趣,並且感慨於“雲開發·不止於快”的境界。近期工作中,剛好碰見業務部門的一
基於GoEasy實現Java web實時資料推送
以前都是使用ajax定時傳送請求到後臺,這種方式非常消耗系統資源。在大併發情況時如果不對執行緒進行控制的話,還會重複取資料,造成資料錯誤。 鑑於這種情況,使用websocket通訊就是一個非常好的選擇。websocket能避免浪費系統資源,但是它有一個缺點就是不相容
[Python] [爬蟲] 8.批量政府網站的招投標、中標資訊爬取和推送的自動化爬蟲——資料推送模組
目錄 1.Intro 2.Source (1)dataPusher (2)dataPusher_HTML 1.Intro 檔名:dataPusher.py、dataPusher_HTML.py 模組名:資料推送模組 引用庫: smtpl
socket.io資料推送
socketio簡介 Socket.io是一個WebSocket庫,包括了客戶端的js和伺服器端的nodejs,它的目標是構建可以在不同瀏覽器和移動裝置上使用的實時應用。它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選
宿管系統資料推送
1.宿管系統操作的 查詢cstaccfc SELECT NVL(max(zzxh),0) from ssgl_sd_czjl 2.一卡通操作 INSERT into [email protected] ( SELECT b.out
js 接收後臺資料推送
* 本文章僅包含資料推送,前端部分內容 * Comet 基於HTTP長連線的伺服器推送技術 就是前端向後臺傳送一個請求,後臺進行一個死迴圈,一直向前端傳送資訊. 使用jQuery
android 極光推送快速自動整合及,自定義通知樣式及雙指下拉通知欄顯示全部內容
一,整合步驟: 1.極光推送官網,註冊,登入,建立應用,用專案包名獲取AppKey: 注:包名必須與專案的包名一致 2.在 module 的 gradle 中新增依賴和支援: android { ...... defaultConfig {
nodejs+socket.io實現資料推送功能
1.安裝express 在資料夾mypro路徑下的cmd視窗執行“npm install express –save” 2.新增檔案app.js到mypro資料夾 /app.js var app = require('express')(); var
友盟訊息推送快速開發
mPushAgent = PushAgent.getInstance(mAppContext); mPushAgent.enable(); b:獲取deviceToken:由於註冊請求友盟後臺,是非同步的,所有獲取
未讀訊息(小紅點),前端與 RabbitMQ實時訊息推送實踐,賊簡單~
前幾天粉絲群裡有個小夥伴問過:`web` 頁面的未讀訊息(小紅點)怎麼實現比較簡單,剛好本週手頭有類似的開發任務,索性就整理出來供小夥伴們參考,沒準哪天就能用得上呢。 之前在 [《springboot + rabbitmq 做智慧家居》](https://mp.weixin.qq.com/s?__biz=M
vue +signalR+log4net 實時日誌推送
系列 SignalR+Vue SignalR+Vue 服務端向客戶端傳送資訊 SignalR+Vue+Log4net 實時日誌推送 待定...... 原始碼地址:https://github.com/QQ2287991080/SignalRServerAndVueClientDemo
實時訊息推送整理
分不清輪詢、長輪詢?不知道什麼時候該用websocket還是SSE,看這篇就夠了。 所謂的“實時推送”,從表面意思上來看是,客戶端訂閱的內容在發生改變時,伺服器能夠實時地通知客戶端,進而客戶端進行相應地反應。客戶端不需要主觀地傳送請求去獲取自己關心的內容,而是由伺服器端進行“推送”。 注意上面的推送二字打
推薦一款快速製作通訊錄的微信小外掛
今天,我們提交了第一版,剛剛通過微信稽核的小程式外掛 ——「爸媽搜通訊錄」。 只要有通訊錄的地方,就會需要對通訊錄姓名進行分組排序和介面設計,主流做法基本是按照人名的拼音首字母排序,效果圖如下: 現在讓我開始說一說怎麼使用我們剛新鮮出爐的小程式外掛。 一句話介紹 簡便、快速的生成通訊
小程式訊息推送(含原始碼)java實現小程式推送,springboot實現微信訊息推送
最近需要開發微信和小程式的推送功能,需要用java後臺實現推送,自己本身java和小程式都做,所以就自己動手實現下小程式的模版推送功能推送。 實現思路 1 小程式獲取使用者openid,收集formid傳給java後臺 2 java推送訊息給指定小程式使用
利用微信小程式(小遊戲)API製作適配cocos creator小遊戲排行榜的例項程式
cocos creator 可以通過新建一個creator專案進行新增子域專案,但是有一個缺點就是佔用檔案大小是一個問題,所以我這裡採用微信的API進行繪製排行榜, 主域就是各種傳送給子域的訊息,這裡不再這裡贅述,就是各種呼叫微信的API 這裡給出微信的API 微信開放資料域 新建m
製作的第一個java小遊戲
package java1; import java.awt.*; public class java1 extends Frame { //球桌和桌球圖片 Image ball = Toolkit.getDefaultToolkit().getImage("images/bal
u3d製作多米諾骨牌小遊戲心得1
1、edit - project settings - time - Time Scale 調整game視窗內的全域性播放速度。 2、AddRelativeForce 將Rigibody的力
長連線資料實時推送方案(iOS)
原文連結:www.jianshu.com/p/7e97af441… 由於業務需求,需要實現實時獲取服務端更新的資料功能,基於這個需求,進行調研及技術方案的實施,最終決定採用MQTT +ProtocolBuffer基於長連線的資料實時推送的方案;具體實現方案見本文; 本文包括三個部分:1.技術選型
WebSocket實現實時推送資料到前端
@Component @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer{ @Resource goodsWebSocketHandler handler;