一个创新的纵版射击游戏，使用眼神控制飞机移动，通过眨眼释放技能！

基于 Web 技术构建，集成了计算机视觉（MediaPipe）和游戏开发技术的实验性项目。

---

• 眼神控制飞机移动：不用键盘鼠标，只需看向左/右，飞机就会移动
• 眨眼释放技能：轻轻眨眼即可释放清屏炸弹
• 自动射击系统：专注于躲避和眼神控制
• 校准系统：游戏开始前自动校准眼神基准位置
• 双模式支持：眼神控制 + 键盘控制（备用）
• 实时调试可视化：显示人脸关键点、眼神方向等

---

npm install

npm run dev

Vite 会自动在浏览器打开 http://localhost:3000

1. 点击"开始游戏"
2. 允许摄像头权限（必须）
3. 等待加载 MediaPipe 人脸检测模型（首次约 3-5 秒）
4. 校准阶段：注视屏幕中央圆圈约 2 秒
5. 开始游戏：用眼神控制飞机，眨眼释放技能！

---

操作	说明
看左	飞机向左移动
看右	飞机向右移动
居中	飞机保持当前位置
眨眼	释放清屏炸弹（3秒冷却）

按键	功能
← → / A D	左右移动飞机
空格	释放技能
D	切换调试信息面板
V	切换人脸关键点可视化
S	快速开始游戏（开发用）

---

• 语言：TypeScript
• 构建工具：Vite
• 渲染：HTML5 Canvas 2D
• 人脸检测：MediaPipe Face Landmarker
• 摄像头：WebRTC（getUserMedia）

eye-of-raiden/
├── src/
│   ├── main.ts              # 程序入口
│   ├── config.ts            # 游戏配置常量
│   ├── types.ts             # TypeScript 类型定义
│   │
│   ├── core/                # 核心系统
│   │   ├── Game.ts          # 游戏主类（状态机、循环）
│   │   ├── InputManager.ts  # 输入管理（眼神 + 键盘）
│   │   └── CameraManager.ts # 摄像头管理
│   │
│   ├── vision/              # 视觉检测模块
│   │   ├── FaceDetector.ts  # 人脸检测（MediaPipe 封装）
│   │   ├── GazeTracker.ts   # 眼神追踪和校准
│   │   └── BlinkDetector.ts # 眨眼检测（EAR 算法）
│   │
│   ├── entities/            # 游戏实体
│   │   ├── Player.ts        # 玩家飞机
│   │   ├── Enemy.ts         # 敌机
│   │   └── Bullet.ts        # 子弹
│   │
│   ├── systems/             # 游戏系统
│   │   ├── CollisionSystem.ts # 碰撞检测
│   │   ├── SpawnSystem.ts     # 敌人生成
│   │   └── SkillSystem.ts     # 技能系统
│   │
│   └── utils/               # 工具函数
│       ├── math.ts          # 数学工具
│       └── debug.ts         # 调试可视化
│
├── index.html               # 入口 HTML
├── package.json
├── tsconfig.json
└── vite.config.ts

---

使用 MediaPipe Face Landmarker 检测 478 个人脸关键点。

// src/vision/FaceDetector.ts
const result = faceLandmarker.detectForVideo(videoElement, timestamp);
const eyeLandmarks = getEyeLandmarks(result); // 提取眼部关键点

原理：计算眼睛中心相对于校准基准的偏移量

// src/vision/GazeTracker.ts
// 校准：记录注视中央时的眼部 X 坐标
calibrationData = { leftEyeX, rightEyeX };

// 运行时：计算偏移并归一化到 -1 ~ 1
const offset = currentEyeX - calibrationData.leftEyeX;
const direction = offset / THRESHOLD; // -1（左）到 1（右）

算法：眼睛纵横比（EAR - Eye Aspect Ratio）

// src/vision/BlinkDetector.ts
// EAR = (vertical1 + vertical2) / (2 * horizontal)
// 当 EAR < 阈值 时判定为闭眼
const ear = (distance(p2, p6) + distance(p3, p5)) / (2 * distance(p1, p4));

if (ear < BLINK_THRESHOLD && frames >= MIN_FRAMES) {
  // 触发眨眼事件
}

统一管理键盘和眼神两种输入源：

// src/core/InputManager.ts
interface InputData {
  horizontal: number;      // -1 到 1
  skillTriggered: boolean;
}

// 自动根据当前输入源返回对应输入
getInput(): InputData

---

所有游戏参数在 src/config.ts 中集中管理：

// 眼神控制灵敏度
export const GAZE = {
  THRESHOLD: 0.02,        // 眼神偏移阈值（2% 屏幕宽度）
  SMOOTHING: 0.15,        // 平滑系数（0-1，越小越平滑）
  CALIBRATION_FRAMES: 60, // 校准采样帧数
};

// 眨眼检测参数
export const BLINK = {
  EAR_THRESHOLD: 0.2,     // 眼睛闭合阈值
  MIN_FRAMES: 3,          // 最少闭眼帧数
  COOLDOWN_FRAMES: 30,    // 检测冷却时间
};

---

• FPS
• 当前输入模式（键盘 / 眼神）
• 游戏状态
• 摄像头状态
• 人脸检测状态

• 绿色小点：478 个人脸关键点
• 蓝色大点：左眼关键点
• 橙色大点：右眼关键点
• 黄色连线：双眼中心连线
• 底部指示器：眼神方向（左/中/右）

---

npm run build

构建产物在 dist/ 目录，可直接部署到静态服务器。

---

1. 视觉效果

   • 爆炸粒子效果
   • 飞机拖尾特效
   • 技能释放闪光

2. 更多技能

   • 双眨眼：触发不同技能
   • 长时间闭眼：无敌状态
   • 眨左眼/右眼：左右闪避

3. 关卡系统

   • Boss 战
   • 多种敌人类型
   • 难度递增

1. 性能优化

   • 对象池（减少 GC）
   • Web Worker 运行人脸检测
   • OffscreenCanvas 渲染

2. 多人模式

   • 在线排行榜
   • 实时对战

3. 适配性

   • 移动端支持
   • 多种分辨率适配
   • 无障碍功能

---

• ✅ Google 官方出品，持续维护
• ✅ 轻量级（模型约 10MB）
• ✅ 高准确度（478 个关键点）
• ✅ GPU 加速支持
• ✅ 开箱即用，无需训练

每个人的眼睛大小、位置不同，直接使用绝对坐标无法准确判断眼神方向。通过校准记录"注视中央"的基准位置，后续计算相对偏移，才能实现准确控制。

眼神检测会有轻微抖动，直接用于控制会导致飞机晃动。使用**线性插值（lerp）**进行平滑：

smoothedValue = lerp(current, target, smoothing);

smoothing 越小越平滑，但响应会变慢，需要权衡。

---

这是一个实验性教学项目，欢迎提出改进建议！

---

MIT License

---

npm install && npm run dev

祝你游戏愉快！👁️⚡