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

“

棋盘之上，黑白之间，自有天地~ 本文教你用云开发快速制作在线对战五子棋小游戏！（用到了云开发最新功能实时数据推送哦~）

”

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 实战任务

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来创建新的房间，等待其它玩家加入。

创建房间的逻辑就是将约定好的字段，放进云数据库的记录中。这些字段有：

roomidString>: 6位房间号，唯一
nextcolor"white"|"black">: 下一步是白棋/黑棋走
chessmenString>: 编码后的棋盘数据
createTimestampString>: 记录创建时间戳，精确到ms
peopleNumber>: 房间人数

是的，你可能注意到了，这里需要包管 roomid 是不重复的。因此当地生成的随机roomid，需要先调用云数据库的查询接口，检测是否存在。如果存在，那么递归调用，重新生成随机字符串。

4.7 监听玩家进入

对于owner身份来说，除了要创建新房间，还需要在创建后监听player身份的玩家进入游戏。

对于player身份的玩家进入游戏后，会更新记录中的people字段（1 => 2）。这时候就需要利用「实时数据推送」的功能，监听远程记录的people字段变化。

代码实现上，调用 watch方法，并且传递 onChange函数参数。一旦有任何风吹草动，都可以在 onChange回调函数中获得。对于传递给回调函数的参数，有两个比较重要：

docChangesArray>: 数组中的每一项对应每条记录的变化类型，变化类型有init、update、delete等。
docsArray>: 数组中的每一项对应每条记录的当前数据。

4.8 越权更新字段

对于player身份来说，进入房间后，既不需要「创建新房间」，也不需要「监听玩家进入」。但需要更新记录的people字段。由于记录是由owner身份的玩家创建的，而云数据库只有以下4种权限：

所有用户可读，仅创建者可读写
仅创建者可读写
所有用户可读
所有用户不可读写

以上4种权限，并没有「所有用户可读写」。因此，对于越权读写的情况，需要通过调用云函数来以“管理员”的权限实现。在 cloudfunction 中创建 updateDoc 云函数，接收前端传来的collection、docid、data字段。对于data字段来说，就是数据记录的最新更新数据。

在小游戏中，通过 wx.cloud.callFunction来调用云函数。传入的data字段指明被调用的云函数，传入的data字段可以在云函数的回调函数的event参数中访问到（如上图所示）。

4.9 落子更新逻辑

不论对于player还是owner身份，都需要处理落子的逻辑。落子逻辑中，下面的两种情况是属于无效落子：

点击位置已经有棋子
对方还未落子，目前依然处于等待情况

wan玩得好手游】查看最新变态版手游攻略，只需要在百度输入【wan玩得好手游】就可以浏览最新上线送满vip的变态手游攻略了，更多有关BT手游的攻略和资讯，敬请关注玩得好手游!

更多...