Typing-Ride · 逐字骑行：中英文打字骑行游戏与部署教程

用指尖点燃速度，让词语成为前进的动力。

Typing-Ride（逐字骑行）是一款在浏览器中运行的中英文打字骑行游戏。键盘就是自行车的动力：打对字符，骑手向前行进；打字越快，骑行速度越快。连续输入错误会让角色失去平衡，最终摔倒并进入结算界面。

游戏将打字练习放进卡通场景里，可以骑过日式街区、沙滩旁的小路和森林，也可以切换时间、天气与角色。

• 在线体验：https://ride.darkduck.fun/
• GitHub 源码：LLLimit / Typing-Ride
• 实机画廊：查看游戏截图

游戏特色

• 中英文打字：英文按字符判定，中文支持输入法组词，提交汉字后才判定输入。
• 两种游戏模式：无尽漫游挑战骑行距离；词本挑战按章节完成目标词语。
• 看词与听力练习：可以看着目标输入，也可以使用浏览器语音朗读进行听写。
• 速度驱动骑行：英文速度达到 40 WPM 后触发站立骑行，带来 35% 加速和镜头反馈；中文使用界面显示的字 / 分阈值。
• 打字反馈：键帽动画、连击、粒子、音效和失误摇晃，开始前还有 3、2、1、GO 倒计时。
• 场景与天气：三张地图，支持日间、黄昏、夜晚，以及晴天、雨天、雪天。
• 角色与记录：可选择林小满、芒芒和布丁，查看里程、准确率、成就及易错词。
• 自定义词本：内置 140 个中英文词条，也可以创建自己的词本。
• 音乐与环境声：通过 Web Audio 合成音乐、环境声和交互音效。

三张地图

晴日街区

沿着日式街道骑行，经过奶茶店、锅物店、书店、唱片 / CD 店、电影院、便利店、拉面店和面包店。街上有汽车穿行与行人走动，开放店面中可以看到柜台、书架、唱片和锅物蒸汽，雨天路人会撑伞。

海风来信

这张地图沿沙滩旁的木质小路展开，白沙、海浪、椰树、遮阳伞和冲浪板组成海岸景色，可以在不同时间与天气下骑行。

林间小路

进入密林与原木小屋之间的小路，周围有蕨类、蘑菇，以及会活动的鹿、兔子和松鼠。

怎么玩

在主菜单选择词本、角色、地图和练习方式，点击“开始骑行”，倒计时结束后输入目标文字。

英文严格区分大小写。中文输入法组词时，尚未提交的拼音不计为错误。输入错误后继续打对字符可以恢复平衡，连续失误或长时间停止输入会导致摔倒。

创建自己的词本

每行输入一个词条，使用 词语 | 提示 的格式，提示可以省略：

bicycle | 自行车
summer | 夏天
海风 | 从海面吹来的风

每本最多 1,000 条，每条最多 48 字符，最多保存 20 本自定义词本。

本地运行

项目使用 TypeScript、Three.js 和 Vite，构建环境需要 Node.js 22.12 或更新版本，以及 pnpm。还需要安装 Git 以克隆源码。

如果尚未安装 pnpm，可以执行：

npm install -g pnpm@10

拉取源码并启动开发服务器：

git clone https://github.com/LLLimit/Typing-Ride.git
cd Typing-Ride
pnpm install --frozen-lockfile
pnpm dev

在浏览器中打开终端显示的地址，默认是 http://127.0.0.1:5173/。该端口需要未被其他程序占用。

构建与部署

1. 生成静态文件

在项目根目录执行：

pnpm build

构建产物位于 dist/。游戏运行时不需要数据库或后端接口，服务器只需提供这些静态文件。

上线前可以在本地预览生产构建：

pnpm preview

访问终端显示的预览地址。请通过 HTTP 服务打开游戏，直接双击 dist/index.html 无法正确加载模块。

2. 上传到静态网站目录

将 dist/ 内的全部内容上传到网站根目录，确保 index.html 就在根目录，assets/、fonts/、riders/ 和 previews/ 等目录一并上传。

本文按域名根路径部署，例如 https://ride.example.com/。现有资源使用根路径；如果放在 /game/ 这样的子目录，需要同步调整 Vite 的 base 和代码中以 / 开头的资源引用，再重新构建。

3. 配置 Nginx

下面是已有 Nginx 环境中的 HTTP 静态站点示例，请替换域名和目录：

server {
    listen 80;
    server_name ride.example.com;

    root /var/www/typing-ride;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

root 指向上传后的文件目录，try_files 按请求查找静态文件；指令说明可查阅 Nginx 官方文档。如果使用服务器管理面板，创建静态网站并设置相同的网站根目录即可。

保存配置后，先检查，再重新加载：

sudo nginx -t
sudo nginx -s reload

将域名解析到服务器，并在服务器或网站面板中配置 HTTPS 证书后，即可通过自己的域名访问。

使用支持源码构建的静态托管服务时，对应参数如下：

使用说明

建议使用支持 WebGL2 的现代浏览器，并开启硬件加速。项目支持自适应像素比例和轻快、精细画质设置，实际帧率取决于设备与分辨率。

音乐会在首次点击或键盘交互后启动。听力练习使用浏览器的 SpeechSynthesis，发音与可用语音取决于浏览器和系统。

游戏记录和自定义词本保存在浏览器的 localStorage 中，不同浏览器或域名使用独立存档；清除站点数据会删除记录。当前没有账号系统和云端存档，可以通过游戏提供的 JSON 导出保存记录。

想直接体验，可以打开 逐字骑行在线演示；想自行部署或了解实现，可以访问 GitHub 项目仓库。