先问一个问题如果你的摄像头能看见你笑然后把你的微笑实时变成游戏中角色举起杠铃的力量你会不会想试一下这就是我们今天要做的项目——表情举重微笑举重。它不是一个传统鼠标键盘游戏而是利用摄像头完成表情识别的体感游戏玩家不需要动手柄只要对着摄像头微笑角色就能把杠铃举起来笑容越用力、保持越久杠铃举得越稳。本文会从体感游戏的技术原理讲起带你完成一个可运行的网页版表情举重游戏。内容包括摄像头调用与人脸检测微笑表情识别的核心逻辑微笑强度到杠铃动画的映射杠铃状态机设计与自定义素材支持室内、户外场景的光线与调参建议常见问题排查与工程最佳实践。无论你是刚接触前端 AI 的新手还是想快速做一个体感互动小项目的老手这篇教程都可以直接照着做。1. 背景与核心概念1.1 什么是体感游戏体感这个词听起来高大上本质却很简单让真实世界的动作成为游戏的输入信号。早期体感游戏依赖专门的硬件比如体感摄像头、红外深度传感器、手持控制器。后来随着 AI 模型在浏览器端的成熟普通摄像头也能完成相当不错的人体检测、手势识别和表情识别。于是网页体感游戏变成了一种低成本、高传播性的玩法形式。前端体感游戏的完整链路大致是用getUserMedia打开摄像头通过 AI 模型分析视频帧检测人脸、身体关键点或表情把检测结果比如笑脸置信度转成游戏逻辑可用的数值用 Canvas 或 DOM 把游戏画面渲染出来。表情举重项目使用的正是表情 → 力量 → 动画这条链路。1.2 表情举重的核心玩法表情举重的目标很直接微笑越明显、持续时间越长角色举起来的杠铃越重、越高。玩法拆解如下普通微笑角色缓缓发力杠铃开始上升大笑/强笑力量快速积攒杠铃到达锁定高度表情回落杠铃逐渐下降挑战失败。这个设计比按下按键举重更有代入感因为玩家必须保持表情稳定而不是瞬间触发。它考验的不仅是识别准确率更考验游戏手感。1.3 为什么用浏览器前端方案表情举重游戏完全可以做成桌面客户端但网页方案有三个明显优势方案优点缺点桌面应用性能强、模型可任意选用安装成本高、分享不便服务端识别可复用高性能 GPU需要服务器、传输视频有隐私风险浏览器端识别免安装、易分享、本地推理性能受设备限制、模型体积需控制所以本文选择纯前端方案摄像头画面全程留在本机浏览器中AI 推理也在本地完成不上传视频帧。这一点不仅便于部署也避免了隐私争议。1.4 环境准备与版本说明本文示例使用以下技术环境操作系统Windows / macOS / Linux 均可浏览器Chrome、Edge 最新版建议需支持 WebRTC 与 WebGL运行环境Node.js 18 或更高版本包管理器使用 pnpm 或 npm前端构建工具Vite人脸识别模型使用 face-api.js 的 TinyFaceDetector FaceExpressionNet也可按需切换 MediaPipe Face Mesh。需要说明的是face-api.js 已经不是一个高频维护的库MediaPipe、TensorFlow.js 的 API 也在不断变化。所以本文给出的版本号是示例级别你在实际项目中应到对应 GitHub 仓库查看最新版本重点学习的是实现思路而不是死记某个版本号。如果你希望在户外、手机等环境下运行还需要注意 HTTPS 要求后面会专门讲。2. 技术选型与原理拆解2.1 人脸检测与表情识别技术对比表情举重需要先找到人脸再判断微笑程度。目前主流方案有三类方案特点适用场景face-api.js基于 TensorFlow.jsAPI 简单示例多快速原型、学习项目MediaPipe Face Mesh468 点人脸关键点精度高、跨平台复杂表情、姿势、实时滤镜自训练模型数据私有、效果可控对特定表情有特殊要求从快速做出可玩原型的角度face-api.js 是最合适的它提供了detectAllFaces()方法直接返回expressions.smile置信度不用自己处理关键点与表情分类的关系。它的识别结果是一个置信度数值范围大概在 0 到 1 之间。smile置信度越高表示模型认为当前人脸处于微笑状态的概率越大。2.2 微笑强度的平滑处理直接使用模型的原始置信度会导致动画抖动因为每一帧检测到的 smile 值会有波动上一帧 0.7、下一帧 0.3杠铃就会一跳一跳。常用方案是低通滤波指数平滑smoothValue smoothValue * (1 - alpha) rawValue * alpha;alpha表示新值所占权重。alpha 越小越平滑但响应越迟钝alpha 越大反应越快但抖动越明显。举重游戏建议alpha取 0.1 到 0.2 之间。另外还需要设置阈值滞回当置信度超过 0.6 时判定为微笑要降回 0.4 以下才判定为停止微笑。这样能避免在临界值附近反复切换。2.3 杠铃举起的核心逻辑杠铃不能只由一个数字驱动否则玩家笑一下杠铃就跳起来游戏就不好玩了。我们需要一个力量累计机制当前微笑强度映射为当前力量力量会转化成举重进度进度达到 100% 时杠铃锁定在最高点挑战成功微笑中断时进度缓慢回退。用一个状态机来表达这个流程会非常清晰IDLE待机等待微笑开始HOLDING正在微笑力量累计中LIFTING杠铃上升动画播放中SUCCESS举重成功展示庆祝FAILED微笑中断杠铃回落。状态机的好处是逻辑清晰不会出现杠铃一边上升一边下落的矛盾状态。3. 项目初始化与依赖安装3.1 创建项目结构我们先创建一个 Vite 项目方便开发实时预览。pnpm create vite smile-lifting --template vanilla cd smile-lifting pnpm install项目目录规划如下smile-lifting/ ├── index.html ├── package.json ├── public/ │ ├── models/ │ │ ├── tiny_face_detector_model-weights_manifest.json │ │ ├── tiny_face_detector_model-shard1 │ │ ├── face_expression_model-weights_manifest.json │ │ └── face_expression_model-shard1 │ └── assets/ │ ├── barbell.png │ ├── plate.png │ └── character.png └── src/ ├── main.js ├── camera.js ├── face-tracker.js ├── game-engine.js └── renderer.js3.2 安装依赖pnpm add face-api.js开发期间推荐使用 Vite 的本地服务器启动项目pnpm dev浏览器访问http://localhost:5173。请注意localhost下浏览器会默认授予摄像头权限如果部署到局域网或外网必须使用 HTTPS否则getUserMedia会被拦截。3.3 下载模型文件face-api.js 不会自动下载模型我们需要把模型文件放到public/models目录。两个关键模型是tinyFaceDetectorModel轻量级人脸检测模型faceExpressionModel表情识别模型。可以从 face-api.js 官方仓库的weights目录下载对应权重通常包含-weights_manifest.json和若干-shard1文件。模型文件不大适合网页加载。4. 完整实战表情举重核心实现4.1 页面结构index.html主要包含视频、画布、素材说明和提示信息。!-- index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title表情举重 2026 - 微笑举重/title style body { margin: 0; background: #111; color: #fff; font-family: Microsoft YaHei, sans-serif; overflow: hidden; } #app { position: relative; width: 100vw; height: 100vh; } video { position: absolute; left: 20px; bottom: 20px; width: 240px; border-radius: 12px; transform: scaleX(-1); z-index: 10; } canvas#game { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } #status { position: absolute; top: 20px; left: 20px; font-size: 18px; background: rgba(0, 0, 0, 0.6); padding: 8px 16px; border-radius: 8px; z-index: 10; } /style /head body div idapp canvas idgame/canvas video idvideo autoplay muted playsinline/video div idstatus正在加载模型.../div /div script typemodule src/src/main.js/script /body /html这里把video缩小放在左下角方便玩家确认自己的表情状态。由于镜像是翻转的需要transform: scaleX(-1)。4.2 摄像头模块camera.js负责打开摄像头并持续输出媒体流。// src/camera.js export async function startCamera(videoElement) { if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { throw new Error(当前浏览器不支持摄像头访问); } const stream await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: user, }, audio: false, }); videoElement.srcObject stream; await videoElement.play(); return stream; }这里把视频分辨率限制在 640×480。体感游戏不需要高清视频高分辨率只会增加检测耗时。4.3 表情识别模块face-tracker.js负责加载模型并检测微笑置信度。// src/face-tracker.js import * as faceapi from face-api.js; export async function loadModels(modelPath /models) { await faceapi.nets.tinyFaceDetector.loadFromUri(modelPath); await faceapi.nets.faceExpressionNet.loadFromUri(modelPath); } export async function detectSmile(videoElement) { const options new faceapi.TinyFaceDetectorOptions({ inputSize: 320, scoreThreshold: 0.4, }); const detections await faceapi .detectAllFaces(videoElement, options) .withFaceExpressions(); if (!detections || detections.length 0) { return 0; } const expressions detections[0].expressions; return expressions.smile || 0; }需要注意的是detectAllFaces(videoElement, options)可以直接传入视频元素face-api.js 会读取当前视频帧。inputSize越小检测越快但过小会无法识别远距离人脸。这里选 320 是性能和准确率之间的平衡。4.4 举重游戏状态机game-engine.js是整个游戏的核心。它接收每秒若干次的表情置信度输出当前杠铃位置和游戏状态。// src/game-engine.js export const STATES { IDLE: IDLE, HOLDING: HOLDING, LIFTING: LIFTING, SUCCESS: SUCCESS, FAILED: FAILED, }; export class GameEngine { constructor() { this.state STATES.IDLE; this.progress 0; // 0-100 this.smoothSmile 0; // 平滑后的微笑值 this.holdTime 0; this.alpha 0.15; this.smileThreshold 0.55; this.releaseThreshold 0.35; this.targetHoldTime 3; // 需要保持微笑的总秒数 } update(rawSmile, deltaTime) { this.smoothSmile this.smoothSmile * (1 - this.alpha) rawSmile * this.alpha; const smiling this.smoothSmile this.smileThreshold; const released this.smoothSmile this.releaseThreshold; switch (this.state) { case STATES.IDLE: if (smiling) { this.state STATES.HOLDING; this.holdTime 0; } break; case STATES.HOLDING: if (released) { this.state STATES.FAILED; break; } this.holdTime deltaTime; this.progress Math.min(100, (this.holdTime / this.targetHoldTime) * 100); if (this.progress 100) { this.state STATES.LIFTING; } break; case STATES.LIFTING: this.progress 100; this.state STATES.SUCCESS; break; case STATES.SUCCESS: if (released) { this.reset(); } break; case STATES.FAILED: this.progress * 0.9; if (this.progress 2) { this.reset(); } break; default: break; } } reset() { this.state STATES.IDLE; this.progress 0; this.holdTime 0; this.smoothSmile 0; } }状态机中有一个关键变量progress。它在HOLDING状态持续累加相当于力量值。微笑中断时进入FAILED进度按 0.9 倍衰减这样玩家重新微笑后不是从零开始而是有一个惩罚式的回落过程挑战性更强。4.5 渲染模块与杠铃动画renderer.js负责把所有状态画到 Canvas 上。杠铃采用横杠 杠铃片的结构杠铃片数量可以由自定义素材决定。// src/renderer.js export class Renderer { constructor(canvas) { this.canvas canvas; this.ctx canvas.getContext(2d); this.bgImage null; this.barbellImage null; this.plateImage null; } loadImages(manifest) { this.bgImage this.loadImage(manifest.background); this.barbellImage this.loadImage(manifest.barbell); this.plateImage this.loadImage(manifest.plate); } loadImage(src) { const img new Image(); img.src src; return img; } resize() { this.canvas.width window.innerWidth; this.canvas.height window.innerHeight; } draw(engine, video, showVideo) { const ctx this.ctx; ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); if (this.bgImage this.bgImage.complete) { ctx.drawImage(this.bgImage, 0, 0, this.canvas.width, this.canvas.height); } else { ctx.fillStyle #1a1a2e; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); } if (showVideo video video.readyState 2) { const vw 200; const vh (video.videoHeight / video.videoWidth) * vw; ctx.save(); ctx.translate(20, this.canvas.height - vh - 20); ctx.scale(-1, 1); ctx.drawImage(video, -vw, 0, vw, vh); ctx.restore(); } this.drawBarbell(engine); this.drawProgress(engine); this.drawText(engine); } drawBarbell(engine) { const ctx this.ctx; const cx this.canvas.width / 2; const cy this.canvas.height / 2 100; const maxLift 260; const liftOffset (engine.progress / 100) * maxLift; const barY cy - liftOffset; // 横杠 if (this.barbellImage this.barbellImage.complete) { ctx.drawImage(this.barbellImage, cx - 180, barY - 16, 360, 32); } else { ctx.fillStyle #888; ctx.fillRect(cx - 180, barY - 8, 360, 16); } // 杠铃片 const plateCount 3; for (let i 0; i plateCount; i) { const x cx - 180 30 i * 22; if (this.plateImage this.plateImage.complete) { ctx.drawImage(this.plateImage, x, barY - 28, 22, 56); } else { ctx.fillStyle #e74c3c; ctx.fillRect(x, barY - 28, 22, 56); } } } drawProgress(engine) { const ctx this.ctx; ctx.fillStyle rgba(255,255,255,0.2); ctx.fillRect(40, 40, 260, 24); ctx.fillStyle engine.state FAILED ? #e74c3c : #2ecc71; ctx.fillRect(40, 40, (260 * engine.progress) / 100, 24); ctx.fillStyle #fff; ctx.font 16px sans-serif; ctx.fillText(力量 ${Math.round(engine.progress)}%, 40, 86); } drawText(engine) { const ctx this.ctx; ctx.font 28px sans-serif; ctx.fillStyle #fff; ctx.textAlign center; let tip ; if (engine.state IDLE) tip 请对着摄像头微笑开始举重; if (engine.state HOLDING) tip 保持微笑正在举重...; if (engine.state SUCCESS) tip 举重成功可以休息一下再挑战; if (engine.state FAILED) tip 微笑中断杠铃下降了...; ctx.fillText(tip, this.canvas.width / 2, 80); } }这里的 Canvas 绘制只是基础示例。实际项目中你可以把liftOffset改成缓动动画并加入角色身体姿势变化例如角色手臂从弯曲到伸直。4.6 主流程串联main.js把摄像头、识别、引擎、渲染串起来。// src/main.js import { startCamera } from ./camera.js; import { loadModels, detectSmile } from ./face-tracker.js; import { GameEngine } from ./game-engine.js; import { Renderer } from ./renderer.js; const video document.getElementById(video); const canvas document.getElementById(game); const status document.getElementById(status); const renderer new Renderer(canvas); const engine new GameEngine(); renderer.resize(); window.addEventListener(resize, () renderer.resize()); async function init() { status.textContent 正在加载模型...; await loadModels(/models); status.textContent 正在打开摄像头...; await startCamera(video); status.textContent 准备就绪请微笑; // 自定义素材 renderer.loadImages({ background: /assets/bg.png, barbell: /assets/barbell.png, plate: /assets/plate.png, }); let lastTime performance.now(); const targetFPS 30; const frameInterval 1000 / targetFPS; let lastDetect 0; async function gameLoop(now) { requestAnimationFrame(gameLoop); const elapsed now - lastDetect; if (elapsed frameInterval) { lastDetect now; const smile await detectSmile(video); const deltaSec (now - lastTime) / 1000; engine.update(smile, deltaSec); lastTime now; renderer.draw(engine, video, true); } } requestAnimationFrame(gameLoop); } init().catch((err) { status.textContent 初始化失败 err.message; console.error(err); });这里做了一个 30 FPS 的限频表情识别不是每帧都做而是每 33 毫秒做一次避免把 CPU 打满。4.7 自定义素材系统renderer.loadImages()已经支持了背景、横杠、杠铃片三个素材槽位。如果希望玩家可以自定义整套素材可以做一个manifest.json{ background: /assets/custom_bg.jpg, character: /assets/character.png, barbell: /assets/barbell.png, plate: /assets/plate.png, title: 我的定制表情举重 }页面加载时const manifest await fetch(/assets/manifest.json).then((res) res.json()); renderer.loadImages(manifest);素材建议背景图片建议 1920×1080 或同比例保证各种屏幕都能显示完整横杠图片建议透明背景 PNG宽高比大约 10:1杠铃片图片建议透明背景 PNG适合重复绘制角色图片可以有待机、发力、成功三种状态增加动画层次。5. 室内与户外场景适配5.1 室内场景优化建议室内环境相对稳定但要注意以下几点因素建议光线避免正面强光采用柔和侧光让人脸轮廓清晰背景建议单色墙面减少面部检测干扰摄像头位置放置在屏幕上方约 30cm 处镜头稍微向下倾斜距离人脸距离摄像头 0.5~1.5 米时识别准确率较高室内可以用普通笔记本摄像头或外接 720P 摄像头。因为游戏不依赖高分辨率720P 已经足够。5.2 户外场景的挑战与对策户外场景是这类体感游戏的典型需求比如商场、展台、公园活动中的大屏互动。户外最大的变量是光线。逆光会导致人脸过暗模型识别率极低。解决办法是把摄像头背对太阳方向保证人脸受光均匀。户外背景复杂行人、树影、广告牌都会干扰人脸检测。可适当提高scoreThreshold到 0.5减少误检测。户外可能需要更远距离识别。此时inputSize应该上升到 416 或 512否则远距离人脸太小检测不到。强烈建议在户外使用外接高清摄像头配合笔记本电脑而不是依赖手机前置摄像头因为手机容易过热并降低帧率。5.3 移动端与横屏模式如果把项目部署到手机浏览器需要在index.html中加入屏幕旋转适配meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno /同时建议检测横屏状态在竖屏时提示用户旋转手机。横屏能提供更宽的游戏画面杠铃动画也有更大的展示空间。6. 运行与验证完成以上代码后执行pnpm dev浏览器打开http://localhost:5173首次访问会弹出摄像头权限授权窗口点击允许。预期效果如下页面显示准备就绪请微笑左下角出现镜像摄像头画面尝试微笑进度条开始上涨持续微笑 3 秒杠铃举起并显示举重成功停止微笑杠铃回落回到待机状态。如果发现表情识别非常慢可以先检查浏览器任务管理器中的 CPU 占用。如果 CPU 占用接近 100%说明inputSize或targetFPS设置过高需要调低。7. 常见问题与排查思路7.1 常见问题表格问题现象常见原因解决思路摄像头黑屏页面是 HTTP 非 localhost 地址使用 localhost 或部署 HTTPS摄像头画面未出现权限被拒绝清除网站权限后重新授权模型加载报 404models路径错误检查public/models目录与文件名微笑识别不稳定光线太暗或逆光调整光线、提高inputSize杠铃抖动厉害平滑系数 alpha 过大降低 alpha 到 0.1 左右进度条一直为 0smileThreshold过高检查当前微笑置信度适当降低阈值FPS 很低检测频率过高或输入尺寸过大降低targetFPS、缩小inputSize户外远距离识别不到输入尺寸太小提升inputSize并提高阈值7.2 如何查看实时 smile 值调试时可以在gameLoop里临时打印console.log(smile);如果一直接近 0说明人脸检测没命中如果数值在 0.3 到 0.5 之间波动说明表情置信度偏低需要调低阈值或改善光线如果数值接近 1说明模型非常确信玩家正在微笑。7.3 摄像头权限与安全说明getUserMedia属于安全敏感 API。部署到生产环境时HTTPS 是硬性要求。你可以用vite preview --host在本地验证构建产物但局域网手机访问时仍然需要在服务器配置 HTTPS。本项目全程在浏览器本地推理摄像头画面不会上传到任何服务器这一点在面向公众投放时也要在界面上明确展示减少用户顾虑。8. 最佳实践与工程建议8.1 平滑与阈值调参方法表情举重的手感全靠参数调优。最理想的状态是玩家稍微放松表情杠铃开始缓慢下落重新微笑杠铃又能快速找回节奏。建议先记录不同人、不同光线条件下的 smile 值分布再确定阈值。例如自然表情微笑smile 约 0.6~0.8大笑smile 约 0.8~0.95面无表情smile 约 0.1~0.3。如果游戏面向儿童可以把smileThreshold降到 0.45如果面向成年人可以提高到 0.55。8.2 性能优化体感游戏的实时性非常重要。推荐的性能调优顺序优先降低视频分辨率到 640×480优先使用TinyFaceDetector而不是更大的模型设置 30 FPS 的检测频率不要每帧都做 AI 推理使用requestAnimationFrame控制渲染循环素材图片在加载后要复用不要在每帧里重新new Image()。8.3 防误判与安全边界在实际展台场景中真正需要关注的是误触发路人只是笑了一下游戏就开始举重会导致玩家没进入状态就觉得游戏坏了。可以在进入HOLDING前增加一个短延迟比如玩家必须微笑超过 0.3 秒后游戏才进入举重状态避免误触。// 伪代码示意 this.confirmSmileTime deltaTime; if (this.confirmSmileTime 0.3) { this.state STATES.HOLDING; }8.4 素材与品牌定制表情举重很适合作为品牌互动小游戏此时可以预留完整的定制接口背景图替换成品牌主视觉杠铃片替换成产品图标角色替换成吉祥物成功画面展示品牌文案。在manifest.json中增加title、successText字段即可在不改代码的情况下完成一场活动落地。8.5 日志与体验追踪如果项目部署到线上建议加入轻量级的用户行为日志window.addEventListener(error, (e) { fetch(/api/log, { method: POST, body: JSON.stringify({ error: e.message }), }); });同时记录以下指标模型加载耗时摄像头授权成功率平均识别 FPS完成举重的用户比例。这些数据能帮助你持续优化体感游戏的体验。9. 下一步学习路线完成表情举重之后你可以继续往以下方向扩展加入多人模式同一画面识别多张人脸比拼谁的微笑力量更大加入语音反馈配合 Web Audio API在举重成功时播放加油太棒了等音效升级动作识别从表情识别扩展到手势、姿态识别例如挥手触发重举模式接入排行榜把玩家的力量值上传到后端服务形成全球排行榜。从技术角度看你目前已经掌握了浏览器摄像头调用、AI 表情识别、状态机设计、Canvas 动画渲染这条完整的实时互动开发链路。下一步可以重点研究 MediaPipe Face Mesh 的关键点坐标用 468 个人脸特征点做更精细的表情判断比如嘴角上扬角度、眼部开合程度。如果本文对你有帮助可以收藏备用如果你在实现过程中遇到问题建议先打印 smile 值再用状态机逐步调试90% 的异常都能靠这个方法快速定位。欢迎把你自己做的表情举重版本分享出来一起交流。