尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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看看⭐ 如果这篇文章对你有启发点赞 收藏 关注三连是对我最大的鼓励
RELATED

相关推荐

Android SO库溯源实战:从原理到工具的系统化定位方法

Android SO库溯源实战:从原理到工具的系统化定位方法

1. 项目概述:定位SO库来源的实战价值在Android开发,尤其是涉及NDK、音视频处理、性能优化或逆向分析时,我们经常会遇到一个棘手的问题:APK解压后,在lib/目录下躺着一堆.so动态库文件,但它们的命名往往像lib…

📅 2026/10/6 16:21:07
从零掌握网线制作:标准、工具与实操全解析

从零掌握网线制作:标准、工具与实操全解析

1. 项目概述:从零开始掌握网线制作 你可能觉得,在这个Wi-Fi无处不在的时代,亲手做一根网线是不是有点“复古”?但作为一名经常和网络打交道的从业者,我可以明确告诉你,这项技能不仅没过时,反而是…

📅 2026/10/7 4:26:30
Windows系统api-ms-win-core-sysinfo-l1-2-0.dll丢失的完整解决方案

Windows系统api-ms-win-core-sysinfo-l1-2-0.dll丢失的完整解决方案

1. 问题现象与本质:一个DLL引发的“血案”如果你在Windows系统上启动某个软件或游戏时,突然弹出一个错误对话框,提示“无法启动此程序,因为计算机中丢失 api-ms-win-core-sysinfo-l1-2-0.dll。尝试重新安装该程序以解决此问题”&a…

📅 2026/10/7 13:44:33
MORE NEWS

更多资讯

📰

27B 硬刚千亿参数:Hemmingway-1 用十分之一参数打的写作仗

27B 硬刚千亿参数:Hemmingway-1 用十分之一参数打的写作仗 【免费下载链接】Hemmingway-1 项目地址: https://ai.gitcode.com/hf_mirrors/Altworld/Hemmingway-1 "跟千亿参数的旗舰模型拼写作"——放在两年前,这会被当成一句营销话术。…

📰

SpringBoot+Vue+MySQL宠物猫认养系统全栈实战与部署指南

最近整理了一套 SpringBoot Vue MySQL 的 web 宠物猫认养系统源码,标题里写的是“可直接运行”,我实际部署验证了一下,确实没吹牛。这个项目不是那种只有登录注册的架子工程,而是把用户端、认养申请、管理员审核、猫咪上下架、留…

📰

PR曲线与ROC曲线的本质区别及业务选型指南

1. 这不是“画图游戏”:PR曲线和ROC曲线到底在解决什么问题?刚接触模型评估时,我见过太多人把PR曲线和ROC曲线当成PPT里两张必须出现的“装饰性图表”——调用几行sklearn代码,plt.plot一下,配上AUC数值,就…

📰

韦达定理如何解码矩阵的迹与行列式

1. 这不是数学课,是工程师手里的“系统解码器”你有没有遇到过这样的情况:调试一个控制算法,明明参数调得挺顺,但系统一上电就振荡;或者训练一个简单的线性回归模型,loss曲线忽高忽低,收敛特别慢…

📰

校园网生成树协议实战:环路排查与RSTP/MSTP调优指南

做网络运维这些年,校园网故障里最让我绷紧神经的,永远是环路问题。某个教学楼的三层交换机一抽风,广播帧就像雪崩一样在冗余链路里疯狂转发,核心设备CPU飙高,全校断网。生成树协议,就是在这种混乱局面里负责…

📰

2026年9月望京GEO公司哪家懂婚介相亲?该比哪几项

摘要:这一篇把婚介相亲当作落地场景,对望京的GEO公司重新做一遍适配梳理,本批对照的机构均属 AI搜索优化(GEO)方向。做法分三步:还原婚介机构在AI端提出的真实问题,拆成七项可核对要点&#xff…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