用云开发实现在线五子棋h5（含源码）

时间:2022-07-22
本文章向大家介绍用云开发实现在线五子棋h5（含源码），主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

云开发是什么？

用一句话来讲，云开发是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等 Serverless 化能力，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用、Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。

你完全可以用自己熟悉的语言，去完成一个完整的上线应用。废话不多说，跟着本文借助一个简单的五子棋小游戏，来看看如何通过通过云开发的巧妙接入，变成可以赛局直播的在线五子棋小游戏，快来体验尝试，又能 get 到一项新技能了呢吧～

创建云开发环境

3min

对了，针对新用户，云开发提供一个月的免费使用环境，也提供了默认域名，大家可以放心使用继续往下学习。

一、新建【按量计费云开发环境】

进入腾讯云云开发控制台-创建环境，选择按量计费环境，环境名称可以自定义设置。如果已有按量计费环境则可以跳到下一步。

1.png

二、开通静态网站托管服务

进入进入静态网站控制页,选择刚才创建好的环境，开通静态网站托管服务。

2.png

三、创建数据库

进入数据库控制页，添加1个集合；集合名字为gobang

3.png

四、开启匿名登录

进入环境设置页-登录授权的登录方式中，勾选匿名登录

4.png

下载并部署源码

6min

一、下载源码

访问github仓库,下载源码到本地。源码项目目录如下：

5.png

二、本地运行

将项目 webviews/index.html 以 http 的形式运行，可使用 IDE 工具 vscode，hbuilder。在浏览器的地址栏中确定 url 地址，比如例子中，域名地址为127.0.0.1:5500

7.png

三、配置本地开发的安全域名

如果想在本地开发，必须要在云开发中配置本地的安全域名才能够正常调试开发。

进入环境设置页-安全配置,配置WEB安全域名，在这里以127.0.0.1:5500举例，请按照自己的实际域名配置

8.png

四、填写云开发环境ID到项目中

云开发是通过环境ID来判定与特定环境进行数据通信的，所以在项目中要配置所有的相关环境ID为自己的ID。（建议熟练后，使用配置文件形式来配置）

  • 进入环境总览页,复制获取云开发环境ID。
    9.png
  • 打开项目目录，将以下文件中标注有【云开发环境ID】处替换成自己的云开发环境ID
    • cloudfunctions/gobangselete/index.js 第3行
      10.png
- cloudbaserc.js 第2行
    ![11.png](https://main.qcloudimg.com/raw/9f959cc47f55d2e35b0e7474fdc79df2.png)
- webviews/js 下的 cloud-index.js、cloud-show.js 文件，第5行
    ![12.png](https://main.qcloudimg.com/raw/7372813f2f29966ca9a126a60d73e521.png)

本地项目开发

10min

一、说明

webviews/js 下的 index.js 和 show.js 都是本地五子棋的一些逻辑。其中 index.js 里描述的都是本地五子棋有关的操作，包括棋盘的绘制，AI 的落子，监听落子等。

而 cloud-index.js 是外挂的云开发的相关支持。

关于 cloud-index.js 内的代码逻辑，请参照云开发文档学习和理解。

二、将五子棋的每个落子同步到数据库中

在 index.html 中的函数 start()，修改为如下代码：

function start() {
    if (showid == null&&confirm('是否开启观看模式？其他人可以通过指定链接看到你的赛局！')) {
        cloudinit();
    } else {
        startgobang();
    }
}

此代码会调用 cloud-index.js 中的 cloudinit 函数，执行匿名登录，并在数据库中写入一个文档，在之后的每一次落子都会更新数据库的值。

更新触发的是 cloud-index.js 中的 updatecall 函数。

三、使用实时数据库监听文档变化

show.html 文件的作用是监听五子棋棋盘并同步更新，在 script 标签中新增如下代码：

//我们使用 cloudinit 先做初始化，在成功之后立刻使用数据库监听
cloudinit(function(){
    var id = getQueryString().id;//使用show.js中取地址栏的参数id
    const watcher = app.database().collection('gobang').doc(id).watch({
        onChange: function(snapshot){
            downcode(snapshot);
        },
        onError: function(err) {
            console.error('the watch closed because of error', err);
        }
    })
});

此代码使用了云开发的数据库监听函数，当数据文档有变化时，会触发 onchange，并调用 downcode 函数，执行同步绘制落子。

本地测试项目可用性

5min

一、重新启动项目，进入页面

点击开始落子，将会提示是否开启分享，确认后选择先下子还是后下子

23.png
24.png

二、观看棋局

如果点击开启分享，则在棋盘下方会有观看链接

25.png

点击链接即可跳转到show页面

26.png

三、总结

如果本地验证都没有问题，则配置没有问题。如果出现任何一个步骤的错误提示，则 F12 控制台查看并排除原因，一般是环境ID写错错误导致。

配置定时删除云函数

3min

一、说明

现在还有一个遗留的问题，那就是在数据库里，在棋局结束后没有自主销毁，会导致数据库里越来越多的无效记录。需要把这个记录定时清理一下。

二、安装依赖

在 cloudfunctions/gobangdelete 下右键在终端打开

18.png

在终端中输入以下命令，安装依赖：

    npm i tcb-admin-node

三、部署云函数

在 cloudfunctions/gobangdelete 目录，右键执行部署云函数（上传全部文件）。在一开始使用时会出现登录，按照提示完成登录步骤即可。【如果没有此选项，请前往云开发VSCODE插件安装并学习使用】

20.png

上传至静态存储

2min

将本地验证成功的项目上传至静态存储中。在 webviews 目录右键点击，上传至静态网站根目录

31.png

进入云开发静态网站管理页,可以看到已上传的项目。

32.png

进入云开发静态网站设置页,访问默认域名网址即可进入线上项目

33.png
34.png

关于自定义域名和网站对外开放

1min

云开发提供了完备的 web 端资源服务，但是一个对外公开使用的 web 项目需要有自己的备案域名，需要受到监管。所以，在正式对外推出之前，需要将云开发提供的默认域名替换成自己已经备案的域名。

  • 前往云开发静态网站设置页，在【域名信息】下点击添加域名按钮，填写已经备案的域名。域名需要配有 SSL 证书，腾讯云下域名会自动监测证书；如果是非腾讯云旗下域名，则需要上传 SSL 证书。
  • 需要等待域名添加状态为【已启动】后，才可以去域名解析中配置CNAME。
  • 前往环境设置页-安全配置，在 WEB 安全域名中删除云开发的默认域名，只保留自定义域名。
  • cloudfunctions/functions/getFile/index.js的AllowOriginList数组中，将默认域名更换成自定义域名，保存更新。

随机文章
本站知识点必读
最近更新