这是一个基于 Web 前端技术实现的 AR (增强现实) 贪吃蛇游戏。通过计算机视觉技术识别手势,让玩家可以用食指在空气中引导贪吃蛇移动,体验独特的“隔空操控”乐趣。
- 启动游戏:允许浏览器访问摄像头权限。
- 操控方式:举起一只手,伸出食指。屏幕上会出现一个跟随指尖的光圈。
- 玩法:移动手指,引导贪吃蛇去吃屏幕上的红点(奖励)。
- 目标:吃到越多红点得分越高,蛇身也会随之变长。
- HTML5 & CSS3: 构建游戏界面和布局。
- JavaScript (ES6+): 核心游戏逻辑。
- Canvas API: 高性能的图形渲染(贪吃蛇、食物、特效)。
- MediaPipe Hands: Google 开源的机器学习框架,用于实时、高精度的手部关键点检测。
- 无接触交互:完全通过手势控制,无需鼠标或触摸屏。
- AR 体验:以摄像头实时画面为背景,并在其上叠加游戏元素,提供沉浸式体验。
- 智能镜像:自动处理摄像头画面的镜像翻转,使操作符合直觉(像照镜子一样)。
- 移动端优化:针对 iOS Safari 进行了兼容性适配(
playsinline 支持),确保证在手机上也能流畅运行。
如果你已安装 Python,可以在项目根目录下运行以下命令启动一个简单的 HTTP 服务器:
python -m http.server 8080
然后在浏览器中访问:http://localhost:8080
由于浏览器的安全策略,摄像头权限通常只允许在 HTTPS 协议或 localhost 下使用。
如果你想在手机上体验,有以下几种方法:
方法 A:使用内网穿透工具(开发调试推荐)
- 确保手机和电脑在同一局域网。
- 使用像
ngrok 这样的工具将本地端口映射到公网 HTTPS 地址。
ngrok http 8080
- 在手机浏览器打开 ngrok 提供的 HTTPS 链接。
方法 B:部署到服务器(生产环境推荐)
- 将项目文件上传至你的云服务器。
- 配置 Web 服务器(如 Nginx、Apache)。
- 关键步骤:必须配置 SSL/TLS 证书启用 HTTPS 加密。现代浏览器禁止在非安全上下文(http)中调用摄像头。
- 请在光线充足的环境下游玩,以保证手势识别的准确性。
- 如果游戏没有反应,请检查浏览器是否已授予摄像头权限。
- iOS 用户请使用 Safari 浏览器以获得最佳兼容性。
MIT License