🚇 我不小心在浏览器里构建了一个完整的 3D Endless Runner 游戏（文件大小只有几 KB，顺便说一下）

Source: Dev.to – I Accidentarily Built a Full 3D Endless Runner Game in the Browser (It’s in KBs btw)

介绍

Hey devs, Ishant here 👋

Quick question before we start:

• 为什么每个网页游戏都要有大约 200 MB？
• 为什么我一打开它们，手机就像喷气发动机一样响？

于是我又干了一件不负责任的事……

在约 6 小时内，靠咖啡和糟糕的决定，我构建了 Metro Runner — 一个 全 3D 无限跑酷，完全在浏览器中运行。

• 没有 Unity。
• 没有 Unreal。
• 没有 Godot。
• 只有 Three.js、React 和 Audacity。 💀

📦 Size Flex（Chrome 用户不知道的）

Metro Runner 是一个渐进式网页应用（Progressive Web App，PWA）。这意味着：

• Chrome 已经内置了渲染引擎。
• Three.js 在各站点之间共享。
• 所有资源都以 CSS 和轻量资源的形式交付。

实际下载大小： 仅几 百 KB（是的，KB，而不是 MB 或 GB）。

你可以：

1. 打开网站。
2. 安装 PWA。
3. 从主屏幕启动游戏。

Chrome 用户常常没有意识到，仅仅使用 Chrome 就已经下载了引擎的一半。（我就是其中之一！😂）

🎮 什么是 Metro Runner？

Metro Runner 是一款 3D 无限跑浏览器游戏，具有以下特点：

• 三车道移动
• 跳跃 / 滑行 机制
• 随进度加速
• 收集硬币和强化道具
• 游戏内 商店 用于升级
• 多种生物群系，拥有独特视觉效果
• 一个古怪的 UFO 绑架事件（稍后详述 💀）

类似 Subway Surfers，但：

• 原生在浏览器中运行
• 完全 3D 图形
• 更加 疯狂

👉 点击这里玩： [Insert game link] （请替换为实际 URL）

🧠 “你用了游戏引擎吗？”

No 😏

它是使用 React Three Fiber（Three.js）构建的，并且：

• Custom game loop
• Manual collision logic
• Fake speed via world movement (delta‑time‑based motion)

玩家几乎不前进；world rushes toward you——这是一种经典的、至今未被击破的幻觉。

🚂 火车、坡道和变成特性的 Bug 💀

在 高速 时，有时：

• 玩家撞上火车坡道
• 绊倒，被弹飞，死亡 💀

我尝试修复它（扫掠碰撞、对齐微调、在非法速度下调试）。

修复成功了吗？没有。

所以我做了每个理性开发者都会做的事：如果修不掉 bug，就把它升格为玩法。

🧠 设定更新

有些火车坡道与车厢 略有错位。在高速下，马虎的跳跃会导致 基于技巧的惩罚（被弹出并游戏结束）。

现在这不算 bug，而是有意为之。

🚂 列车系统（又名 Pain Generators）

• 普通列车 – 静止 + 移动
• 三列车坡道段 (~10%) – 所有车道被阻塞，坡道在上方，巨额硬币奖励
• 列车跳跃段 (~10%) – 跨车道在列车间跳跃；一次失误 = 返回菜单 💀

列车具有真实碰撞——没有幽灵穿模。

👽 外星人绑架事件（我在这里失控了）

运行期间的随机事件：

1. UFO出现
2. 绿灯与牵引光束
3. 屏幕淡出
4. 传送到新生物群系
5. +25 免费硬币 和 临时 无敌

它现实吗？ 不。
它好笑吗？ 绝对是。 🛸

⚡ 强化道具（是的，那些粒子是真实的）

那些 粒子（风痕、速度线）不仅仅是“视觉效果”；它们 营造速度幻觉。喷气背包的粒子来自 喷气背包本身，而不是氛围。

🏪 商店系统（我玩得太过）

• 使用硬币购买强化道具
• 升级磁铁持续时间（最高 6 级）
• 选择起始强化道具

库存通过 localStorage 持久化。关闭标签页后再次打开——你的刷子进度已保存。 😤

🌍 生物群系

• 🚇 地铁
• 🏙️ 城市
• 🌲 森林

生物群系切换是强制的，因此运行时不会感觉像是复制粘贴的。

🥚 彩蛋

点击菜单中的 游戏标题。
我只说这么多 😏

🔧 技术栈（又名：糟糕决定）

• React + TypeScript
• Three.js (via React Three Fiber)
• 自定义碰撞逻辑
• 粒子系统
• PWA（可安装，离线友好）
• 通过 localStorage 保存状态

没有引擎，也没有物理库的照顾——只有数学、时序和感觉。

🧠 为什么我构建它

我想看看：一个真正的 3D 游戏能在浏览器中舒适运行…并且仍然感觉良好吗？

结果是 — 是。而且它 体积仅几KB，这仍然让人觉得不合法。

🙌 反馈

随时留下评论、建议，或直接说一句“哇！”

欢迎吐槽

• 告诉我你在哪里死的。
• 告诉我是哪条坡道背叛了你。
• 告诉我UFO 跳跃是否吓到你。

现在请原谅我假装这只是“一次快速实验”。

— Ishant 🖤