一个简单的 2048 小游戏,如何通过云开发的巧妙接入,变成可以可以记录自己历史最高战绩和全网战绩的网络小游戏,快来体验尝试吧
使用云开发的数据库、云函数,登录验证使用匿名登录。
进入腾讯云云开发控制台-创建环境,选择按量计费环境,环境名称可以自定义设置。如果已有按量计费环境则可以跳到下一步。
进入进入静态网站控制页,选择刚才创建好的环境,开通静态网站托管服务。
进入数据库控制页,添加 1 个集合;集合名字为 2048
进入环境设置页-登录授权的登录方式中,勾选匿名登录
访问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/app/index.js 第 4 行
cloudbaserc.js 第 2 行
webviews/asset 下的 cloud.js 文件,第 2 行
webviews/asset 下的 index.js 是本地 2048 有关的操作,包括 2\4 随机生成,合并相同数字,上下左右监听,移动端滑动监听等。
而 cloud.js 是外挂的云开发的相关支持。
关于 cloud.js 内的代码逻辑,请参照云开发文档学习和理解。
在 index.html 的 script 标签中新增如下代码:
cloudinit();
此代码调用 cloud.js 的 cloudinit 函数,进行匿名登录,然后发起云函数的请求,获取全网最高分数和历史最高分数。
关于 app 云函数的源码如下(不需要编写,已有):
const tcb = require("@cloudbase/node-sdk");
const cloud = tcb.init({
env: "lgy-199ef6",
});
const db = cloud.database();
const _ = db.command;
exports.main = async (event, context) => {
let res = {};
//获取用户数据
const auth = cloud.auth().getUserInfo();
//获取用户的uid
const uid = auth.uid;
if (uid != null) {
//如果uid不为空,则尝试在2048数据库中获取文档
const result = (
await db
.collection("2048")
.where({
_id: uid,
})
.get()
).data;
if (result.length == 0) {
//如果没有文档,则新增,以uid为文档的_id,默认分数为0
await db.collection("2048").add({
_id: uid,
score: 0,
});
}
if (event.score != null && result[0].score < event.score) {
//如果传入了分数,并且分数比数据库中的高,则更新分数
await db.collection("2048").doc(uid).update({
score: event.score,
});
res.myscore = event.score;
} else {
//如果没有分数,或者分数没数据库高,则返回数据库的分数或者不存在的0
res.myscore = result.length != 0 ? result[0].score : 0;
}
//获取整个数据库最高的分数
const array = (
await db.collection("2048").orderBy("score", "desc").limit(1).get()
).data;
//整理返回数据
res.netscore = array[0].score;
res.code = 0;
} else {
//如果uid为空,则为非法的,返回404
res.code = 404;
}
return res;
};
在 cloudfunctions/gobangdelete 下右键在终端打开
npm i @cloudbase/node-sdk
在 cloudfunctions/app 目录,右键执行部署云函数(上传全部文件)。在一开始使用时会出现登录,按照提示完成登录步骤即可。【如果没有此选项,请前往云开发 VSCODE 插件安装并学习使用】
使用键盘上下左右键进行相同数字合并,最终到无法移动任何数字结束
结束后,会在底部更新历史最高分和全网最高分。
如果本地验证都没有问题,则配置没有问题。如果出现任何一个步骤的错误提示,则 F12 控制台查看并排除原因,一般是环境 ID 写错错误导致。
将本地验证成功的项目上传至静态存储中。在 webviews 目录右键点击,上传至静态网站根目录
进入云开发静态网站管理页,可以看到已上传的项目。
进入云开发静态网站设置页,访问默认域名网址即可进入线上项目
云开发提供了完备的 web 端资源服务,但是一个对外公开使用的 web 项目需要有自己的备案域名,需要受到监管。所以,在正式对外推出之前,需要将云开发提供的默认域名替换成自己已经备案的域名
附件
本文出自 云开发团队