张雪峰跑酷 · Zhang Xuefeng Parkour

一个用 Three.js + React + TypeScript 写的 3D 无尽跑酷小游戏：在一座会随距离从黄昏过渡到夜晚、黎明、白天的程序化都市里一路狂奔，吃 巧乐兹、喝 雪碧 拿分，躲开护栏、跑步机、高墙和横杆。短时间吃喝太多会 糖分爆表当场晕倒。

⚠️ 本游戏纯属虚构娱乐，角色与情节均为创作，请勿对号入座。

🎮 在线试玩

https://normal-ex.github.io/zxfrun/

（手机 / 平板 / 电脑浏览器均可；首次进入后点「开始跑酷」音乐才会响。）

操作

操作	键盘	触摸
换道	← → / A D	左右滑
跳跃	↑ / W / 空格	上滑 / 点按
滑铲	↓ / S	下滑
暂停	P / Esc	暂停按钮

障碍规则：护栏和跑步机 跳 过去 · 横杆 滑铲 钻过去 · 高墙必须 换道 躲开。

✨ 特性

• 真 3D 渲染：透视追尾相机、ACES 色调映射、PCF 软阴影、UnrealBloom 辉光、大气雾。
• 昼夜循环：随距离 黄昏 → 夜晚 → 黎明 → 白天，天空 / 雾 / 光照实时演变；夜晚下雨。
• 程序化城市：逐窗发光的建筑、路灯、行道树、带车灯的路边车流，随路面视差推进并循环复用。
• 角色动画：低多边形跑酷小人，自带 跑 / 跳 / 滑铲 / 换道倾身 / 撞毁瘫倒 动画，投真实阴影。
• 公平判定：基于「碰撞带 + 高度」的判定，跳跃 / 滑铲 / 换道都按直觉生效；刷怪保证始终有可通行路径。
• 手感：合成音效（跳 / 落 / 吃 / 撞 / 擦身）、相机抖动与 FOV 推拉、收集 / 扬尘 / 撞击粒子、擦身而过奖励。
• 系统：糖分槽机制、计分 / 距离 / 时速、暂停、死后原地复活、最高分本地存档。
• 自适应画质：帧率偏低时自动降级（关辉光 → 关阴影 → 降分辨率），照顾中低端设备。
• 响应式 + 触摸：全屏自适配，移动端滑动手势完整支持。
• 背景音乐为玩家提供的 public/bgm.mp3。

🛠 技术栈

• Three.js（WebGL 渲染）
• React + TypeScript（仅负责 HUD / 菜单等 DOM 层 UI）
• Vite（构建）
• lucide-react（图标）

渲染层与游戏逻辑解耦：src/three/ 负责 3D 场景，React 只画覆盖在上面的 UI。

🚀 本地开发

npm install
npm run dev      # 本地开发（热更新）
npm run build    # 类型检查 + 生产构建到 dist/
npm run preview  # 预览生产构建

📦 部署

推送到 main 即由 GitHub Actions 自动构建并发布到 GitHub Pages （工作流见 .github/workflows/deploy-pages.yml，Vite base 已设为 /zxfrun/）。

📁 项目结构

src/
  App.tsx                 # 挂载 3D 引擎、输入、音频、UI 状态
  index.css               # 全局样式 / HUD / 覆盖层
  game/
    types.ts              # 共享类型
    sound.ts              # Web Audio 合成音效
    sky.ts                # 昼夜预设与插值
  three/
    ThreeGame.ts          # 3D 引擎 + 游戏逻辑主体
    textures.ts           # 程序化贴图（建筑窗、路面、雪碧标、巧克力）
    props.ts              # 路灯 / 行道树 / 车辆模型
  components/             # HUD / 开始 / 暂停 / 结束 等 React 覆盖层
public/
  bgm.mp3                 # 背景音乐

🙏 致谢 / 声明

• 背景音乐由玩家提供。
• 游戏为个人娱乐 / 技术练习作品，与任何真实人物、品牌无官方关联；巧乐兹、雪碧等仅为玩梗指代，非商业用途。