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

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。

0

2、进入后，点击上方的云开发按钮。如果之前没有开通过云开发，需要开通云开发，新开通的话需要等待 10 ～ 20 分钟。

0

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

0

4、进入「云开发/存储」，点击“上传文件”。上传的内容是/static/下的bgm.mp3 和 fall.mp3。之后的代码中会通过云存储的接口，请求文件的临时 url，这样做的目的是减少用户首次进入游戏加载的静态资源。

0

4.2 准备配置文件

创建配置文件：

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

将关键字段的信息，换成自己账号的信息即可：

0

4.3 创建云开发接口

打开 miniprogram/shared/cloud.js，在里面初始化云开发能力，并且对外暴露云数据库以及聚合搜索的 API。

0

4.4 获取云存储资源的链接

为了减少用户首屏加载的静态资源，音乐资源并没有放在miniprogram目录下，而是放在了云存储中，通过调用云存储的 api 接口，来返回静态资源的临时链接。

在 miniprogram/modules/music.js中，会调用资源接口，获取资源链接：

0

getTempFileURL函数属于云开发相关，因此放在了 miniprogram/shared/cloud.js中。这里只需要临时链接tempFileURL属性，其它返回值直接过滤调即可。

为了方便外面调用，promise 内部不再用 reject 抛错。对于错误异常，返回空字符串。这样，加载失败的资源不会影响正常资源的加载和 Promise.all 中逻辑进行。

0

4.5 游戏进入与身份判断

根据前面的流程图我们可以看到，游戏玩家的身份是分为 owner 与 player。它们的含义如下：

  • owner：玩家进入游戏后，查找是否有空闲房间，如果不存在空闲房间，那么就会主动创建新的空闲房间。那么对于新创建的房间，玩家就是 owner。
  • player：玩家进入游戏后，查找是否有空闲房间，如果存在空闲房间，那么就加入空闲房间。那么对于空闲房间，玩家就是 player。

判断的依据就是 judgeIdentity 方法中，读取云数据库集合中的 rooms 的记录。如果存在多个空闲房间，需要选取创建时间最近的一个房间。因此，这里需要用到「聚合搜索」的逻辑。

聚合搜索的条件，在这里有 3 个：

  1. 标记人数的字段，是否为 1
  2. 创建时间倒叙排序
  3. 只选择 1 个

0

4.6 创建新房间

在上述的身份判断函数逻辑中，如果聚合搜索查询的结果为空，说明没有空闲房间，玩家需要作为 owner 来创建新的房间，等待其它玩家加入。

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

  • roomid<String>: 6 位房间号，唯一
  • nextcolor<"white" | "black">: 下一步是白棋/黑棋走
  • chessmen<String>: 编码后的棋盘数据
  • createTimestamp<String>: 记录创建时间戳，精确到 ms
  • people<Number>: 房间人数

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

0

4.7 监听玩家进入

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

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

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

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

0

4.8 越权更新字段

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

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

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

0

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

0

4.9 落子更新逻辑

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

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

对于以上两种情况，处理的逻辑分别是：

  1. 棋盘状态保存在内部类中，调用落子的函数，会返回是否成功的字段标识
  2. 只有监听到远程棋盘更新后，才会打开本地的锁，允许落子；落子后，会重新上锁

0

落子成功后，要在本地判断是否胜利。如果胜利，需要调用退出的逻辑。但无论是否胜利，都要将本地的最新状态更新到云端。

0

4.10 监听远程棋盘更新

不论对于 player 还是 owner 身份的玩家，都需要监听远程棋盘的更新逻辑。当远程棋盘字段更新时，本地根据最新的棋盘状态，重绘整个棋盘。并且进行输赢判定，如果可以判定输赢，则退出游戏；否则，打开本地的锁，玩家可以落子。

因为不同身份均需要监听，因此这一块的监听逻辑可以复用。不同的是，两种身份的监听启动时间不一样。owner 身份需要等待 player 身份玩家进入游戏后才开启棋盘监听；player 身份是更新了 people 字段后，开启棋盘监听。

在监听逻辑中，需要判断远程更新的字段是否是 chessmen，这是通过前面提及的 dataType 来实现的。还徐哟啊判断记录中的 nextcolor 字段是否和本地的 color 一样，来决定是否打开本地的锁。

0

如果上述的两个条件均满足，则执行更新本地棋盘、判定输赢、打开本地锁的逻辑。

0

4.11 游戏结束与退出

每次需要判定输赢的地方，如果可以判定输赢，那么都会走到游戏退出逻辑。退出的逻辑分为 2 个部分，第 1 个是给用户提示，第 2 个是调用云函数清空记录。

第 1 个逻辑中用户提示，需要判定用户胜负状态：

