404-跑跑卡丁车

# 404 · 赛道模式（Kart Racing 404 Page）

404 页面做成卡丁车小游戏：环形赛道、可驾驶卡丁车、会跳转页面的道具箱、冲线自动进入下一关，还有氮气加速。



纯前端单文件实现，无构建步骤、无图片素材（场景全部由 Three.js 程序化生成），下载即可运行。

---

## 功能特性

- **白天赛道场景**：蓝天渐变、阳光与实时阴影、草地、树林、云朵，第三人称追车镜头。
- **专业赛道**：闭合环道、沥青路面、红白路肩、中线虚线、格子起跑线，以及「404 GRAND PRIX」起终点龙门架。
- **卡丁车**：车身/尾翼/方向盘/车手头盔，车轮随速度转动、转向时车身侧倾；冲出赛道会明显降速。
- **道具箱 = 跳转页面**：赛道上悬浮 4 个问号道具箱，靠近后底部弹出提示，按 `ENTER`（或直接点击提示卡）淡出并跳转到对应页面。
- **关卡循环**：每关 2 圈，冲过终点弹出结算并自动进入下一关；**复用同一条赛道**，仅循环更换天空/草地色调、树叶颜色、路边旗帜颜色和道具分布。
- **氮气加速**：右下角圆形氮气按钮（也可按 `SPACE`）。跑动自动蓄能，满 40% 可释放一次，约 1.5 秒推背加速，带尾焰、速度线和提示。
- **HUD 与雷达**：关卡 / 圈数 / 用时、速度表、圆形小地图（赛道、道具、车辆朝向）。

## 快速开始

直接双击 `404.html` 即可游玩（需要联网加载 Three.js CDN）。

更推荐在本地起一个静态服务器，避免个别浏览器对 `file://` 的限制：

```bash
# Python 3
python -m http.server 8080
# 然后访问 http://localhost:8080/404.html
```

## 操作说明

| 按键 / 操作 | 功能 |
| --- | --- |
| `W` | 加速 |
| `S` | 刹车 / 倒车 |
| `A` / `D` | 左 / 右转向 |
| `SPACE` 或点击右下角按钮 | 氮气加速 |
| `ENTER` 或点击道具提示 | 打开当前道具对应的页面 |

## 自定义配置

所有可调内容都在 `404.html` 顶部的 `CONFIG` 与 `PALETTES` 中：

```js
const CONFIG = {
    destinations: [
        { text: '主页',   url: 'https://3x3.top',        color: '#22c55e' },
        { text: '博客',   url: 'https://3x3.top',        color: '#3b82f6' },
        { text: 'GitHub', url: 'https://3x3.top', color: '#a855f7' },
        { text: '联系我', url: 'https://3x3.top',         color: '#f59e0b' }
    ],
    lapsPerLevel: 2,   // 每关圈数
    roadHalfWidth: 7,  // 赛道半宽
    samples: 720       // 赛道采样点
};
```

- **换跳转目标**：改 `destinations` 的 `text` / `url` / `color` 即可，道具箱数量自动跟随数组长度。
- **改圈数**：`lapsPerLevel`。
- **改配色**：`PALETTES` 数组，按关卡依次循环（天空、雾、草地、路面颜色、赛道名）。
- **换赛道形状**：`buildTrack()` 里的随机种子 `mulberry32(20240608)` 与 `nodeCount`，改动后即可得到新的环道（建议半径保持在 70–130 之间，避免赛道自交）。
- **调氮气手感**：`NITRO_MAX`（上限）、`NITRO_COST`（单次消耗）、`tryBoost()` 中的持续时间，以及 `updatePhysics()` 里的加速量与最高速。
- **改车漆**：`createCar()` 中的 `paint` / `yellow` 颜色。

## 部署到 GitHub Pages

1. 将 `404.html`、`screenshot.png`、`README.md` 推送到仓库根目录；
2. 在仓库 **Settings → Pages** 中选择分支并保存；
3. 启用后，访问任何不存在的路径时，GitHub Pages 会自动返回根目录的 `404.html`，这正好是一个 404 页面；
4. 也可直接访问 `https://<用户名>.github.io/<仓库名>/404.html` 当作普通单页。

> 若希望把游戏作为首页，把 `404.html` 复制/重命名为 `index.html` 即可。

## 项目结构

```
.
├── 404.html        # 完整游戏（HTML + CSS + 原生 JS + Three.js 场景）
├── screenshot.png  # README 截图
└── README.md
```

## 技术说明

- **Three.js r160**（CDN `unpkg`）负责 3D 渲染：程序化生成赛道网格、路肩、树木、道具箱、卡丁车与光照阴影。
- 赛道用 `CatmullRomCurve3` 闭合曲线采样，按弧长均匀取点后生成左右边带网格；车辆进度通过最近采样点计算，用于判定圈数与终点。
- 小地图使用 Canvas 2D 实时绘制；HUD 使用 HTML/CSS，无 UI 框架。
- 道具箱、路面、草皮、旗帜等贴图均由 Canvas 动态绘制，仓库不依赖任何外部图片。
- 页面以 60 FPS 为目标，阴影贴图 2048，像素比上限 2。

## 兼容性

- 需要支持 WebGL 的现代浏览器（Chrome / Edge / Firefox / Safari 均可）。
- 操作面向桌面键盘；移动端可以点击氮气按钮，但没有触屏方向控制。
- 首次加载需要联网获取 Three.js；若 CDN 不可达，页面会显示「引擎加载失败」。

## 说明

- 本项目为个人 404 页面小游戏，玩法致敬跑跑卡丁车类竞速游戏，未使用任何第三方美术素材。
- 仓库未附带开源协议：MIT。