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

正文开始

第一次看到"鹈鹕骑车"这个名字,很难猜出它究竟是什么。打开游戏后,答案倒是很直白:一只长嘴鹈鹕骑着单车,在海岛公路上收集小鱼、躲避木箱、跨过栏杆,一路从珊瑚海岸骑到上海滩。

这是一款自动向前行驶的 3D 闯关游戏,操作方式和跑酷类游戏比较接近。玩家不需要控制油门,只需在三条车道之间移动,根据障碍物做出跳跃、低头或绕行操作。

项目看起来轻松,实际内容却不算少。除了普通闯关,还加入了无尽模式、本地双人合作、道具闯关、角色装扮、三星评价、成绩分享和离线单文件版本。

更值得留意的是,它并不是套一层图片素材的简单网页小游戏。鹈鹕、载具、赛道和场景都使用 Three.js 构建,自行车的脚蹬、曲柄、链轮和链条也做了联动动画。

游戏内容与玩法

游戏目前设计了六个主题关卡:

复制代码
第 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。

图片预览

下载地址

GitHub - Licoy/tihuqiche: 鹈鹕骑车 · GitHub

百度网盘 请输入提取码 提取码: inw4

夸克网盘分享

相关推荐
沙蒿同学5 小时前
我把架构约定编译成了会变红的测试:Wails v2 + Go + Vue3 桌面脚手架实战
前端·后端·github
落魄大学生之流水线上谋生计6 小时前
幻境相机 Mirage Camera
github
wangruofeng6 小时前
从一个 10 万星 AI Agent 项目里,能学到什么真正的软件工程
github·agent·ai编程
子林super6 小时前
复杂JSON Schema结构与输出校验
github
子林super6 小时前
结构化输出解析失败处理策略
github
怕浪猫7 小时前
拆解 Google《AI Agent Handbook》:企业级 Agent 的六层架构与产品矩阵
面试·github·agent
枫叶丹47 小时前
开源还是开权重:2026 年 AI 模型战争的控制权之争
人工智能·chatgpt·开源·agent·codex
kali-Myon7 小时前
分享一个网络安全 AI 工具导航项目 SecSkills
安全·ai·github·ctf
峰向AI17 小时前
Kage: 一个 244KB 文件,做出百万级视觉效果
github