0

第 2 个逻辑中清除记录的原因是为了方便调试，对于真正的业务场景，一般不会删除历史数据，方便问题定位。同时，这也是一个越权操作，需要调用云函数来实现。

0

6. 课程完整源码

https://github.com/TencentCloudBase/tcb-game-gomoku

7. 联系我们

更多云开发使用技巧及 Serverless 行业动态，扫码关注我们~

1649686-20190830105611762-1711461873.png

转载于:https://www.cnblogs.com/CloudBase/p/11433792.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/423522.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

关于时间复杂度和空间复杂度的计算

关于时间复杂度和空间复杂度的计算

转:https://blog.csdn.net/mr_garfield__/article/details/78762478 时间复杂度&#xff1a; 一般情况下&#xff0c;算法中基本操作重复的次数就是问题规模n的某个函数f&#xff08;n&#xff09;&#xff0c;进而分析f&#xff08;n&#xff09;随n的变化情况并确定T&#…
阅读更多...
shiro学习(24)：Spring的transaction-manager的用法

shiro学习(24)：Spring的transaction-manager的用法

<?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:tx"http://www.springframework.org/sche…
阅读更多...
Spring Boot----SpringBoot整合 Dubbo 和 Zookeeper

Spring Boot----SpringBoot整合 Dubbo 和 Zookeeper

下载安装Zookeeper linux 使用docker部署 windows:参考&#xff08;https://blog.csdn.net/ring300/article/details/80446918&#xff09;&#xff0c;下载的zookeeper目录中需要包含lib&#xff08;内置jar包&#xff0c;否则需要自己导入&#xff09; 1、将conf目录下的zoo_…
阅读更多...
visual studio 2005 sp1 安装错误解决

visual studio 2005 sp1 安装错误解决

要解决此问题, 请按照下列步骤&#xff1a; 1. 单击 开始 单击 运行 &#xff0c; 键入 控件 secpol.msc , 然后单击 确定 。 2. 双击 本地安全策略 。 3. 单击 软件限制策略 。 注意 如果列出, 没有软件限制右键单击 软件限制策略 , 然后单击 新建策略 。 4. 在 对象类…
阅读更多...
递归树求解递归算法的时间复杂度

递归树求解递归算法的时间复杂度

递归算法时间复杂度的计算方程式一个递归方程&#xff1a; 在引入递归树之前可以考虑一个例子&#xff1a; T(n) 2T(n/2) n2 迭代2次可以得&#xff1a; T(n) n2 2(2T(n/4) (n/2) 2) 还可以继续迭代&#xff0c;将其完全展开可得&#xff1a; T(n) n2 2((n/2) 2 2((n/2…
阅读更多...
git(4)：git安装教程

git(4)：git安装教程

1首先找到我们下载好的安装包 2打开安装包 3点击next 4点击next 5点击next 6 点击next 7点击next
阅读更多...
基于Cairngorm的Silverlight开发 - part3

基于Cairngorm的Silverlight开发 - part3

使用ModelLocator来管理视图 之前只是简单的介绍了一下ModelLocator的用法&#xff0c;在这里要把模型和视图结合起来&#xff0c;通过模型来来控制视图。在Silverlight中我们可以看到所有新建立的xaml都是继承自UserControl&#xff0c;所以在这里更新欢称视图为控件。至此给出…
阅读更多...
时间复杂度空间复杂度分析

时间复杂度空间复杂度分析

转发:https://blog.csdn.net/LF_2016/article/details/52453212 时间复杂度&#xff1a; 一般情况下&#xff0c;算法中基本操作重复执行的次数是问题规模n的某个函数f(n)&#xff0c;进而分析f(n)随n的变化情况并确定T(n)的数量级。这里用"O"来表示数量级&#xff…
阅读更多...
github（5）:GitHub的注册与使用（详细图解）

github（5）:GitHub的注册与使用（详细图解）

首先,你需要注册一个 github账号,最好取一个有意义的名字&#xff0c;比如姓名全拼&#xff0c;昵称全拼&#xff0c;如果被占用&#xff0c;可以加上有意义的数字. 本文中假设用户名为 chuaaqiCSDN(我的博客名的全拼) 一、gihub账号注册与仓库创建 1. 注册账号: 地址: https…
阅读更多...
Hive分区和桶的概念

Hive分区和桶的概念

Hive 已是目前业界最为通用、廉价的构建大数据时代数据仓库的解决方案了&#xff0c;虽然也有 Impala 等后起之秀&#xff0c;但目前从功能、稳定性等方面来说&#xff0c;Hive 的地位尚不可撼动。 其实这篇博文主要是想聊聊 SMB join 的&#xff0c;Join 是整个 MR/Hive 最为…
阅读更多...
剧情介绍：“肖申克的救赎”

