特性
- 5 大关卡生态 — 沙漠、雪原、森林、城市、太空,各有独特障碍物与场景氛围
- 道具系统 — 护盾、冲刺、慢动作、双倍积分、磁铁,5 种增益道具
- 可解锁皮肤 — 经典、忍者、太空、骑士、机器人、黄金,用游戏内金币购买
- 幽灵竞速 — 与自己的最佳录像赛跑
- 本地双人 — 同一台机器上双人游玩
- 每日挑战 — 每天生成相同种子关卡,全球玩家同台竞技
- 昼夜循环 — 游戏过程中动态光照切换
- Steamworks 集成 — 成就、排行榜、统计数据(可选;无 SDK 时自动进入离线模式)
- 手势模式(实验性) — 通过摄像头手势控制恐龙:竖起大拇指跳跃,向下竖大拇指蹲下
- 头控模式(实验性) — 解放双手,通过头部姿态控制恐龙:抬头跳跃、低头蹲下、左右转头触发临时速度变化
- 专业级深色 UI — 动态渐变背景、毛玻璃 HUD 、流畅过渡动画
技术栈
| 层级 | 技术 |
|---|---|
| 运行时 | Electron 28 |
| 游戏引擎 | Phaser 3.90 |
| UI 框架 | React 19 |
| 状态管理 | Zustand 5 |
| 语言 | TypeScript 5.7 |
| 构建工具 | Vite 6 + electron-vite 5 |
| 打包发布 | electron-builder 24 |
项目结构
src/
├── main/ # Electron 主进程
│ ├── index.ts
│ └── steam.ts # Steamworks SDK 集成
├── preload/ # 预加载脚本( Context Bridge )
│ └── index.ts
└── renderer/ # 渲染进程
└── src/
├── App.tsx # 根组件 & 事件绑定
├── main.tsx # React 入口
├── phaser-game.tsx # Phaser ↔ React 桥接
├── components/ # React UI 组件
│ ├── main-menu.tsx
│ ├── game-overlay.tsx
│ ├── game-over.tsx
│ ├── skin-selector.tsx
│ ├── shop.tsx
│ ├── settings.tsx
│ └── daily-challenge.tsx
├── stores/ # Zustand 状态仓库
│ ├── game-store.ts
│ ├── input-mode-store.ts
│ └── player-store.ts
├── hooks/
│ └── use-game-events.ts # Phaser ↔ React 事件钩子
├── game/
│ ├── main.ts # Phaser 游戏引导
│ ├── event-bus.ts # 跨框架事件总线
│ ├── types/ # 共享 TypeScript 类型 & 枚举
│ ├── assets/ # Chrome 精灵图资源
│ ├── scenes/ # Phaser 场景
│ │ ├── boot.ts
│ │ ├── preloader.ts
│ │ └── game-scene.ts
│ ├── objects/ # 游戏对象
│ │ └── dino.ts
│ ├── managers/ # 游戏子系统管理器
│ │ ├── background-manager.ts
│ │ ├── camera-source.ts
│ │ ├── difficulty-manager.ts
│ │ ├── ghost-manager.ts
│ │ ├── head-pose-source.ts
│ │ ├── ground-manager.ts
│ │ ├── input-manager.ts
│ │ ├── level-manager.ts
│ │ ├── obstacle-manager.ts
│ │ ├── power-up-manager.ts
│ │ └── score-manager.ts
│ ├── sprites/ # 程序化精灵生成
│ └── audio/ # 程序化音频生成
└── styles/
├── global.css # 设计令牌 & 基础样式
└── components.css # 组件样式
