Skip to content

About

剪纸手作风的单文件网页卡丁车游戏: 八章赛道 · 三台车 · 7 台 AI 对手, 下载 dist/paper-racing.html 双击即玩

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

卡通竞速 · Cartoon Racing

把赛车比赛装进一张木桌上的纸雕世界 —— 菜单是纸片拼贴童话书,章节是纸页上的微缩赛道,赛车是三张剪纸卡片。 纯浏览器、免登录、即开即玩,桌面键盘操作。

怎么玩

双击打开 dist/paper-racing.html(单文件,含 three.js 与全部素材,file:// 直接可用)。 打开就是发车向导,共两步:章节 → 车辆(← → 切换、Enter 下一步、Esc 上一步),选好点「出发」。

按键 作用
← → / A D 转向
↑ / W 加速
↓ / S 刹车 · 倒车
Esc / P 暂停
R 重新开始本场
M 静音开关
Enter / Esc 确认 / 返回

内容

  • 8 个章节 = 8 条赛道:每章一条按该章场景性格写的参数化路段脚本(直线 + 圆弧,自动闭合,不是测绘复刻)。八条环道的名字与走线都是虚构的,不影射现实赛车场。选章节时每张卡上画的就是这条赛道自己的路线图,右侧详情卡给出里程。八章从一开始就全部开放,不需要通关解锁。第三/五/六/七章的走线由「手绘顶点 + 内切圆弧」的轮廓法生成(tools/route.mjs,先在 shots/route_3_5_6_7.png 图纸上定稿,再落进 LAYOUTS),闭合由构造保证。
章节 赛道 走线性格 里程
第一章 暖谷环道 长直道 · 发夹弯 1.58 km
第二章 落霞湾环道(夜) 螺旋弯 · 高速 S 弯 1.27 km
第三章 蓝屿环道 长直道 · 海岸豆形 1.61 km
第四章 霓虹街环道(夜) 街道赛 · 超长直道 2.49 km
第五章 麦浪平原环道 双回环 · 窄走廊 2.05 km
第六章 暖金丘环道 蛇形三腿 · 双发夹 1.95 km
第七章 长风草原环道 长直道 · 大回环 2.44 km
第八章 晨雾峡环道 连续 S 弯 · 发夹 1.80 km
  • 3 台剪纸赛车 = 唯一的车性选择(车身色、加速与抓地上限都不同):
    • 赤羽号(加速型,#E4572E):起步与出弯最快,转向偏钝,弯前要早刹车。
    • 青石号(抓地型,#3D6EA8):抓地最稳,弯里最敢给油,代价是加速慢一拍。
    • 纸鸢号(均衡型,#6FA96B):加速与转向都不偏科,最好上手。
    • 玩家车按所选车辆上色,七台 AI 保留各自车手的车身色便于辨认。七台 AI 的车辆数值每场各自独立随机(加速 1.20-1.40 / 极速 1.05-1.15 / 抓地 1.20-1.35,碰撞质量固定 1,见 AI.aiAccel / aiSpd / aiGrip / aiMass,同种子可复现)。AI 极速 31.7-32.9 m/s,高于玩家三台车(29.7-30.6);过弯按 AI.cornerLat 12.5(≈1.27 g)估弯速。实测 AI 冠军比 1.4 g 的参考走线还快 2.6-6.2%(tools/ai_pace.mjs 可复现),想追上去得在弯里压榨得更狠。
  • 8 位剪纸动物车手只是外观:绒绒 / 肉桂 / 蹦萍 / 煤煤 / 煤球 / 枝枝 / 胡萝卜 / 墨墨。玩家每场随机抽一位(AI 分掉剩下七位,保证 8 台外观各不相同),结算表里玩家那一行名字固定为**「玩家」**。
  • 换章 = 重建赛道几何 + 换纸纹 / 配色 / 天空 / 光照(白天日轮,第二、四章是夜赛:月轮、夜光与更浓的雾)。
  • 比赛规则:8 车同场、3 圈决胜,厘秒计时,最佳单圈与本地纪录按「章节 × 车辆」分开保存;掉出纸面自动复位到最近安全点(圈数与计时不清零),卡死 3 秒自动复位。
  • 程序化音效(纸质引擎声 + 提示音)、四角 HUD(圈数与总时间 / 名次 / 纸质小地图)、结算印章与「刷新记录」、暂停与操作说明、本地纪录页。

目录结构

src/core/     物理与规则(纯逻辑,浏览器与 Node 共用)
  constants.js  冻结数值表:物理常数 / 三台车辆 / 八位车手(纯外观) / 八个章节
  track.js      八条虚构环道走线(路段脚本:直线 + 圆弧,自动闭合并按弧长归一)+ 高程剖面 + 等弧长采样 + 投影与安全点
  kart.js       单车物理:加速曲线 / 转向 / 草地 / 复位
  world.js      8 车世界:AI 走线、碰撞、圈数与名次、结算
src/render/   表现层(three.js)
  paper.js      程序化纸材质与贴图(纸纹、木纹、赛道、草地、天空、纸偶立绘)
  karts.js      纸偶赛车几何与动画(玩家车按所选车辆上色)
  scene.js      纸雕场景:纸带赛道、草地纸页、光照、装饰、相机
  hud.js        DOM 界面:撕纸排版(两步发车向导 / 章节演出 / 结算 / 暂停 / 操作说明 / 纪录)+ 四角 HUD 与小地图
  game.js       主循环、输入、状态机、存档、音效
src/shell.html  单文件外壳(样式 + #app + #diag)
tools/build.mjs 打包器:three + core + render → dist/paper-racing.html
tests/headless.test.mjs  无头断言(57 项)

开发

环境:Node 20+,只用标准库,没有 npm 依赖(three.js 已放在 vendor/)。

node tools/build.mjs          # 打包出 dist/paper-racing.html
node tests/headless.test.mjs  # 跑 57 项物理/规则断言(退出码即结果)

调试用的 URL 片段:#auto 直接进比赛(自动驾驶),#auto&ch=ch4&warp=60 跳到第四章并快进 60 秒,#auto&diag 打开底部诊断行,#noin 跳过章节演出贴纸(截图用),#select 打开发车向导,#select&step=N 直接打开向导第 N 步,#flow 自动走完两步向导并把结果写进诊断行的 data-flow 属性,#flow&ch=ch5 从第 5 章开始走向导(换章验证),#help 操作说明,#records 本地纪录页,#pause(配合 #auto&warp=30)停在暂停屏,#intro 冻结章节演出画面。

美术(全部程序化生成,无外部素材)

整体参照 Kağıt Kart 的画风:把整场比赛摆在一张木桌上,所有东西都是剪纸 / 纸雕。菜单时纸雕世界(草地、远山、纸房子)摆在木桌正中,发车向导的纸卡叠在桌面上;开赛后桌面收起、场景展开成赛道页。配色偏暖色高饱和:赛道纸纹上罩了一层暖罩,草地与远山按章节换成暖绿 / 暖黄 / 暖橙。

  • 场景:纸带赛道 + 沙纸缓冲区 + 红白瓦楞纸路肩(只铺在弯道)+ 纸柱围栏 + 起点龙门架(canvas 横幅,单面朝向发车格)+ 四级看台与纸片观众 + 维修楼 + 剪纸小屋 + 三层平面剪影远山(带白雪山顶)+ 扁纸云 + 尖角剪纸日轮 / 月轮。看台与纸片房屋都正面朝向赛道(沿赛道法线推导朝向,别处照抄会看到背面)。
  • 植被:树与雏菊都是平面立牌(十字交叉的双面片,墨线描边、白瓣黄芯),沿赛道两侧成排,并保证离整条赛道有 8 m 以上余量避免压到路面;夜间统一压暗(树 ×0.44、花 ×0.50),看台与维修楼在夜里补一点自发光避免糊成一堵墙。
  • 纸世界:赛道外是同一张米色纸地面,不会露出虚空。夜章换成深蓝夜空、冷色纸山。
  • 界面:排版照搬 Kağıt Kart 的纸片拼贴语言 —— 左上撕纸横幅(小号红眉标 + 大红标题 + 微旋转)、左上黑色圆角返回方块、右上纸片小按钮、右缘竖排步骤条(当前项米色 + 橙色左条)、底部大撕纸卡(右上角红丝带 = 当前选中,图标 + 标题 + 描述 + 灰底小标签)、右下黑色键帽提示(Enter 确认 / Esc 返回)、页面底部居中撕纸标签。发车向导是两步:章节(4×2 网格,每张卡一张这条赛道的路线图 + 右侧详情卡与里程)→ 车辆(三张卡,图标取车辆色)。
  • 纸感细节:四角 HUD 是撕边纸卡 + 网点纹(halftone),面板挂和纸胶带,按钮下沿是锯齿撕口,键帽是黑色圆角块,倒计时数字是墨线描边贴纸,结算页第一名显示「冠军!」。CSS 全部内联在 dist 单文件里。
  • 所有贴图都用 canvas 现画(纸纹、木纹、赛道等高线、草地、天空渐变、纸偶立绘)。车手是"剪纸立绘"贴在司机位、始终朝向镜头。

转向约定:A / ← = 左转(逆时针)。物理里 heading 增大 = 左转,玩家输入、AI 走线、车身侧倾共用这一约定;steerFromKeys() 有专门的回归测试锁住"左右不反"。

已知边界

  • 只做单场比赛:大奖赛积分赛与计时挑战幽灵车未实现,相关模式入口与代码已移除。
  • 没有道具、漂移与跳跃:2026-10 改版把道具系统、空格漂移蓄力/跳跃与车手五维数值整套删除,车性只由所选车辆决定。
  • 触屏与手柄为后续版本;向后看视角(C)在精简版中未实现。
  • 画面为程序化拼装的低模纸艺风,不含手工美术资源。

仓库

  • GitHub:https://github.com/astron-42/Cartoon-Racing
  • 只想玩:下载仓库里的 dist/paper-racing.html,双击用浏览器打开即可(单文件,含 three.js 与全部素材,不需要服务器)。
  • 许可证:MIT —— 可自由使用、修改、再分发,保留版权与许可声明即可。
  • 第三方组件与画风来源见 THIRD_PARTY.md。
  • shots/(开发期截图)与 ref/(收集来的参考素材)不入库,见 .gitignore。

About

剪纸手作风的单文件网页卡丁车游戏: 八章赛道 · 三台车 · 7 台 AI 对手, 下载 dist/paper-racing.html 双击即玩

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages