基于 HTML5 + Three.js + Web Audio API 开发的高性能 3D 赛博朋克无限跑酷游戏。融合了《地铁跑酷》的三道高速换道与《神庙逃亡》的 90° 弯道转折及起伏坡道玩法。
- 🏙️ 未来赛博视觉:黑色镜面地面、发光霓虹护栏(Neon Cyan & Magenta)、全息警示墙、复古扫描线与超光速粒子流。
- 🕹️ 双重经典玩法融合:
- 三道平滑位移:左、中、右三道平滑插值换道。
- 90° 大转弯系统:进入转弯提示区,按下方向键触发摄像机与世界朝向 90 度平滑转向。
- 立体起伏坡道:包含上下坡与全息发光拱门。
- 🤖 多角色 3D 展示台:
- ⚡ CYBER-NINJA (疾风忍者):轻量机甲,超强滞空跳跃。
- 🛡️ MECHA-TITAN (重装机兵):重型机甲,长距离滑铲,自带范围自动吸金力场。
- 🚀 NEON-HACKER (霓虹黑客):超频芯片,最高初始速度,全局金币与积分 1.5 倍。
- 🔊 Web Audio 动态加速音效:
- 纯程序化实时音频合成,无需外部庞大音频包。
- 随角色时速(KM/H)上升,实时动态提升离子引擎轰鸣、高速风噪,并加速 Synthwave BGM 节拍。
- 🚀 极速冲刺 (Nitro Overdrive):
- 拾取氮气球进入无敌暴走,摄像机 FOV 动态拉伸,光速粒子爆发,撞碎沿途障碍。
- 💾 本地数据持久化:
- 自动持久化保存历史最高分与收集金币总数。
| 按键 | 动作 | 说明 |
|---|---|---|
A / D 或 ← / → |
换道 / 90° 转弯 | 左右切换三道;在转弯区触发 90 度大转折 |
W / ↑ / Space |
高空跃迁 (跳跃) | 越过低矮激光栅栏与深渊 |
S / ↓ |
高速滑铲 | 钻过高空全息横梁 / 空中快速下砸落地 |
Esc / P |
暂停 / 继续 | 打开休眠暂停菜单 |
📱 移动端/触控板:支持屏幕上下左右滑动手势(Swipe)。
游戏采用原生 ES6 模块,无需任何打包构建工具,启动任意静态 Web 服务即可秒开:
# 克隆仓库
git clone https://github.com/AllenCoder/cyber-runner-3d.git
cd cyber-runner-3d
# 启动本地服务 (Python 3)
python3 -m http.server 8080然后在 Chrome 等现代浏览器中访问:
👉 http://localhost:8080
cyber-runner-3d/
├── index.html # 游戏主页面、3D 画布与 HUD UI 结构
├── css/
│ └── style.css # 赛博朋克霓虹 UI 样式与扫描线滤镜
└── js/
├── main.js # 游戏主入口、输入监听与 60FPS 渲染循环
├── Core/
│ ├── GameManager.js # 游戏状态机(菜单/战斗/暂停/结算)与碰撞调度
│ └── SaveManager.js # 本地 LocalStorage 存档
├── Engine/
│ └── SceneManager.js # Three.js 场景构建、赛博雾效、动态 FOV 与光速粒子
├── Player/
│ ├── CharacterData.js # 3位赛博角色数据与 3D 机甲模型生成器
│ └── PlayerController.js# 三道移动、跳跃、滑铲、90度直角转弯动力学
├── Track/
│ ├── TrackChunk.js # 直道、起伏坡道、90度转弯块与全息拱门
│ └── TrackManager.js # 无限赛道动态生成与视距外循环回收
├── Obstacles/
│ ├── Obstacle.js # 低位激光、高位横梁、全阻挡墙与悬浮无人机
│ └── Pickup.js # 发光金币、氮气加速球 (Nitro Boost)、双倍积分
├── Speed/
│ └── SpeedManager.js # 基础速度递增、冲刺爆发与时速计算 (KM/H)
├── Audio/
│ └── SoundManager.js # Web Audio API 离子引擎音浪、风噪与自适应 BGM
└── UI/
└── UIManager.js # 3D 角色选择台、实时仪表盘、转弯警告与结算
本项目采用 MIT License 开源协议。