Mini Grand Prix：直接在浏览器里跑的卡通方程式大奖赛

Mini Grand Prix直接在浏览器里跑的卡通方程式大奖赛24 条赛道。6 辆车同场。一圈排位 三圈正赛。零安装、零依赖、零构建 —— 点开链接就能开赛。这篇文章要介绍我的开源项目Mini Grand Prix—— 一个用原生 HTML、JavaScript 和 Canvas 2D 打造的方程式策略竞速游戏。▶ 立即试玩https://xhhdaxx.github.io/Mini-Grand-Prix/ GitHubhttps://github.com/xhhdaxx/Mini-Grand-Prix 文章目录一、它是什么二、核心数据三、六大核心特色四、视觉一览五、2026 赛历24 站 6 支虚构车队六、每一圈都是一次决策七、3 分钟跑起来八、参与贡献与联系作者 CSDN / 博客园读者增补段项目定位与故事 三平台发布提示一、它是什么Mini Grand Prix是一台纯前端的方程式策略竞速游戏。一句话定义3D 地球选站 → 调校赛车 → 一圈排位 → 三圈正赛 → 积分与下一站你和 5 辆 AI 赛车同场争夺排名同时管理轮胎配方、温度、磨损、ERS 电量、动态天气和进站窗口。速度当然重要但真正决定方格旗落下时排名的往往是下一个弯、下一片雨云、下一次进站决策。三种玩法模式模式适合场景备注大奖赛周末主线玩法排位 正赛积分累计到 24 站生涯⏱️单人计时挑战练车、刷圈一圈计时记录最佳圈速手机手柄分屏对决朋友来家里局域网扫码连接两台手机P1 / P2 同屏对决完全开源、MIT 协议项目地址https://github.com/xhhdaxx/Mini-Grand-Prix在线 Demohttps://xhhdaxx.github.io/Mini-Grand-Prix/邮件联系xhhdaxxgmail.com二、核心数据维度数值支持语言简体中文 / English运行时切换赛道数量24 条覆盖亚太 / 欧洲 / 美洲 / 中东车队数量6 支全部虚构性能倾向各异同场赛车6 辆玩家 5 辆 AI 公平对抗玩法模式大奖赛周末 / 单人计时 / 手机双人分屏轮胎配方5 种软、中性、硬、半雨、全雨天气类型晴 / 阴 / 雨 / 可预报的动态天气一句话亮点纯前端、零安装、零账号 —— 浏览器原生 Canvas 2D点开链接就能开赛。三、六大核心特色️ 1. 六车同场 AI 竞速你不是一个人在跑圈。5 辆 AI 赛车和你争夺每一个弯道它们和你共享同一套车辆、轮胎、ERS、维修区规则—— 不开挂、不读档公平对抗。关键设计AI 难度参数只调目标圈速和激进度物理参数最高速度、抓地力、轮胎磨损速率所有车完全一致。你看到 AI 第 2 圈进站换了硬胎就知道它最后一圈会更耐用但单圈更慢 —— 策略博弈完全成立。 2. 3D 地球手工选站主菜单右侧是一颗可拖动旋转的3D 地球每条赛道用真实经纬度标记在地球上。从上海到拉斯维加斯从摩纳哥到亚斯码头 —— 24 条赛道覆盖五大洲。实现细节地球陆地数据来自开源的Natural EarthPublic Domain用 Canvas 2D 球面投影 自定义裁剪渲染不依赖 WebGL / Three.js。⚡ 3. ERS能量回收系统按Space主动放电100% 电量可放电约 5 秒制动时回收能量中等制动力回收效率最高锁胎、湿地、满电状态会影响或停止回收。每一次按下 Space都是在做现在用还是留到直道末尾的策略决策。 4. 完整轮胎模型五种配方软胎、中性胎、硬胎、半雨胎、全雨胎。每种配方都有自己的温度窗口、磨损曲线和湿地适配。正赛强制至少进站换胎一次同配方换新也算未完成则完赛加罚 20 秒。️ 5. 动态天气与预报晴天、阴天、降雨以及可提前预判的动态天气。预报会告诉你雨云还有 N 圈到达赛道但要不要提前换雨胎 —— 取决于你当前的名次、轮胎状态和风险偏好。 6. 完整维修区系统每条赛道都有独立的 PIT IN / PIT OUT 路线6 支车队互不重叠的 P 房限速区首个 P 房前 30 米到最后一个 P 房后 30 米以及安全释放规则。按P请求进站进 P 房后按1-5选择下次换什么胎。更多细节抢跑处罚、黄旗下超车处罚、碰撞责任处罚、累计越界处罚、HUD速度/挡位/转速/圈速/轮胎/天气/ERS/排名/赛道图/进站引导…… 想说真的太多了建议直接上手体验。四、视觉一览主菜单与选站主菜单 3D 地球赛道详情比赛准备比赛设置赛车调校生涯与规则生涯与排行榜完整规则 手机手柄界面 赛道实录 GIF点击可看完整视频开始上海弯道迈阿密ERS 加速奥地利换胎巴塞罗那AI 对战卢赛尔AI 对战亚斯码头五、2026 赛历24 站 6 支虚构车队2026 赛历横跨亚太、欧洲、美洲与中东四大区。所有赛道均为根据现实地理走向手工制作的简化艺术参考并非测绘复制 —— 弯道数量、半径、长度与现实布局存在差异。 24 条赛道完整列表#分站赛道布局弯数长度地区1 澳大利亚阿尔伯特公园145.278 km亚太2 上海上海165.451 km亚太3 巴林萨基尔155.412 km中东4 吉达吉达276.174 km中东5 迈阿密迈阿密195.412 km美洲6 加拿大蒙特利尔144.361 km美洲7 摩纳哥蒙特卡洛193.337 km欧洲8 西班牙巴塞罗那-加泰罗尼亚164.675 km欧洲9 奥地利施皮尔贝格104.318 km欧洲10 英国银石185.891 km欧洲11 德国霍肯海姆174.574 km欧洲12 比利时斯帕-弗朗科尔尚207.004 km欧洲13 匈牙利亨格罗林144.381 km欧洲14 荷兰赞德福特144.259 km欧洲15 意大利蒙扎115.793 km欧洲16 阿塞拜疆巴库206.003 km中东17 马来西亚雪邦155.543 km亚太18 新加坡滨海湾235.063 km亚太19 奥斯汀奥斯汀205.513 km美洲20 墨西哥墨西哥城174.304 km美洲21 巴西因特拉格斯154.309 km美洲22 拉斯维加斯拉斯维加斯大道176.201 km美洲23 卡塔尔卢赛尔165.419 km中东24 阿布扎比亚斯码头165.281 km中东几个有趣的数据弯数最少 奥地利10 弯最多 吉达27 弯最长 比利时斯帕7.004 km最短 摩纳哥蒙特卡洛3.337 km️ 6 支虚构车队车队车号性能倾向Vector Cobalt12平衡、易上手Apex Saffron23直道速度Helix Indigo36弯道表现Orbit Vermilion17ERS 回收Pulse Teal88综合动力Prism Onyx⚫6稳定性⚠️版权声明所有车队、车号、涂装均为虚构内容。本项目与 Formula 1、FIA 或任何现实赛事、车队、车手、车辆制造商、赛道运营方均无隶属、授权、赞助或背书关系。六、每一圈都是一次决策这个游戏的设计哲学是“规则足够丰富但操作仍然直观”。每一圈你都在回答这些问题决策点你需要权衡的⚡我现在该放电吗ERS 只能持续数秒之后需要通过制动回收并等待冷却️雨还没下要提前进站吗预报会给你信息但赛道位置和轮胎状态才决定答案再撑一圈还是保住轮胎温度与磨损会直接改变抓地力和赛车表现要快也要守规则。黄旗、越界、碰撞责任和强制换胎都会影响最终成绩现在进站还是再拖一圈早进站 新胎更快但被堵在车流里晚进站 旧胎但出站空旷速度很重要但真正决定方格旗落下时排名的是策略。七、3 分钟跑起来环境要求Node.js 18现代桌面浏览器Chrome / Edge / Firefox / Safari手机手柄模式需要电脑和手机在同一局域网方式一直接在线试玩推荐第一次点击直接玩https://xhhdaxx.github.io/Mini-Grand-Prix/不需要安装任何东西。键盘模式下主线玩法排位 正赛 计时挑战 24 站生涯100% 可用。方式二本地运行完整功能含手机手柄gitclone https://github.com/xhhdaxx/Mini-Grand-Prix.gitcdMini-Grand-Prixnpminstall# 纯键盘模式最简npmrun start:keyboard# 键盘 手机手柄模式启用 WebSocket、二维码、双人入口npmrun start:gamepad浏览器打开 http://localhost:8080/ 即可。⚠️不要直接双击index.html。浏览器会阻止file://页面加载 ES Module必须通过本地 HTTP 服务启动。连接手机当手柄电脑和手机连同一个 Wi-Fi或电脑连手机热点电脑端npm run start:gamepad用手机扫描游戏页面显示的P1 / P2 二维码手机屏幕变成手柄可单独用 P1也可双人 P1 P2操作速查按键功能按键功能W加速D制动←/→转向X倒车SpaceERS 放电P请求 / 取消进站1–5选择下次进站轮胎S在所属 P 房急停Esc暂停R结算后重新开始自动速度保持默认开启松开W后赛车保持当前速度可在赛车设置中关闭。八、参与贡献与联系作者 欢迎这样参与⭐Star 项目—— 让更多人看到它Fork 并贡献—— 改 AI 策略、加新赛道、优化 HUD、做翻译分享给喜欢赛车或前端的朋友提 Issue—— 反馈 bug、提想法、聊设计 适合贡献的方向改善 AI 的超车、防守与雨战策略优化 Canvas 性能、窄屏 HUD 和可访问性设计符合几何规范的参考赛道补充物理、策略、存档容错、本地化与浏览器流程测试改善文档、翻译或新手引导 联系方式入口地址 GitHub 仓库github.com/xhhdaxx/Mini-Grand-Prix 在线 Demoxhhdaxx.github.io/Mini-Grand-Prix 完整实录视频GitHub Releasegameplay-v1 产品需求文档docs/prd.md️ 赛道设计规范docs/track-authoring-standard.md 联系作者xhhdaxxgmail.com 权利声明本项目与 Formula 1、FIA 或任何现实赛事、车队、车手、车辆制造商、赛道运营方均无隶属、授权、赞助或背书关系。所有车队、车号、涂装均为虚构内容。3D 地球陆地数据来自 Natural EarthPublic Domain。完整第三方版权说明见THIRD_PARTY_NOTICES.md。项目自有源代码使用 MIT License 开源。 本文是 Mini Grand Prix 项目的纯项目介绍。如果你喜欢这个项目欢迎到Github看看⭐ 如果这篇文章对你有启发点赞 收藏 关注三连是对我最大的鼓励