刷剧拳击 (Binge Boxing)

一款基于摄像头动作捕捉的节奏拳击游戏。通过 MediaPipe Pose 实时识别你的刺拳、摆拳、勾拳，跟随下落的音符打出连击，边打拳边健身。

玩法

• 站在摄像头前，保证上半身完整入镜
• 屏幕两侧会有音符落下，落入中心判定区时打出对应的拳（刺拳 / 摆拳 / 勾拳，分左右手）
• 连续命中可触发连击特效，Miss 会让画面逐渐模糊，命中可以恢复清晰度
• 可上传本地视频或粘贴视频链接作为背景，也可调节游戏速度、摄像头画中画的位置与透明度

技术栈

• React 19 + Vite 6
• TypeScript
• @mediapipe/tasks-vision（浏览器端姿态识别，pose_landmarker_lite 模型）
• Tailwind CSS 4 + motion（原 Framer Motion）

游戏完全在浏览器端运行：摄像头画面和姿态识别都在本地处理，不会上传到任何服务器。

本地运行

前置要求： Node.js（建议 18+）

npm install
npm run dev

打开终端提示的地址（默认 http://localhost:3000），浏览器会请求摄像头权限，允许即可开始游戏。

其他脚本：

npm run build    # 构建生产版本到 dist/
npm run preview  # 本地预览构建产物
npm run lint     # TypeScript 类型检查（tsc --noEmit）

部署

这是一个纯静态前端项目（npm run build 产出 dist/ 目录），可以直接部署到 Vercel / Netlify / GitHub Pages 等静态托管平台。

⚠️ 摄像头权限需要 HTTPS（localhost 除外），浏览器的 getUserMedia API 在非安全上下文下会被拒绝，所以部署后务必通过 https:// 访问。

目录结构

├── index.html
├── src/
│   ├── main.tsx              # 入口
│   ├── App.tsx                # 游戏主逻辑与 UI
│   ├── index.css              # 全局样式（Tailwind）
│   └── services/
│       └── poseService.ts    # MediaPipe 姿态识别 + 拳法判定
├── vite.config.ts
└── tsconfig.json

已知限制

• 背景音乐 / 音效使用了外部 CDN 地址（soundhelix / mixkit），如果这些资源失效或被墙，音效会静默失败但不影响游戏进行
• 拳法识别阈值是基于经验值调的，光线、摄像头角度、站位距离都会影响识别准确度，如有需要可在 src/services/poseService.ts 中调整对应的 *_THRESHOLD 常量