借助实时数据推送快速制做在线对战五子棋小游戏丨实战

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 建立云开发与小游戏环境

一、打开微信 IDE，点击左侧的小游戏，选择右侧的导入项目，导入以前下载的「在线对战五子棋」的目录，AppID 修改成你已经注册好的小游戏 AppID。

二、进入后，点击上方的云开发按钮。若是以前没有开经过云开发，须要开通云开发，新开通的话须要等待 10 ～ 20 分钟。

三、进入「云开发/数据库」，建立新的集合，新集合的名称是rooms。

四、进入「云开发/存储」，点击“上传文件”。上传的内容是/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 行业动态，扫码关注咱们~