社区精选 | Vue3 也能做游戏：飞翔的思否猫（挖坑警告
共 6030字，需浏览 13分钟
· 2022-11-03
今天小编为大家带来的是社区作者 Meathill 的文章，让我们一起来看看通过Vue3 如何让思否猫飞起来~
大家知道，作为一个开发者社区，10 月 24 日不搞点事情有点说不过去。于是思否运营同学找到我，邀请我出一篇文章，以思否猫为主题进行开发。我当即就答应了，写代码写文章嘛，小事一桩。
我不想走寻常路，看了思否猫的造型后，当即决定用 Web 技术做一个横版飞行游戏。而且要用 OpenCV + 面部识别来控制，还要用语音控制发炮。可以说，当时想的很好。然而，理想很丰满，现实很骨感，现在看着只写了一半的代码，悔不当初啊……
0. 技术预研
先说结论：
Web 语音识别暂时难堪大用
OpenCV 在现代化浏览器的性能足够
具体来说，我不太确定 Web 语音识别（STT）的实现机制，比如：是本地集成模型，还是要发给服务器，识别了再返回给客户端？实测的效果不太理想，响应速度太慢，也许做一般的应用尚可，搞游戏就完全不可行，从发声到得到结果至少需要 10s。不过兼容性还可以，Android、iOS、桌面都能用。
OpenCV 我找到了 这个项目(https://github.com/huningxin/opencv.js)，虽然没有文档，但是有 demo 页(https://huningxin.github.io/opencv.js/samples/face-detection/index.html)，效果不错，响应速度很快，基本上可以满足操控所需。
所以我决定：
如果时间足够，那么我就用 Web Audio 中的音量 API 制作发炮功能。即只要声音够大就开炮，而不是最初设想的要念特定单词（我甚至 YY 念不同的单词发不同的炮）。 OpenCV 一定要用，不然不够酷。
可以说，我这会儿都还太过自信。
1. 其它技术选型
做游戏，有些同学可能会想到 Cocos、Unity 等技术，至少也要在 <canvas> 里画图。不过，对于一款简单的横版飞行游戏，我觉得 DOM 就足够了。没有很复杂的图层关系、没有很多元件需要做判定，固定思否猫在屏幕中线上下飞，撞到墙就失败，我甚至可以利用 InsersectionObserver 帮忙做碰撞检测。
于是我决定：
还是基于 Vue3 + Vite 来做，至少非游戏的交互部分（开始游戏、显示成绩、显示奖励等）就很简单
游戏内容用 DOM 来实现，基本 position: relative + absolute 就足够
碰撞检测用 IntersectionObserver 来实现
2. 创建 Vite 项目
谋定就可以开始动了。比较意外的是，我厂最近突然特别忙，加上国庆节亲戚来广州玩时攒了不少事情（“国庆后国庆后……”），所以空余时间很少，一直拖到本周一才开始动手。
（嗯，先铺垫着，我们来看代码。）
创建 Vite 项目很简单，我们参考官方文档即可：
pnpm create vite sf-cat-flying --template vue
接着，安装我的常用依赖，因为游戏比较简单，就不需要 vue-router 那些了：
pnpm i tailwindcss postcss autoprefixer daisyui -D
# 配置 tailwindcss
pnpx tailwindcess init -p
修改 tailwind.config.js，加入需要的配置：
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,vue,tsx}",
],
theme: {
extend: {},
},
plugins: [require('daisyui')],
}
修改 index.css，删掉 vue 模版里的样式，引入 tailwind：
@tailwind base;
@tailwind components;
@tailwind utilities;
好，基础脚手架就绪，接着可以开始写代码了。
3. 布局游戏舞台
直接上代码吧：
<div id="stage">
<div class="stage-bg"></div>
<video />
<img class="sf-cat" src="sf-cat.png" />
</div>
// 起初目标是移动端，所以启动时默认全宽全高
html, body, #app, #stage, .stage-bg
height 100%
#stage
width 100vw
overflow: hidden
.stage-bg
background url(bg.png) repeat-x
background auto 100%
width 1000vw
position relative
transition 30s linear
&.play
transform translateX(-900vw)
#sf-cat
transition .5s ease-in-out
position fixed
left 50%
top 50%
width 4rem
margin -2rem 0 0 -2rem
首先我布置了一个 <div id="stage"> 作为舞台，它的高宽就是我们能看到的游戏区域。超出它的部分都要隐藏。
接下来，我拿一个 <div class="stage-bg"> 作为背景，它的宽度是 1000vw，10倍于 stage，也就是总共可以滚动 9 屏。30s 意味着滚动 30s，linear 表示线性滚动，速度不变。
这里的 <video> 用来显示摄像头捕获的视频流，方便用户操作思否猫，后面再细说。
思否猫就是个普通的 <img>，我使用 position: fixed 和定位属性让它固定在屏幕正中。为了实现加速度效果，我让它的动画效果是 ease-in-out，即启动和停止都有加速度。
4. 刷新柱子和碰撞检测
柱子的添加很简单，setInterval 之后插入一些节点，把柱子的背景图填入即可。难点在于碰撞检测。
传统方式我们一般要计算两个物件之间的距离，然后利用一些近似计算来模拟碰撞检测。但是在现代化浏览器里，我们有 IntersectionObserver，它可以用来检测 DOM 节点的显示状态，返回的信息里甚至包括被遮挡的比例，目测十分适合用来作碰撞检测。
这游戏里会出现变化的情况只有两种：
被思否猫碰到
随着滚屏消失在屏幕左侧
已知我们会把思否猫固定在屏幕正中，所以根据当前滚屏的位置，可以很容易判定柱子是否是被撞到。于是就得到以下代码：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
const { target, isIntersecting, intersectionRatio } = entry;
if (intersectionRatio < 0.9) {
// 目标元素被遮挡超过 10% 就报告
const event = new CustomEvent('hit', {
bubbles: true, // 允许事件冒泡，就可以在父元素统一捕获事件，节省绑定的代码
detail: {
ratio: intersectionRatio,
},
});
target.dispatchEvent(event);
}
});
},
{
threshold: 0.05,
}
);
function addPipe() {
const pipe = document.createElement("div");
pipe.className = ["pipe", 'pipe-' + position].join(' ');
pipe.style.left = 150 + 30 * pipeCount + 'vw';
stageBackground.value.appendChild(pipe);
// 侦测显示状态
observer.observe(pipe);
}
最后配合事件侦听器即可：
<div class="stage-bg" @hit="onHit">
5. 添加 OpenCV 控制思否猫
OpenCV 部分的代码是直接从别人的项目里抄来的，也就不详细解释了。简单说下流程吧：
使用 navigator.mediaDevices.getUserMedia({video: resolution, audio: false}) 申请使用用户的摄像头。用户许可之后，可以捕获到视频流 stream
把视频流赋给 <video>，播放，让用户能够看到自己
创建一个 <canvas>，用来从 <video> 捕获画面
将画面信息交给 opencv 进行识别，如果找到面孔，则传回面孔中间的位置，作为思否猫的目标高度
详细代码可以阅读：https://github.com/meathill/sf-cat-flying/blob/main/src/service/camera.js
6. 提前总结
装不下去了，开始摆烂 😭😭。以上，就是我目前完成的部分代码。咳咳，非常惭愧，我没能把整个游戏做到能玩。
首先这个游戏的开发工作量比我想象的要大；其次我这周比想象中要忙。最后游戏并没有完成，我只是把主要门槛都迈过去了。
我把代码放在 GitHub 上，感兴趣的同学可以看看：飞翔的思否猫 GitHub 仓库（https://github.com/meathill/sf-cat-flying），欢迎大家贡献代码。我也会抽时间（下周以后吧），继续把它完成，所以一样欢迎关注。
打包后的代码放在我的服务器上（https://evereditor.com/sf-cat-flying/dist/index.html），目前可以在桌面浏览器开启响应式后尝试。（你看这条件……
