标签
生活娱乐
标题
生活娱乐 + 老绷家 - 绷脸比拼多人小游戏
正文
1. Demo 简介
是什么：「老绷家」是一款基于 Web 的多人绷脸比拼小游戏。玩家需要在限定时间内保持不笑，通过 AI 实时面部识别技术计算"绷脸值"，坚持不笑者获胜。支持单人练习和好友对战两种模式，还有商城道具系统增加互动趣味性。
面向谁：朋友聚会、情侣异地互动、办公室摸鱼时的轻量娱乐用户。
核心功能：
| 功能 | 说明 |
|---|---|
 单人练习模式 |
离线练习绷脸，实时显示微笑分数和状态档位（轻松/一般/厉害/大师） |
 好友对战模式 |
WebRTC 实时视频连线，两人比拼谁绷得更久，倒计时 + 胜负判定 |
 商城道具系统 |
签到得"绷币"，购买 5 种干扰道具（花瓣雨、闪光、抖动、鬼影、文字弹窗） |
 AI 表情识别 |
基于 MediaPipe FaceMesh 的本地实时微笑评分算法（4 维度加权） |
 隐私安全 |
所有摄像头数据本地处理，不上传任何服务器，零隐私风险 |
【主界面截图】
【单人练习模式截图】
【对战房间截图】
【商城界面截图】
2. Demo 创作思路
灵感来源：
轻松绷住，轻快绷住，松弛绷住，舒缓绷住，安逸绷住，自在绷住，悠闲绷住，悠然绷住，闲适绷住，惬意绷住，舒畅绷住，畅快绷住，舒坦绷住，放松绷住，从容绷住，淡定绷住，坦然绷住，轻便绷住，轻巧绷住，轻盈绷住，轻捷绷住，轻闲绷住，清闲绷住，闲散绷住，怡然绷住，怡悦绷住，欢畅绷住，松快绷住，松爽绷住，宽心绷住，省心绷住，省力绷住，省事绷住，无碍绷住，绷住，无忧绷住，悠然绷住，神怡绷住，心宽绷住，心静绷住，淡然绷住，恬淡绷住，轻缓绷住，安稳绷住，安然绷住，悠然绷住，轻松绷住轻快绷住，松弛绷住，舒缓绷住，安逸绷住，自在绷住，悠闲绷住，悠然绷住，闲适绷住，惬意绷住，舒畅绷住，畅快绷住，舒坦绷住，放松绷住，从容绷住，淡定绷住，坦然绷住，轻便绷住，轻巧绷住，轻盈绷住，轻捷绷住，轻闲绷住，清闲绷住，闲散绷住，怡然绷住，怡悦绷住，欢畅绷住，松快绷住，松爽绷住，宽心绷住，省心绷住，省力绷住，省事绷住，无碍绷住，绷住，无忧绷住，悠然绷住，神怡绷住，心宽绷住，心静绷住，淡然绷住，恬淡绷住，轻缓绷住，安稳绷住，安然绷住，悠然绷住，轻松绷住
就很……你们懂吧
想解决的问题：
-
线下憋笑挑战全靠肉眼判断，不精准、容易有争议
-
想和远方的朋友/对象一起玩，但没有合适的线上工具
-
单纯的视频通话太无聊，需要加点互动玩法和游戏化元素
为什么做这个方向：
-
技术可行性高：WebRTC + FaceMesh 都是成熟的 Web 技术，浏览器原生支持
-
趣味性强：游戏规则超级简单，上手 0 成本，社交属性强，适合传播
-
完全本地化：所有摄像头数据在浏览器本地处理，不上传服务器，隐私安全有保障
-
轻量即开即玩：不需要下载 App，打开网页就能玩，分享链接就能对战
技术选型思路：
| 模块 | 选型 | 原因 |
|---|---|---|
| 前端框架 | React + TS + Vite（对战）、原生 JS（单人） | 对战模式状态复杂用 React，单人模式轻量用原生 |
| 实时通信 | WebRTC P2P | 视频流点对点传输，不经过服务器，延迟低 |
| 信令服务 | Node.js + WebSocket | 轻量高效，部署简单 |
| 表情识别 | MediaPipe FaceMesh | 本地运行、速度快、精度高 |
| 数据存储 | SQLite（Node 内置） | 轻量数据库，不需要额外安装 |
| 部署 | Nginx + 阿里云 ECS | 性价比高，HTTPS 一键配置 |
3. Demo 体验地址
在线体验地址：https://wolegelei.xyz/
（HTTPS 环境，摄像头功能正常可用。首次访问浏览器会提示摄像头权限，点击"允许"即可）
快速上手 3 步走：
-
进入「单人练习」先体验绷脸玩法，看看你能绷到多少分
-
到「商城」签到领 1000 绷币，买点好玩的干扰道具
-
进入「好友对战」→ 创建房间 → 把链接发给朋友 → 开始比拼！
对战玩法说明：
-
倒计时 60 秒，谁先笑（微笑分超过阈值）谁输
-
对战中可以使用道具干扰对手（让对手屏幕抖一抖、下花瓣雨等）
-
坚持到最后不笑的人获胜！
4. TRAE 实践过程
整个项目从 0 到 1 全部在 TRAE 中完成，历时 3 天，经历了从单人 MVP → 对战模式 → 商城系统 → 部署上线的完整迭代。
阶段一：MVP 对战模式构建
最开始先从核心玩法入手——用 React + TypeScript 搭建了双人视频对战的基础框架，包括 WebRTC 视频通话、表情识别、胜负逻辑。
Session ID：6a4084ea64403ea03c8b269d
这个阶段完成的事：
-
双人视频对战框架搭建
-
WebRTC P2P 连接（host 主动 offer / guest 被动 answer）
-
表情识别集成 + 微笑评分算法初版
-
胜负判定逻辑打通
【图片位置 5：早期对战模式截图】 （可以放早期版本的对战界面，或者代码结构截图）
阶段二：整个项目全链路开发
有了 MVP 之后，开始全面完善：加入单人练习模式、优化微笑评分算法、修复各种 Bug、加入商城和道具系统。
Session ID：6a4082e864403ea03c8b262b
这个阶段是项目的核心开发期，主要成果：
-
单人模式 MVP：原生 JS + FaceMesh，实现本地绷脸练习
-
对战模式完善：房间系统、倒计时、状态管理、错误处理
-
商城系统：绷币、签到、道具购买（详见阶段四）
-
道具系统：5 种干扰道具 + 视觉效果（详见阶段三）
-
主界面：4 个入口的聚合首页，统一设计风格
踩过的坑（重点）：
-
坑 1：对手黑屏 → WebRTC offer 发送时机不对，host 在 initWebRTC 后 800ms 盲目发 offer，guest 可能还没连上 WS。修复：host 等
oppOnline === true后才发 offer -
坑 2：倒计时卡在 3 秒 → 服务器时间戳同步问题，
Math.ceil((startAtMs - Date.now())/1000)计算出相同值。修复：改成客户端本地纯计数器 -
坑 3：「再来一局」反复出问题 → 状态残留、WebRTC 重连竞争、黑屏等。修复：直接删掉该功能，返回大厅重新创建房间（简单粗暴但有效
） -
坑 4：YOLOv8 CDN 被 ORB 拦截 → Chrome 的 ORB 安全策略阻止了跨域模型加载。修复：改用原生 FaceDetector + 本地模型文件 fallback
【图片位置 6：单人模式 + 对战模式对比图】 （可以放两个模式的界面拼一张图）
阶段三：道具功能开发
对战模式稳定后，开始做道具系统——这是增加游戏趣味性和社交互动的关键。
Session ID：6a40b908ea3f8eafb656a249
完成的功能：
-
5 种干扰道具：闪光、抖动、鬼影、花瓣雨、文字弹窗
-
emoji 通道：通过 WebRTC DataChannel 发送道具触发指令
-
音效反馈：使用道具时的 beep 音效
-
视觉效果：纯 CSS 动画实现的干扰效果（flash / shake / ghost / petals / text-pop）
同时修复了 WebRTC 黑屏问题：
-
原因：PeerConnection 连接断开时没有清空 remoteStream
-
修复：在
onconnectionstatechange监听disconnected和failed状态，清空 remoteStream 并触发重新协商
【图片位置 7：道具效果截图】 （放一个道具效果的截图，比如花瓣雨或者闪光效果）
阶段四：商城系统开发
道具做好了，自然需要一个商城来"卖"道具，于是做了完整的商城系统。
Session ID：6a40cd8cea3f8eafb656a4d5
完成的功能：
-
绷币系统：虚拟货币，用于购买道具
-
签到功能：每日签到送 1000 绷币
-
新用户福利：初始送 5000 绷币
-
道具购买：商城列表展示，点击购买扣减绷币增加库存
-
后端 API：RESTful API + SQLite 数据库持久化
数据库设计：
-
users表：client_id、coins（绷币余额）、last_checkin（上次签到日期） -
user_items表：client_id、item_id、quantity（库存数量）
阶段五：道具按钮交互优化
道具功能上线后发现一个问题——库存为空时点击按钮没反应，用户不知道为什么。
Session ID：6a40d61bea3f8eafb656a66a
优化内容：
-
道具按钮实时显示库存数量（有库存显示"道具 (N)"）
-
库存为 0 时按钮置灰（disabled 状态），显示"道具"
-
空库存点击弹出 alert 提示"请先到商城购买"
-
商城页面显示当前库存，购买后实时更新
这是一个小细节，但体验提升很明显——用户永远知道"为什么点不了"。
阶段六：全面测试与 Bug 修复
功能都做完后，进行了一轮全面测试，修复了 10 个 Bug。
Session ID：6a40b75dea3f8eafb656a193
修复的主要问题：
-
单人模式：模型加载失败 fallback 逻辑
-
对战模式：WebSocket 断线重连、ICE 候选处理
-
道具系统：库存扣减一致性、并发问题
-
界面：移动端适配、按钮状态、loading 状态
-
错误处理：各种边界情况的提示和兜底
测试覆盖：单人模式全流程、对战模式全流程（创建房间 → 加入 → 对战 → 结束 → 返回大厅）、商城全流程（签到 → 购买 → 使用 → 库存扣减）
5. 开发心得
用 TRAE 开发这个项目最大的感受是——快。
从一个想法到可体验的 Demo，只用了 3 天。如果是传统开发方式，光是搭环境、研究 WebRTC 信令流程、调 FaceMesh 模型可能就要一周。
TRAE 最有价值的地方是：
-
不会卡在环境配置上：遇到 ORB 拦截、Vite HMR 状态污染这类问题，TRAE 能快速定位根因并给出解决方案
-
架构决策有参谋：WebRTC 用 perfect negotiation 还是 host 主动 offer？状态管理用什么？TRAE 会分析利弊给出建议
-
Bug 排查效率高：对手黑屏、倒计时卡住这种看似玄学的问题，通过日志分析一步步定位，比自己瞎试快太多
-
全栈一把梭：前端、后端、数据库、部署，一个对话全搞定，不需要切换上下文
当然也不是一帆风顺——中间踩了很多坑（光"再来一局"就改了三四次），但每次 TRAE 都能帮我快速找到问题根因，而不是原地打转。
