一个简单的五子棋小游戏,如何通过云开发的巧妙接入,变成可以赛局直播的在线五子棋小游戏,快来体验尝试吧
使用云开发的数据库、实时数据库监听,登录验证使用匿名登录。
进入腾讯云云开发控制台-创建环境,选择按量计费环境,环境名称可以自定义设置。如果已有按量计费环境则可以跳到下一步。
进入进入静态网站控制页,选择刚才创建好的环境,开通静态网站托管服务。
进入数据库控制页,添加 1 个集合;集合名字为 gobang
进入环境设置页-登录授权的登录方式中,勾选匿名登录
访问github 仓库,下载源码到本地。源码项目目录如下:
将项目 webviews/index.html 以 http 的形式运行,可使用 IDE 工具 vscode,hbuilder。在浏览器的地址栏中确定 url 地址,比如例子中,域名地址为 127.0.0.1:5500
如果想在本地开发,必须要在云开发中配置本地的安全域名才能够正常调试开发。
进入环境设置页-安全配置,配置 WEB 安全域名,在这里以 127.0.0.1:5500 举例,请按照自己的实际域名配置
云开发是通过环境 ID 来判定与特定环境进行数据通信的,所以在项目中要配置所有的相关环境 ID 为自己的 ID。(建议熟练后,使用配置文件形式来配置)
进入环境总览页,复制获取云开发环境 ID。
打开项目目录,将以下文件中标注有【云开发环境 ID】处替换成自己的云开发环境 ID
cloudfunctions/gobangselete/index.js 第 3 行
cloudbaserc.js 第 2 行
webviews/js 下的 cloud-index.js、cloud-show.js 文件,第 5 行
webviews/js 下的 index.js 和 show.js 都是本地五子棋的一些逻辑。其中 index.js 里描述的都是本地五子棋有关的操作,包括棋盘的绘制,AI 的落子,监听落子等。
而 cloud-index.js 是外挂的云开发的相关支持。
关于 cloud-index.js 内的代码逻辑,请参照云开发文档学习和理解。
在 index.html 中的函数 start(),修改为如下代码:
此代码会调用 cloud-index.js 中的 cloudinit 函数,执行匿名登录,并在数据库中写入一个文档,在之后的每一次落子都会更新数据库的值。
更新触发的是 cloud-index.js 中的 updatecall 函数。
show.html 文件的作用是监听五子棋棋盘并同步更新,在 script 标签中新增如下代码:
此代码使用了云开发的数据库监听函数,当数据文档有变化时,会触发 onchange,并调用 downcode 函数,执行同步绘制落子。
点击开始落子,将会提示是否开启分享,确认后选择先下子还是后下子
如果点击开启分享,则在棋盘下方会有观看链接
点击链接即可跳转到 show 页面
如果本地验证都没有问题,则配置没有问题。如果出现任何一个步骤的错误提示,则 F12 控制台查看并排除原因,一般是环境 ID 写错错误导致。
现在还有一个遗留的问题,那就是在数据库里,在棋局结束后没有自主销毁,会导致数据库里越来越多的无效记录。需要把这个记录定时清理一下。
在 cloudfunctions/gobangdelete 下右键在终端打开
在终端中输入以下命令,安装依赖:
在 cloudfunctions/gobangdelete 目录,右键执行部署云函数(上传全部文件)。在一开始使用时会出现登录,按照提示完成登录步骤即可。【如果没有此选项,请前往云开发 VSCODE 插件安装并学习使用】
将本地验证成功的项目上传至静态存储中。在 webviews 目录右键点击,上传至静态网站根目录
进入云开发静态网站管理页,可以看到已上传的项目。
进入云开发静态网站设置页,访问默认域名网址即可进入线上项目
云开发提供了完备的 web 端资源服务,但是一个对外公开使用的 web 项目需要有自己的备案域名,需要受到监管。所以,在正式对外推出之前,需要将云开发提供的默认域名替换成自己已经备案的域名
附件
本文出自 云开发团队