剧情介绍：“肖申克的救赎”

故事发生在1947年&#xff0c;银行家安迪因为妻子有婚外情&#xff0c;用枪杀死了她和她的情人&#xff0c;因此他被指控枪杀了妻子及其情人&#xff0c;安迪被判无期徙刑&#xff0c;这意味着他将在肖恩克监狱中渡过余生。　　阿瑞1927年因谋杀罪被判无期徙刑&#xff0c;数次…
阅读更多...
Spring Boot----Dubbo

Spring Boot----Dubbo

概述 治理和维护各个分系统 参考官网&#xff1a;http://dubbo.apache.org/zh-cn/docs/user/references/registry/introduction.html &#xff08;可中英文切换&#xff09; 下载安装Zookeeper linux 使用docker部署 windows: 参考&#xff08;https://blog.csdn.net/ring300/a…
阅读更多...
git学习(7)：创建ssh key时遇到“Bad escape character ‘ygen’.”

git学习(7)：创建ssh key时遇到“Bad escape character ‘ygen’.”

问题&#xff1a; 创建ssh key时遇到“Bad escape character ‘ygen’.” image.png $ ssh -keygen -t rsa -C "" Bad escape character ygen. 分析原因&#xff1a;ssh -keygen之间出现了空格&#xff0c;正确命令是没有空格的
阅读更多...
用小程序·云开发打造运动圈小程序丨实战

用小程序·云开发打造运动圈小程序丨实战

乒乓圈小程序 和朋友合伙写了一个小程序&#xff0c;写了一个以共享乒乓信息和交流的平台———乒乓圈。我们使用了微信的云开发来完成数据和后台的作用。免去了租赁服务器。 我主要负责的是数据库的设计和云函数实现数据获取和触发器的功能和简单的两个页面。 正文 功能展示 页…
阅读更多...
BeanUtil使用例子：解析并转化HttpServletRequest到Bean的全面测试

BeanUtil使用例子：解析并转化HttpServletRequest到Bean的全面测试

在Web表单提交后解析表单时&#xff0c;一般框架都提供了某种方式可以自动从表单映射到我们的POJO类里面。属性会被自动填充的。 但如果我们在某个需求里&#xff0c;真的需要用程序来解析的话&#xff0c;那么如果有几百个属性&#xff0c;可就是一个噩梦了。 我们可以用java的…
阅读更多...
【vue开发】vue导出Excel表格教程demo

【vue开发】vue导出Excel表格教程demo

前端工作量最多的就是需求&#xff0c;需求就是一直在变&#xff0c;比如当前端数据写完之后&#xff0c;需要用Excel把数据下载出来&#xff1b;再比如前端在没有数据库想写些demo玩时&#xff0c;也是很好的选择。 第一步安装依赖包,修改配置 1、装依赖&#xff1a; cnpm ins…
阅读更多...
git学习（10）:Git的使用--如何将本地项目上传到Github（两种简单、方便的方法）

git学习（10）:Git的使用--如何将本地项目上传到Github（两种简单、方便的方法）

将本地项目上传到Github&#xff08;两种简单、方便的方法&#xff09; 一、第一种方法&#xff1a; 首先你需要一个github账号&#xff0c;所有还没有的话先去注册吧&#xff01; https://github.com/ 我们使用git需要先安装git工具&#xff0c;这里给出下载地址&#xff0…
阅读更多...
.NET中栈和堆的比较1

.NET中栈和堆的比较1

原文出处&#xff1a; http://www.c-sharpcorner.com/UploadFile/rmcochran/csharp_memory01122006130034PM/csharp_memory.aspx 尽管在.NET framework下我们并不需要担心内存管理和垃圾回收(Garbage Collection)&#xff0c;但是我们还是应该了解它们&#xff0c;以优化我们的…
阅读更多...
前端学习（1）：HTML和CSS导学

前端学习（1）：HTML和CSS导学

最近为什么捡起前端&#xff0c;主要工作太忙&#xff0c;有时间就会抓一下后端&#xff0c;前端是我以前啃得比较多的 再来一次呢&#xff0c;工作在忙也不能停止学习勒 第一部分 第二部分 第三部分 第四部分 如何学习
阅读更多...
Spring Boot----Dubbo原理分析

Spring Boot----Dubbo原理分析

环境&#xff1a;需要创建一个dubbo.xml 通过ImportResource()导入xml&#xff1a; 1、首先spring启动解析配置文件的每一个标签的总接口是 org.springframework.beans.factory.xml.BeanDefinitionParser 2、DubboBeanDefinitionParser是它的一个实现类&#xff0c;通过调用par…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023