键道 KeyDo——一个 CRT 街机风的打字道场

练打字的工具不少，但大多数长得像考试。我想要一个打起来上瘾的——所以做了 键道 KeyDo：一个复古 CRT 街机风格的网页打字道场。键如剑，心如水，练着练着就想再来一局。

纯前端 React + Vite，一个 Cloudflare Worker 同时托管静态资源和排行榜 API，离线也完全可玩。

四种修炼模式

• 新手道场：11 节键位课程，从基准键位 asdf jkl; 到编程符号，带虚拟键盘和指法提示，准确率 ≥ 90% 才解锁下一课——给零基础学盲打；
• 极速测试：monkeytype 风格的逐字测速，单词 / 句子 / 代码三种题库，15 / 30 / 60 秒可选，实时 WPM；
• 限时挑战：60 秒单词冲刺，空格提交，连击加成，难度随等级爬升；
• 单词雨：单词从天而降，输入首字母锁定目标，整词打完即消灭，落地扣命——娱乐向实战。

前两种共用一个逐字符打字引擎，后两种各是一套独立玩法。四种模式，一个道场。

段位，给练习一个目标

按历史最佳 WPM 评段位，一路从白带爬到宗师（110+ WPM），中间黄橙绿蓝紫棕黑一色一段——谐了剑道的段位。练习不是为了一个冷冰冰的数字，是为了看着自己从白带升上去。成绩和课程进度都存在浏览器本地，打开就接着上次练。

几个技术选择

做这个小游戏，有几个决定回头看挺值得说：

• 音效一个文件都不用：命中、失误、升级、game over，全套 8-bit 音是 Web Audio 的振荡器实时合成的——45 行代码，零音频资源，零加载请求；
• 游戏循环不走 React state：单词雨每秒 60 帧推进物理，状态全放 ref，靠一个空 tick 触发重画，否则每帧 setState 直接卡死；
• 打字引擎把真相放 ref：高频键盘输入不塞进异步 state，事件里同步改 ref、提交快照渲染，绕开 StrictMode 双调用的坑；
• 排行榜设一条服务端底线：成绩是前端算的，后端用「人类不可能越过」的上限挡掉最蠢的作弊，不追求杜绝一切。

这几条后面都各有一篇细说。共同的取向是：该确定性的地方别引额外依赖，该防御的地方守住底线，但也不为一个打字小游戏过度设计。

离线优先，排行榜可选

游戏本体不依赖网络：词库、课程、计分、存档全在本地，断网照样练。全球排行榜是可选的锦上添花——极速测试、限时挑战、单词雨结束后自动提交最佳成绩，首次打开给你一个匿名的道场名号（像「衔烛武者 #D2B5」），不用注册。想上榜就上，不想联网也不耽误练。统计页还有 WPM 趋势、近 14 天活跃度、各模式汇总，看得见自己的进步。

小结

键道想做的事很简单：把「练打字」这件枯燥的事，做成一个想一局接一局的街机游戏。

• 四模式一道场：从零基础键位课到娱乐向单词雨，覆盖学、练、玩；
• 段位给动力：白带到宗师，进步看得见；
• 纯前端离线可玩：核心零网络依赖，排行榜可选；
• 技术上克制：音效用代码不用文件、游戏循环用 ref 不用 state、排行榜设底线不做重后端。

线上就在 typing.app.mahui.me，打开即玩。后面几篇会把打字引擎、Web Audio 音效、单词雨游戏循环、排行榜防作弊这些实现一篇篇拆开讲。