一个基于 HTML5、MediaPipe 和 Python FastAPI 的全息交互式网页游戏。玩家通过摄像头手势（握拳）捕捉屏幕上的全息星星和特殊图标来获取分数。

(示例图标)

• 全息视觉风格: 赛博朋克风格的 UI 设计，半透明遮罩与扫描线效果。
• 手势识别: 使用 MediaPipe Hands 实现实时的手部骨架追踪与握拳检测。
• 互动道具:
  • ⭐ 普通星星 (1分)
  • 🎁 特殊图标 (5分): CNB, CodeBuddy, EdgeOne, Lighthouse, TencentCloud。
• 游戏机制:
  • 60秒限时挑战。
  • 动态生成道具，特殊图标具有更华丽的视觉效果。
  • 实时碰撞检测与音效反馈。
• 排行榜系统:
  • 游戏结束后展示捕获物品详情。
  • 支持提交昵称和邮箱上传成绩。
  • 实时查看全服排行榜（按分数降序）。
• 后端支持: 基于 Python FastAPI 和 PostgreSQL 构建的高性能后端 API。

• 前端: HTML5, CSS3, JavaScript (Canvas API)
• AI/CV: Google MediaPipe Hands
• 后端: Python 3.12+, FastAPI, SQLAlchemy, Pydantic
• 数据库: PostgreSQL
• 部署: Docker (可选), Python HTTP Server

• Python 3.12+
• PostgreSQL 数据库
• 带有摄像头的电脑

1. 进入项目根目录。

2. 创建虚拟环境（可选但推荐）：

   python -m venv venv
   # Windows
   venv\Scripts\activate
   # Mac/Linux
   source venv/bin/activate
   

3. 安装依赖：

   pip install -r requirements.txt
   

4. 配置环境变量： 在项目根目录创建 .env 文件，并填入数据库连接信息：

   # 格式: postgresql://用户名:密码@主机:端口/数据库名
   DATABASE_URL=postgresql://user:password@localhost:5432/catchstars
   

   注意：如果未配置 DATABASE_URL，默认会使用本地 SQLite (local_scores.db) 用于测试。

5. 启动后端服务：

   python main.py
   

   服务将运行在 http://0.0.0.0:8000。

前端为纯静态文件，可以使用任意 HTTP 服务器运行。

使用 Python 内置服务器 (推荐):

python -m http.server 8080

然后在浏览器打开 http://localhost:8080 即可开始游戏。

1. 授权摄像头: 打开网页后，允许浏览器访问摄像头。
2. 开始游戏: 点击屏幕中央的“开始游戏”按钮。
3. 操作方式:
   • 移动手掌控制屏幕上的手部骨架。
   • 握拳 (五指弯曲) 即可触发“抓取”动作。
   • 当手掌中心对准星星或图标时握拳，即可捕获物品。
4. 结算:
   • 60秒结束后，显示总分和捕获明细。
   • 输入昵称和邮箱提交成绩，查看排行榜。

catch-stars/
├── img/                 # 游戏图片资源
├── index.html           # 游戏主页
├── style.css            # 样式文件
├── game.js              # 游戏核心逻辑 (MediaPipe, Canvas, 交互)
├── main.py              # 后端入口 (FastAPI)
├── requirements.txt     # Python 依赖列表
├── .env                 # 环境变量配置
└── README.md            # 项目说明文档

• 请确保在光线充足的环境下游玩，以保证手势识别的准确性。
• 镜像问题：游戏画面已做镜像处理，您的动作会像照镜子一样直观反馈。
• 浏览器兼容性：建议使用最新版 Chrome 或 Edge 浏览器以获得最佳 WebRTC 和 WebGL 性能。