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

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.mp3fall.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 行业动态,扫码关注我们~

原文地址:https://www.cnblogs.com/CloudBase/p/11433792.html

时间: 2024-08-01 00:32:11

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

关于云开发新服务“实时数据推送”,你需要了解的全在这了!

"微信小程序工程师邓坤力带你了解如何利用千呼万唤始出来的云开发实时数据推送服务打造生动的小程序和小游戏!" 在数据库在小程序·云开发中的应用一文中,我们了解到实时数据推送作为云开发即将上线的一项新能力,主要指客户端使用官方SDK发起socket连接建立对一个集合的监听,目标集合中如果有符合过滤条件的数据发生变更,将会直接推送到建立监听的客户端. 简单来说,使用实时数据推送可以更有效率的拉取数据,帮你把你的应用变成实时有状态,场景会非常有用,比如可以用来做弹幕,做实时排名更新,做实时刷新

C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何去推送复杂的数据,以及推送一个实时的图表数据,文本为我原创,转载请注明出处:Richard.Hu,先上一堆乱七八糟的说明先: SignalR的官方地址是: https://www.asp.net/signalr 网上给出例子是一个聊天的例子,官网地址是:https://docs.microsoft.

C# 数据推送 实时数据推送 轻量级消息订阅发布 多级消息推送 分布式推送

前言 本文将使用一个NuGet公开的组件技术来实现数据订阅推送功能,由服务器进行推送数据,客户端订阅指定的数据后,即可以接收服务器推送过来的数据,包含了自动重连功能,使用非常方便 nuget地址:https://www.nuget.org/packages/HslCommunication/            github地址:https://github.com/dathlin/HslCommunication                                 如果喜欢可以s

swoole+Redis实现实时数据推送

<?php /** * *************************************** * 单进程保护 * * *************************************** */ $phpSelf = realpath($_SERVER['PHP_SELF']); $lockFile = $phpSelf.'.lock'; $lockFileHandle = fopen($lockFile, "w"); if ($lockFileHandle =

基于socket.io的实时消息推送

用户访问Web站点的过程是基于HTTP协议的,而HTTP协议的工作模式是:请求-响应,客户端发出访问请求,服务器端以资源数据响应请求. 也就是说,服务器端始终是被动的,即使服务器端的资源数据发生变化,如果没有来自客户端的请求,用户就不会看到这些变化. 这种模式是不适合某些应用场景的,比如在社交网络用户需要近乎实时地知道其他用户最新的信息.对于普通站点来说, 请求-响应模式可以满足绝大多数的功能需求,但总有某些功能我们希望能够为用户提供实时消息的体验. 为解决这个问题,有两种方案可以选择: 仍旧使

javascript之数据推送

我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. 怎么做到呢? 最笨的方法: 前端需要隔一段时间向服务器发送一次ajax,请求成本太昂贵呀,就好比,你每次约炮,都得开房,还是租一个便宜点儿房子合算. 所以不能这么做. 1.comet 原理:comet是基于HTTP长连接的服务器推送技术,是一种web应用架构,服务器会主动以异步的方式向客户端程序推

Zzzj Submit:WordPress 百度熊掌号/原创保护文章数据推送插件 V3.4

Zzzj Submit:WordPress 百度熊掌号/原创保护文章数据推送插件 V3.4 Zzzj Submit是一款根据百度站长平台原创保护提交接口而升级开发的WordPress插件,目前插件已经开始适配百度熊掌号(原百度官方号)的数据提交内测,可实现用户自动自主的将文章推送至官方号及原创保护文章推送,支持定时文章推送. 即日起"Zzzj Submit"插件将从WordPress百度原创保护提交插件升级为WordPress百度熊掌号数据提交插件,由于百度熊掌号目前属于内测期间,故该

开源实时消息推送系统 MPush

系统介绍 mpush,是一款开源的实时消息推送系统,采用java语言开发,服务端采用模块化设计,具有协议简洁,传输安全,接口流畅,实时高效,扩展性强,可配置化,部署方便,监控完善等特点.同时也是少有的可商用的开源push推送系统. 特性和优势 源码全部开放,包括server.android.ios .websocket等 代码质量高,全部模块化设计,真正的商用级产品,考虑到推送中遇到的大部分场景 安全性高,基于RSA精简的加密握手协议,简单,高效,安全 支持断线重连,及弱网下的快速重连,无网络下

使用Node.js实现数据推送

业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接