一只鹈鹕骑着单车闯海岛：开源 3D 网页游戏《鹈鹕骑车》体验与部署教程 github开源

文章目录（快捷跳转）

正文开始
游戏内容与玩法
下载、运行与部署方法
项目优缺点与使用建议
图片预览
下载地址
扫码在手机上阅读本页

正文开始
第一次看到“鹈鹕骑车”这个名字，很难猜出它究竟是什么。打开游戏后，答案倒是很直白：一只长嘴鹈鹕骑着单车，在海岛公路上收集小鱼、躲避木箱、跨过栏杆，一路从珊瑚海岸骑到上海滩。
这是一款自动向前行驶的 3D 闯关游戏，操作方式和跑酷类游戏比较接近。玩家不需要控制油门，只需在三条车道之间移动，根据障碍物做出跳跃、低头或绕行操作。
项目看起来轻松，实际内容却不算少。除了普通闯关，还加入了无尽模式、本地双人合作、道具闯关、角色装扮、三星评价、成绩分享和离线单文件版本。
更值得留意的是，它并不是套一层图片素材的简单网页小游戏。鹈鹕、载具、赛道和场景都使用 Three.js 构建，自行车的脚蹬、曲柄、链轮和链条也做了联动动画。
在线试玩：
https://tihuqiche.com/
英文版：
https://tihuqiche.com/en/
游戏内容与玩法
游戏目前设计了六个主题关卡：

第 1 关：珊瑚海岸，600 米
第 2 关：雨林遗迹，850 米
第 3 关：落日神庙，1100 米
第 4 关：荒漠，1250 米
第 5 关：骷髅岛，1400 米
第 6 关：上海滩，1600 米

不同障碍物需要使用不同方式处理。矮木栏可以跳过去，高木箱需要变道绕开，蓝色横杆则要求玩家低头通过。只顾着收集小鱼而没有观察前方，很容易连续损失体力。
单人模式的键盘操作如下：

左右变道：方向键 ← / →，或者 A / D
跳跃：方向键 ↑，或者 W
低头：方向键 ↓，或者 S
冲刺：空格键
使用道具：E
暂停或继续：P 或 Esc

手机上可以使用滑动手势，也可以点击屏幕中的操作按钮。切换到其他窗口或浏览器标签页时，游戏会自动暂停，避免玩家回来后发现角色已经撞得只剩结算画面。
普通闯关中，抵达终点就算通关。三星评价由通关、剩余体力和小鱼数量共同决定：

成功到达终点：1 星
保持 3 点体力：增加 1 星
累计收集至少 25 条小鱼：增加 1 星

收集到 10 条可用小鱼后，可以发动一次持续 2.5 秒的冲刺，速度提高 50%。发动冲刺会消耗可用小鱼，但不会扣除已经计入成绩和星级的小鱼数量。
游戏还提供四种主要模式。
普通闯关适合第一次游玩，玩家依次解锁六个关卡，并尝试获得三星。
无尽模式没有固定终点。速度会在前 5000 米逐渐提升，障碍物间距也会缩短。场景每 1000 米切换一次，直到体力耗尽或玩家主动结束。
本地双人模式允许两名玩家共用一个键盘。两只鹈鹕共享三条车道，但彼此不会碰撞。每名玩家拥有独立的体力、小鱼和冲刺机会，落后较多的一方还会获得追赶加速。
第二名玩家可以使用以下按键：

左右变道：小键盘 4 / 6，或者方向键 ← / →
跳跃和低头：小键盘 8 / 2，或者方向键 ↑ / ↓
冲刺：小键盘 0，或者右 Shift
暂停：P 或 Esc

双人模式目前只支持电脑和本地键盘，不支持手机双人操作。由于部分键盘在同时按下多个按键时存在冲突，正式游玩前最好先测试双方常用的组合键。
道具闯关则加入了护盾、磁铁、双倍鱼分和清障波。磁铁可以吸取前方三条车道中的小鱼，清障波可以直接清除一定距离内的障碍。道具槽一次只能保存一个道具，因此什么时候使用也会影响最终成绩。
角色外观同样可以自由调整。玩家可以选择 GG 或 MM 角色，搭配帽子、围巾、眼镜和衣服，还能把自行车换成摩托车、电瓶车或滑板车。这些装扮只改变外观，不影响速度和碰撞判定，不会变成“选对载具才更容易通关”的数值游戏。
下载、运行与部署方法
如果只是想玩游戏，最方便的方法是打开官方网站。浏览器需要支持 WebGL，近几年的 Chrome、Edge、Firefox 和 Safari 通常都可以正常运行。
离线版将 CSS、JavaScript、Logo、角色素材和 Three.js 引擎放进一个 HTML 文件，下载后可以直接用浏览器打开，不需要安装 Node.js，也不需要启动本地服务器。
需要注意的是，在线网站和本地 HTML 属于不同的访问地址，因此两者的游戏进度不会互通。存档保存在当前浏览器中，清除站点数据、更换浏览器或使用隐私模式，都可能导致进度无法继续保留。
如果准备修改源码，需要安装 Node.js 22.12 或更高版本，并使用 pnpm 11.24.0。项目持续集成环境使用 Node.js 24。
克隆并启动开发环境：

