在AI生成代码的时代，我制作了一个打字游戏来记录人类的最高打字速度

Source: Dev.to

我构建了 DevType —— 一个面向程序员的打字游戏。
在 Python、JavaScript、TypeScript、Go 和 Rust 中输入真实代码，测量你的每分钟单词数（WPM），并在全球排行榜上竞争。

👉 立即玩：

为什么我构建了它

人类的编码速度可能已经达到峰值

GitHub Copilot、ChatGPT 和 Claude 正在根本改变我们写代码的方式。

有一天我突然想到：

此时此刻可能是人类历史上敲代码最快的时刻。

几年后，当 AI 编写大部分代码时，开发者将从“敲键的人”转变为“指挥 AI 的人”。审查、指示、微调。敲键盘的时间必然会减少。

这就是我想要：

• 记录 – 捕捉人类的最高敲击速度
• 庆祝 – 致敬我们多年培养的肌肉记忆
• 保存 – 在它消逝之前保存此刻

为什么普通打字测试不够用

标准的打字测试让你输入英文句子。但程序员懂得更多。

打字

const handler = async (req, res) => { …

完全不同于输入 “The quick brown fox.”

编程需要：

• 特殊字符：[]、{}、=>、::、&&
• 精确的缩进
• 语言特定的语法模式

DevType 测试你 输入真实代码 的能力。

什么是 DevType？

一个为程序员设计的 代码打字练习游戏。

🎮 核心功能

📊 可视化你的成长

• WPM 与准确率 – 测量打字速度和精确度
• 得分系统 – 根据速度、准确率、难度和连击计算
• 活动热图 – 类似 GitHub 的活动图表
• 进度图表 – 随时间跟踪得分 / WPM / 准确率 / 最大连击

🌍 全球竞争

• 全球排名 – 与全球程序员竞争
• 国家旗帜 – 在排行榜上展示你的国家
• 公开个人资料 – 分享你的成就

🌐 支持 8 种语言

英语、日语、中文、西班牙语、葡萄牙语、德语、法语、意大利语。

Source: …

技术栈

前端

后端与基础设施

开发工具

架构

┌─────────────────────────────────────────────────────┐
│                     AWS Amplify                     │
├─────────────────────────────────────────────────────┤
│  Next.js 15 (App Router)                             │
│   ├─ Server Components (RSC)                       │
│   ├─ Client Components ("use client")               │
│   └─ API Routes                                     │
├─────────────────────────────────────────────────────┤
│  Supabase                                           │
│   ├─ PostgreSQL (problems, game_results, profiles) │
│   ├─ Auth (GitHub, Google OAuth)                    │
│   └─ Storage (avatars)                              │
└─────────────────────────────────────────────────────┘

挑战与解决方案

1️⃣ 构建自然打字引擎

挑战 – 创建一种打字体验，需要处理代码特有的模式，如自动缩进、特殊字符和多行输入。

解决方案 – 构建了自定义打字引擎，实现了：

• 自动填充前导缩进（用户无需手动输入）
• 逐字符跟踪光标位置
• 使用标准的 “5 个字符 = 1 个单词” 规则计算 WPM
• 处理制表符与空格等边缘情况

// Simplified typing‑engine snippet
const handleKeyPress = (key: string) => {
  const expected = code[currentIndex];

  if (key === expected) {
    // Correct
    combo++;
    correctCount++;
  } else {
    // Mistake
    combo = 0;
    mistakeCount++;
  }

  currentIndex++;
  updateStats();
};

2️⃣ 生成高质量代码题目

挑战 – 需要数百个真实的代码片段，覆盖五种语言，每个片段都有不同难度并具备明确、可测试的模式。

解决方案 – 利用 Claude API 自动生成题目，然后手动挑选子集以确保质量和相关性。流水线如下：

1. 提示 Claude 生成一个短小、独立的代码片段（5 – 30 行）。
2. 要求提供简要描述和难度评级。
3. 将结果存入 Supabase；运行 linter 以验证语法。

3️⃣ 国际化 (i18n)

挑战 – 支持八种语言，同时保持 UI 与题目描述的一致性。

解决方案 – 使用 next‑intl 配合语言特定的 JSON 文件。所有静态 UI 文本均抽取出来；动态题目内容先用英文生成，再通过 Claude 的翻译能力翻译成各语言，并按语言缓存。

4️⃣ 实时排行榜性能

挑战 – 实时更新全球排名，同时避免对数据库造成过大负载。

解决方案 – 实现了一个 Supabase Edge Function，将新分数写入轻量级 leaderboard 表，并触发 PostgreSQL LISTEN/NOTIFY 通道。前端通过 WebSocket 订阅该通道，以实时接收更新。

试一试！

1. 访问网站
2. 选择语言和难度
3. 开始输入真实代码，关注你的 WPM，并冲刺全球排行榜

祝打字愉快！ 🚀

Source: …

5‑语言，5‑难度编码挑战

解决方案：使用 Claude API 自动生成

• 为每个难度设置目标字符数
• 生成语法正确、可编译的代码
• 为每个问题添加简短的教学说明

// Problem generation script with Claude API
const prompt = `Generate a ${language} code snippet at difficulty ${level}.
Requirements:
- Approximately ${targetLength} characters
- Compilable / executable
- Brief explanation included
- Use patterns developers actually write`;

1. 问题生成

每个问题都包含有助于用户理解代码的说明：

2. 实时得分计算

挑战：设计一个既能公平评估速度又能评估准确性的评分系统。

解决方案：多因素得分计算

• 速度（WPM） – 越快得分越高
• 准确率 – 错误会被扣分
• 难度 – 难度越高得分越多
• 连击 – 连续正确答案会获得额外奖励

3. 8 种语言的国际化

挑战：处理语言特有的差异，如复数形式和日期格式。

解决方案：采用 next‑intl

• 基于 locale 的路由（/en/、/ja/、/zh/、…）
• 每种语言对应的 JSON 消息文件
• 自动从浏览器检测 locale

4. 进度可视化图表

挑战：让用户直观地看到自己的提升。

解决方案：实现多种可视化

• 活动热力图 – 类似 GitHub 的练习历史
• 进度图表 – 分数 / WPM / 准确率 / 连击趋势
• 提升指示器 – 用 ↑ / ↓ 对比周期开始与结束

使用 Recharts，配色遵循 Dracula 主题，以保持视觉一致性。

5. 评分系统

受节奏游戏启发的排名体系：

未来计划

计划的功能

• 额外的语言（Java、C++、PHP、Ruby）
• 徽章与成就系统
• 多人对战模式
• 自定义题目创建

试一试！

🎮 玩 DevType：

适合人群：

• 想要测试打字速度的高级工程师
• 想通过练习学习语法的初学者
• 只想玩打字游戏的任何人

争取高分吧！

欢迎反馈

这个项目是业余开发，我会根据用户反馈进行改进。

• 应用内的反馈按钮
• 本文的评论

欢迎任何形式的反馈！

最后的思考

我们正生活在一个激动人心的时代，AI 正在改变编码。在我们完全转向 AI‑辅助开发之前，让我们庆祝并记录人类能做到的事情。

你今天的打字速度可能是人类写代码的最快时刻。

让我们保存这个记录。 🚀

你的最高分是多少？在评论中告诉我！