404-跑跑卡丁车/版本历史 - 码桶 大佬论坛

码桶

发现社区成员的开源项目
李羡鱼 /
404-跑跑卡丁车
公开

版本历史

7 次提交
删除 screenshot.png李羡鱼 提交于 2026-10-25 14:105de7981更新项目文件李羡鱼 提交于 2026-10-25 14:093c05635更新 README.md李羡鱼 提交于 2026-10-25 14:08397de74更新 README.md李羡鱼 提交于 2026-10-25 11:43a25236d更新 README.md李羡鱼 提交于 2026-10-25 11:417815165更新项目文件李羡鱼 提交于 2026-10-25 11:37b7d93d7创建仓库李羡鱼 提交于 2026-10-25 11:374273540

提交详情

7815165
提交编号7815165d62f50d6edc1bc84bcd970473973d8800
提交作者李羡鱼<codebucket@localhost>
提交时间2026-10-25 11:41:33 +0800
更新说明更新 README.md

文件变更 1 个文件

文件新增删除
README.md+103-103

文件差异 逐行查看本次提交的修改

README.md+103-103
@@ -1,103 +1,103 @@
1-# 404 · 赛道模式（Kart Racing 404 Page）
2-
3-404 页面做成卡丁车小游戏：环形赛道、可驾驶卡丁车、会跳转页面的道具箱、冲线自动进入下一关，还有氮气加速。
4-
5-![页面截图](screenshot.png)
6-
7-纯前端单文件实现，无构建步骤、无图片素材（场景全部由 Three.js 程序化生成），下载即可运行。
8-
9-
10-## 功能特性
11-
12-- **白天赛道场景**：蓝天渐变、阳光与实时阴影、草地、树林、云朵，第三人称追车镜头。
13-- **专业赛道**：闭合环道、沥青路面、红白路肩、中线虚线、格子起跑线，以及「404 GRAND PRIX」起终点龙门架。
14-- **卡丁车**：车身/尾翼/方向盘/车手头盔，车轮随速度转动、转向时车身侧倾；冲出赛道会明显降速。
15-- **道具箱 = 跳转页面**：赛道上悬浮 4 个问号道具箱，靠近后底部弹出提示，按 `ENTER`（或直接点击提示卡）淡出并跳转到对应页面。
16-- **关卡循环**：每关 2 圈，冲过终点弹出结算并自动进入下一关；**复用同一条赛道**，仅循环更换天空/草地色调、树叶颜色、路边旗帜颜色和道具分布。
17-- **氮气加速**：右下角圆形氮气按钮（也可按 `SPACE`）。跑动自动蓄能，满 40% 可释放一次，约 1.5 秒推背加速，带尾焰、速度线和提示。
18-- **HUD 与雷达**：关卡 / 圈数 / 用时、速度表、圆形小地图（赛道、道具、车辆朝向）。
19-
20-## 快速开始
21-
22-直接双击 `404.html` 即可游玩（需要联网加载 Three.js CDN）。
23-
24-更推荐在本地起一个静态服务器，避免个别浏览器对 `file://` 的限制：
25-
26-```bash
27-# Python 3
28-python -m http.server 8080
29-# 然后访问 http://localhost:8080/404.html
30-```
31-
32-## 操作说明
33-
34-| 按键 / 操作 | 功能 |
35-| --- | --- |
36-| `W` | 加速 |
37-| `S` | 刹车 / 倒车 |
38-| `A` / `D` | 左 / 右转向 |
39-| `SPACE` 或点击右下角按钮 | 氮气加速 |
40-| `ENTER` 或点击道具提示 | 打开当前道具对应的页面 |
41-
42-## 自定义配置
43-
44-所有可调内容都在 `404.html` 顶部的 `CONFIG` 与 `PALETTES` 中：
45-
46-```js
47-const CONFIG = {
48- destinations: [
49- { text: '主页', url: 'https://bok.wang/', color: '#22c55e' },
50- { text: '博客', url: 'https://lxlss.com', color: '#3b82f6' },
51- { text: 'GitHub', url: 'https://github.com/9llll', color: '#a855f7' },
52- { text: '联系我', url: 'https://1c1.top/', color: '#f59e0b' }
53- ],
54- lapsPerLevel: 2, // 每关圈数
55- roadHalfWidth: 7, // 赛道半宽
56- samples: 720 // 赛道采样点
57-};
58-```
59-
60-- **换跳转目标**：改 `destinations` 的 `text` / `url` / `color` 即可，道具箱数量自动跟随数组长度。
61-- **改圈数**：`lapsPerLevel`。
62-- **改配色**：`PALETTES` 数组，按关卡依次循环（天空、雾、草地、路面颜色、赛道名）。
63-- **换赛道形状**：`buildTrack()` 里的随机种子 `mulberry32(20240608)` 与 `nodeCount`，改动后即可得到新的环道（建议半径保持在 70–130 之间，避免赛道自交）。
64-- **调氮气手感**：`NITRO_MAX`（上限）、`NITRO_COST`（单次消耗）、`tryBoost()` 中的持续时间，以及 `updatePhysics()` 里的加速量与最高速。
65-- **改车漆**：`createCar()` 中的 `paint` / `yellow` 颜色。
66-
67-## 部署到 GitHub Pages
68-
69-1. 将 `404.html`、`screenshot.png`、`README.md` 推送到仓库根目录；
70-2. 在仓库 **Settings → Pages** 中选择分支并保存；
71-3. 启用后，访问任何不存在的路径时，GitHub Pages 会自动返回根目录的 `404.html`，这正好是一个 404 页面；
72-4. 也可直接访问 `https://<用户名>.github.io/<仓库名>/404.html` 当作普通单页。
73-
74-> 若希望把游戏作为首页，把 `404.html` 复制/重命名为 `index.html` 即可。
75-
76-## 项目结构
77-
78-```
79-.
80-├── 404.html # 完整游戏（HTML + CSS + 原生 JS + Three.js 场景）
81-├── screenshot.png # README 截图
82-└── README.md
83-```
84-
85-## 技术说明
86-
87-- **Three.js r160**（CDN `unpkg`）负责 3D 渲染：程序化生成赛道网格、路肩、树木、道具箱、卡丁车与光照阴影。
88-- 赛道用 `CatmullRomCurve3` 闭合曲线采样，按弧长均匀取点后生成左右边带网格；车辆进度通过最近采样点计算，用于判定圈数与终点。
89-- 小地图使用 Canvas 2D 实时绘制；HUD 使用 HTML/CSS，无 UI 框架。
90-- 道具箱、路面、草皮、旗帜等贴图均由 Canvas 动态绘制，仓库不依赖任何外部图片。
91-- 页面以 60 FPS 为目标，阴影贴图 2048，像素比上限 2。
92-
93-## 兼容性
94-
95-- 需要支持 WebGL 的现代浏览器（Chrome / Edge / Firefox / Safari 均可）。
96-- 操作面向桌面键盘；移动端可以点击氮气按钮，但没有触屏方向控制。
97-- 首次加载需要联网获取 Three.js；若 CDN 不可达，页面会显示「引擎加载失败」。
98-
99-## 说明
100-
101-- 本项目为个人 404 页面小游戏，玩法致敬跑跑卡丁车类竞速游戏，未使用任何第三方美术素材。
102-- 仓库未附带开源协议：MIT。
1+# 404 · 赛道模式（Kart Racing 404 Page）
2+
3+404 页面做成卡丁车小游戏：环形赛道、可驾驶卡丁车、会跳转页面的道具箱、冲线自动进入下一关，还有氮气加速。
4+
5+![页面截图](https://file.icve.com.cn/file_doc/1792899674124-eci4il.png)
6+
7+纯前端单文件实现，无构建步骤、无图片素材（场景全部由 Three.js 程序化生成），下载即可运行。
8+
9+---
10+
11+## 功能特性
12+
13+- **白天赛道场景**：蓝天渐变、阳光与实时阴影、草地、树林、云朵，第三人称追车镜头。
14+- **专业赛道**：闭合环道、沥青路面、红白路肩、中线虚线、格子起跑线，以及「404 GRAND PRIX」起终点龙门架。
15+- **卡丁车**：车身/尾翼/方向盘/车手头盔，车轮随速度转动、转向时车身侧倾；冲出赛道会明显降速。
16+- **道具箱 = 跳转页面**：赛道上悬浮 4 个问号道具箱，靠近后底部弹出提示，按 `ENTER`（或直接点击提示卡）淡出并跳转到对应页面。
17+- **关卡循环**：每关 2 圈，冲过终点弹出结算并自动进入下一关；**复用同一条赛道**，仅循环更换天空/草地色调、树叶颜色、路边旗帜颜色和道具分布。
18+- **氮气加速**：右下角圆形氮气按钮（也可按 `SPACE`）。跑动自动蓄能，满 40% 可释放一次，约 1.5 秒推背加速，带尾焰、速度线和提示。
19+- **HUD 与雷达**：关卡 / 圈数 / 用时、速度表、圆形小地图（赛道、道具、车辆朝向）。
20+
21+## 快速开始
22+
23+直接双击 `404.html` 即可游玩（需要联网加载 Three.js CDN）。
24+
25+更推荐在本地起一个静态服务器，避免个别浏览器对 `file://` 的限制：
26+
27+```bash
28+# Python 3
29+python -m http.server 8080
30+# 然后访问 http://localhost:8080/404.html
31+```
32+
33+## 操作说明
34+
35+| 按键 / 操作 | 功能 |
36+| --- | --- |
37+| `W` | 加速 |
38+| `S` | 刹车 / 倒车 |
39+| `A` / `D` | 左 / 右转向 |
40+| `SPACE` 或点击右下角按钮 | 氮气加速 |
41+| `ENTER` 或点击道具提示 | 打开当前道具对应的页面 |
42+
43+## 自定义配置
44+
45+所有可调内容都在 `404.html` 顶部的 `CONFIG` 与 `PALETTES` 中：
46+
47+```js
48+const CONFIG = {
49+ destinations: [
50+ { text: '主页', url: 'https://bok.wang/', color: '#22c55e' },
51+ { text: '博客', url: 'https://lxlss.com', color: '#3b82f6' },
52+ { text: 'GitHub', url: 'https://github.com/9llll', color: '#a855f7' },
53+ { text: '联系我', url: 'https://1c1.top/', color: '#f59e0b' }
54+ ],
55+ lapsPerLevel: 2, // 每关圈数
56+ roadHalfWidth: 7, // 赛道半宽
57+ samples: 720 // 赛道采样点
58+};
59+```
60+
61+- **换跳转目标**：改 `destinations` 的 `text` / `url` / `color` 即可，道具箱数量自动跟随数组长度。
62+- **改圈数**：`lapsPerLevel`。
63+- **改配色**：`PALETTES` 数组，按关卡依次循环（天空、雾、草地、路面颜色、赛道名）。
64+- **换赛道形状**：`buildTrack()` 里的随机种子 `mulberry32(20240608)` 与 `nodeCount`，改动后即可得到新的环道（建议半径保持在 70–130 之间，避免赛道自交）。
65+- **调氮气手感**：`NITRO_MAX`（上限）、`NITRO_COST`（单次消耗）、`tryBoost()` 中的持续时间，以及 `updatePhysics()` 里的加速量与最高速。
66+- **改车漆**：`createCar()` 中的 `paint` / `yellow` 颜色。
67+
68+## 部署到 GitHub Pages
69+
70+1. 将 `404.html`、`screenshot.png`、`README.md` 推送到仓库根目录；
71+2. 在仓库 **Settings → Pages** 中选择分支并保存；
72+3. 启用后，访问任何不存在的路径时，GitHub Pages 会自动返回根目录的 `404.html`，这正好是一个 404 页面；
73+4. 也可直接访问 `https://<用户名>.github.io/<仓库名>/404.html` 当作普通单页。
74+
75+> 若希望把游戏作为首页，把 `404.html` 复制/重命名为 `index.html` 即可。
76+
77+## 项目结构
78+
79+```
80+.
81+├── 404.html # 完整游戏（HTML + CSS + 原生 JS + Three.js 场景）
82+├── screenshot.png # README 截图
83+└── README.md
84+```
85+
86+## 技术说明
87+
88+- **Three.js r160**（CDN `unpkg`）负责 3D 渲染：程序化生成赛道网格、路肩、树木、道具箱、卡丁车与光照阴影。
89+- 赛道用 `CatmullRomCurve3` 闭合曲线采样，按弧长均匀取点后生成左右边带网格；车辆进度通过最近采样点计算，用于判定圈数与终点。
90+- 小地图使用 Canvas 2D 实时绘制；HUD 使用 HTML/CSS，无 UI 框架。
91+- 道具箱、路面、草皮、旗帜等贴图均由 Canvas 动态绘制，仓库不依赖任何外部图片。
92+- 页面以 60 FPS 为目标，阴影贴图 2048，像素比上限 2。
93+
94+## 兼容性
95+
96+- 需要支持 WebGL 的现代浏览器（Chrome / Edge / Firefox / Safari 均可）。
97+- 操作面向桌面键盘；移动端可以点击氮气按钮，但没有触屏方向控制。
98+- 首次加载需要联网获取 Three.js；若 CDN 不可达，页面会显示「引擎加载失败」。
99+
100+## 说明
101+
102+- 本项目为个人 404 页面小游戏，玩法致敬跑跑卡丁车类竞速游戏，未使用任何第三方美术素材。
103+- 仓库未附带开源协议：MIT。