共计 3142 个字符,预计需要花费 8 分钟才能阅读完成。
本文作者是声网社区的开发者“tjss”。他基于 Vue、声网的互动白板的代码模板,搭建出了一个反对多人互动的数独游戏。本文记录了他的实现过程,欢送大家也能够尝试实现本人的小游戏或利用。本文波及的声网产品均反对收费注册下载,并为每个开发者提供每月收费 10000 分钟应用额度,欢送大家尝试体验、实际。
我基于声网互动白板的 SDK 与 Window Manager 开发了一个场景化窗口插件,实现了一个多人数独游戏。在游戏中,每个玩家进入白板房间,都能看到数独游戏插件,同时能够参加其中,与房间内的小伙伴一起实现数独解题。
后期筹备
1、注册一个声网账号,并实名认证,以便在后盾创立我的项目,获取开发时会用到的 Appid 和 Token
2、理解 Vue 开发的基础知识。
3、理解声网互动白板产品,一些根本的接口和性能,看官网文档就足够了。
4、搭建开发环境:
- NodeJs 版本 16.0.0
- @Vue/cli 4.5.1
- VSCode 代码开发工具
开启和配置互动白板服务
首先咱们须要一个实名认证的声网账号 ,进入控制台(console.agora.io),在声网控制台开启互动白板服务。这里须要留神的是 互动白板是作为服务而显示的,而控制台中只是显示我的项目列表,并没有间接显示服务。
这时候咱们就先创立一个我的项目,而后点击“配置”进入到我的项目详情中,在外面的页面就能够看到服务内容了。
这时候找到互动白板服务,点击开启就行。因为我的曾经开启了,所以显示的是配置按钮。
应用官网提供的代码模板
场景化窗口插件目前咱们不须要从零开始建设的,声网提供了一个代码模板,基于此模板咱们能够很轻松就能实现一个在互动白板上应用的插件。
模板地址:https://github.com/netless-io…
当搭建好开发环境后,便能够下载模板代码了,通过 Git 或者下载 Zip 都行。
须要留神 README.md 中的开发环境配置:
1、在 .env 文件里配置白板房间 UUID 和 Token 请将本目录下的 .env.example 文件复制一份,重命名为 .env 或 .env.local 后,在外面填写必须的白板配置信息。你能够在声网互动白板官网的 Netless Workshop 申请专用的白板配置。
2、执行 npm install 装置依赖
3、执行 npm start 进行本地开发
我的项目构造
笔者是基于 Vue 版本的插件模板进行开发的,间接关上我的项目,批改 src 里的内容即可,基本上和 Vue 开发统一。如果是通过 Git 命令拉取的代码,须要切换分支为 Vue 分支。
- 我的项目构造如下:
- playground 目录是根本不必批改的,咱们实现的插件是在 src 目录中实现的。
- index.ts 文件是咱们插件的一些数据设置,比方插件名称。其余逻辑根本不必批改。
onst Sudoku: NetlessApp = {
kind: "Sudoku",
setup(context) {const box = context.getBox();
box.mountStyles(styles);
const $content = document.createElement("div");
$content.className = "app-counter";
box.mountContent($content);
const app = createApp(App).provide("context", context);
app.mount($content);
context.emitter.on("destroy", () => {app.unmount();
});
},
};
export default Sudoku;
数独游戏规则
数独网格由 9×9 个空格组成。玩家只能应用数字 1 到 9,每个 3×3 宫只能蕴含数字 1 到 9,每一列只能蕴含数字 1 到 9,每一行只能蕴含数字 1 到 9,每个 3×3 宫、每一列或每一行中的每个数字只能应用一次。当所有数独网格都填入正确的数字时,游戏完结。(摘自网上)
数据同步外围思路
1、通过互动白板 SDK 提供的 createStorage 办法,初始化一个数独棋盘,并把数据存储起来,同时须要更新本人的 chessBoard。
const chessBoard = ref();
const context = inject<AppContext>("context");
const storage = context.createStorage("chessBoard", { chessBoard: ChessBoard.init() });
chessBoard.value = deepCopy(storage.state.chessBoard)
2、在 Vue 界面的 onMounted 回调函数中增加存储值的更新监听,这样玩家在填格子的时候播送了最新的格子数据,其余玩家就能收到更新的告诉,而后从新渲染界面。
onMounted(() => {initAppData()
storage.addStateChangedListener((diff) => {chessBoard.value = deepCopy(diff.chessBoard?.newValue)
if (finish(chessBoard.value.gridItems)) {statistics(chessBoard.value.gridItems)
finishTag.value = true
}
})
});
3、填格子的时候,通过 SDK 的 setState 办法去更新数独棋盘的数据。
if (e.data && e.data > 0) {grid.number = parseInt(e.data)
grid.userId = uid.value
grid.color = rgb
} else {
grid.number = 0
grid.userId = ''
grid.color = new Rgb(233, 233, 233)
}
storage.setState({chessBoard: chessBoard.value})
数独游戏界面
笔者是优先实现这个互动游戏的外围性能,所以设计出的游戏界面比拟简陋。
数独的数据结构
export class ChessBoard {gridItems: GridItem[][]}
因为须要统计游戏完结后,各个玩家填写的个数,所以在更新格子数值的时候也记录一下是哪一位玩家填写了。default 字段示意该格子是主动生成的,不须要玩家填写了。
export class GridItem {
number: number
color: Rgb
userId: string
default: boolean
}
运行我的项目
点击工具栏最下方的按钮,能够找到咱们实现的插件 icon,而后点击即可关上。
关上插件后,会初始化创立一个数独题目,并且通过 createStorage 办法储存起来,所有进入房间的玩家都能拿到这个数据,后续数独的更新都会同步给玩家去批改。因为这个我的项目重点是学习一下插件开发与数据同步,所以游戏界面以及内容这些做的比较简单。
接下来就要关上多个网页并且输出 localhost:3000 进入咱们的互动白板房间了,因为模板的 uid 是随机生成的,也就示意有不同的玩家进入了。
别的玩家填写后,其余玩家是不能再填这个格子的,最初游戏完结的时候,会统计各个玩家所填对的数字并展现。
游戏完结
总结
通过官网提供的场景化插件模板,咱们很容易实现一些好玩的互动场景的性能。在这个简略的我的项目中,因为工夫仓促,还没来得及优化得更好,后续有工夫的时候笔者再打磨一下。比方不同玩家填写的数字以不同的色彩辨别,减少限时机制等等。感兴趣的敌人一起来开发一些好玩的实时互动性能吧~
现注册声网账号下载 SDK,可取得每月收费 10000 分钟应用额度。如在开发过程中遇到疑难,可在声网开发者社区与官网工程师交换。