git clone https://github.com/Licoy/tihuqiche.git
cd tihuqiche
corepack enable
pnpm install --frozen-lockfile
pnpm dev

生成生产版本：

pnpm build

预览构建结果：

pnpm preview

项目构建并不只是生成普通的前端资源。构建脚本会分别生成中文页面、英文页面和离线单文件版本：

dist/index.html       中文在线页面
dist/en/index.html    英文在线页面
dist/offline.html     完整离线单文件

中文和英文页面都包含预渲染内容、规范链接、hreflang、Open Graph、Twitter Card 和 JSON-LD。搜索引擎无需等待游戏 JavaScript 完整执行，也能读取页面标题、简介和基本内容。
如果修改了游戏规则、存档、输入控制或界面，建议运行完整测试：

pnpm install --frozen-lockfile
pnpm exec playwright install chromium
pnpm test

已经安装 Google Chrome 的用户，也可以调用本机浏览器：

PLAYWRIGHT_CHANNEL=chrome pnpm test

测试范围包括在线与离线启动、六关流程、旧存档迁移、键盘和触屏控制、主题切换、语言切换、移动端布局以及分享资源。
部署到 GitHub Pages 也比较省事。仓库已经提供 Pages 工作流，推送到 main 分支后会自动安装依赖、执行构建并发布 dist 目录。
Fork 项目后，进入 GitHub 仓库设置：

Settings
-> Pages
-> Build and deployment
-> Source
-> GitHub Actions

不需要创建 gh-pages 分支，也不需要额外配置个人访问令牌。使用自定义域名时，则需要在 Pages 设置中填写域名，完成 DNS 校验后再开启 HTTPS。
项目优缺点与使用建议
先说优点。
第一，完成度高于常见的网页游戏演示。它不是只有一个场景和基础碰撞，而是包含六个关卡、四种模式、双人规则、道具系统、装扮系统、存档、成绩卡和多语言界面，已经具备独立小游戏的基本结构。
第二，在线版和离线版同时兼顾。在线版将图片和脚本拆分成带哈希的资源，方便浏览器缓存；离线版则把运行资源完整嵌入一个 HTML 文件，适合保存、分享和无网络运行。
第三，电脑和手机都能操作。键盘、触屏手势和屏幕按钮覆盖了常见设备，页面也针对手机竖屏和横屏做了适配。
第四，工程细节比较扎实。项目对损坏存档、旧版本进度迁移、资源加载失败、剪贴板失败以及浏览器禁止本地存储等情况都有相应处理，不是简单假设所有环境都能正常运行。
第五，项目适合作为学习案例。它同时包含 Vue 3 组件、Three.js 场景、角色动画、游戏状态、物理判定、SSR 预渲染、离线单文件构建、Playwright 测试和 GitHub Pages 部署，可以用来观察一款网页游戏如何从代码走到可访问的网站。
不足也很明显。
首先，玩法仍然建立在三车道跑酷框架上。场景和模式虽然不少，但核心操作主要是变道、跳跃和低头。长时间游玩后，变化主要来自速度、障碍密度和主题切换。
其次，模型采用程序化方式构建，优点是资源轻、风格统一，缺点是角色和环境细节无法与专业建模软件制作的完整资产相比。对画面写实度要求较高的玩家可能会觉得比较简洁。
第三，本地双人只支持一块键盘，没有手柄支持和在线联机。不同键盘的按键无冲能力也不一样，双方同时操作时可能出现个别组合键无法识别。
第四，游戏进度保存在浏览器本地，没有账号和云同步。在线版与离线版、更换域名后的版本以及不同浏览器之间都不会自动共享存档。
第五，当前仓库没有提供 GitHub Release 安装包。普通玩家应直接使用在线地址或下载 offline.html，而不是寻找 Windows EXE 或手机 APK。
第六，真实双人手感、键盘多键同时输入以及手机扫描成绩卡二维码等场景，仍然需要人工测试。自动化浏览器测试能覆盖流程，却无法完全替代不同设备上的实际体验。
总体来看，《鹈鹕骑车》适合三类人：想玩一款轻量浏览器小游戏的普通玩家，想研究 Three.js 游戏开发的前端开发者，以及需要一个 Vue 3、WebGL、离线构建与自动部署综合案例的学习者。
它没有故意把规则做得复杂，进入游戏后几秒钟就能理解操作；但在代码和工程层面，又保留了足够多的内容供开发者研究。无论是直接在线游玩、下载离线版收藏，还是 Fork 后改成自己的角色与赛道，都是比较合适的使用方式。