全息交互切水果游戏 (Holographic Fruit Ninja)
这是一个基于 Web 技术(HTML5, CSS3, JavaScript)开发的体感切水果游戏。通过计算机视觉技术捕捉玩家的手势,让你体验“徒手”切水果的快感!
- 全息交互:利用摄像头实时捕捉手部动作,无需鼠标键盘,挥手即可操作。
- 真实物理:水果随机抛出,受重力影响下落,切开后碎片自然分离。
- 视觉特效:
- 炫酷的刀光尾迹。
- 真实的水果切面与汁液飞溅效果。
- 蔚蓝色清新背景。
- 右下角画中画(PIP)显示手部骨骼识别状态。
- 动态音效:使用 Web Audio API 实时合成切割音效。
- 计分系统:包含实时分数显示和倒计时挑战。
- 前端基础:HTML5, CSS3, JavaScript (ES6+)
- 图形渲染:HTML5 Canvas API
- AI/计算机视觉:MediaPipe Hands - 用于高性能的实时手部追踪。
- 音频处理:Web Audio API - 用于生成动态音效。
由于游戏需要访问摄像头权限,且使用了 ES Modules 和跨域资源,建议通过本地 HTTP 服务器运行,而不是直接双击打开 index.html。
如果你安装了 Python,可以在项目根目录下运行:
python -m http.server 8000
然后打开浏览器访问:http://localhost:8000
方法 2: 使用 VS Code Live Server
如果你使用 VS Code,安装 "Live Server" 插件,右键 index.html 选择 "Open with Live Server"。
方法 3: 使用 Node.js http-server
npm install -g http-server
http-server .
- 允许浏览器访问摄像头权限。
- 等待模型加载完成(加载文字消失,出现“开始游戏”按钮)。
- 点击**“开始游戏”**。
- 站在摄像头前,伸出食指作为“刀刃”。
- 挥动食指划过屏幕上飞出的水果将其切开!
- 限时 60 秒,尽可能切中更多水果获得高分。
cut-fruit/
├── index.html # 游戏入口
├── style.css # 样式定义
├── script.js # 核心游戏逻辑
├── README.md # 项目说明
└── img/ # 图片资源
├── apple.png
├── ban.png
├── orange.png
└── watermelon.png
- 请确保环境光线充足,以便摄像头准确识别手势。
- 建议使用 Chrome、Edge 等现代浏览器以获得最佳性能。