logo
1
0
Login

AR 贪吃蛇 (AR Snake Game)

这是一个基于 Web 前端技术实现的 AR (增强现实) 贪吃蛇游戏。通过计算机视觉技术识别手势,让玩家可以用食指在空气中引导贪吃蛇移动,体验独特的“隔空操控”乐趣。

🎮 游戏演示

  1. 启动游戏:允许浏览器访问摄像头权限。
  2. 操控方式:举起一只手,伸出食指。屏幕上会出现一个跟随指尖的光圈。
  3. 玩法:移动手指,引导贪吃蛇去吃屏幕上的红点(奖励)。
  4. 目标:吃到越多红点得分越高,蛇身也会随之变长。

🛠️ 技术栈

  • HTML5 & CSS3: 构建游戏界面和布局。
  • JavaScript (ES6+): 核心游戏逻辑。
  • Canvas API: 高性能的图形渲染(贪吃蛇、食物、特效)。
  • MediaPipe Hands: Google 开源的机器学习框架,用于实时、高精度的手部关键点检测。

✨ 特性

  • 无接触交互:完全通过手势控制,无需鼠标或触摸屏。
  • AR 体验:以摄像头实时画面为背景,并在其上叠加游戏元素,提供沉浸式体验。
  • 智能镜像:自动处理摄像头画面的镜像翻转,使操作符合直觉(像照镜子一样)。
  • 移动端优化:针对 iOS Safari 进行了兼容性适配(playsinline 支持),确保证在手机上也能流畅运行。

🚀 如何运行

方式 1: 本地预览 (推荐)

如果你已安装 Python,可以在项目根目录下运行以下命令启动一个简单的 HTTP 服务器:

python -m http.server 8080

然后在浏览器中访问:http://localhost:8080

方式 2: 移动端体验

由于浏览器的安全策略,摄像头权限通常只允许在 HTTPS 协议或 localhost 下使用。

如果你想在手机上体验,有以下几种方法:

方法 A:使用内网穿透工具(开发调试推荐)

  1. 确保手机和电脑在同一局域网
  2. 使用像 ngrok 这样的工具将本地端口映射到公网 HTTPS 地址。
    ngrok http 8080
  3. 在手机浏览器打开 ngrok 提供的 HTTPS 链接。

方法 B:部署到服务器(生产环境推荐)

  1. 将项目文件上传至你的云服务器。
  2. 配置 Web 服务器(如 Nginx、Apache)。
  3. 关键步骤:必须配置 SSL/TLS 证书启用 HTTPS 加密。现代浏览器禁止在非安全上下文(http)中调用摄像头。

📝 注意事项

  • 请在光线充足的环境下游玩,以保证手势识别的准确性。
  • 如果游戏没有反应,请检查浏览器是否已授予摄像头权限。
  • iOS 用户请使用 Safari 浏览器以获得最佳兼容性。

📄 License

MIT License

About

No description, topics, or website provided.
Language
JavaScript73.1%
CSS12.5%
HTML12.4%
Dockerfile2%