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:// 的限制：

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

操作说明

自定义配置

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

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。