用码道 AI 编程助手开发打字测试网页小游戏

分类: ai-development

标签: CodeArts, AI编程, TypingTest, 网页应用, 键盘

难度: 初级

读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个打字测试（Typing Test）网页应用，单个 HTML 文件即可运行……」约 4 分 25 秒后，一个 515 行、约 16 KB 的完整打字测试应用就自动生成了：随机英文单词从顶部带着霓虹光晕彩色下落，输入首字母自动锁定最紧急的目标单词，正确字母绿色高亮、错误字母红色高亮并计数；60 秒倒计时结束后弹出成绩单，统计 WPM（每分钟正确单词数）、正确率、错误数与击键数；最佳 WPM 保存在 localStorage，刷新页面也不丢。双击 HTML 就能开局。

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量export PATH=~/.codeartsdoer/installers:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

3. 码道能力一览

这次开发中，码道展示了以下能力：

1. 自然语言编程：我说「打字测试网页应用」，码道直接理解成单词下落 + 目标锁定 + 实时判键 + 倒计时统计 + 成绩持久化一整套方案
2. 自主产品设计：自动选择了深色渐变流动背景、单词霓虹光晕、彩色随机单词、输入缓冲条、结束弹窗成绩单等视觉与交互设计
3. 工程细节到位：输入首字母自动锁定 y 坐标最低的单词、正确/错误字母双色高亮、Backspace 退格修正、ESC 暂停/继续、单词速度随时间加快
4. 自检与收尾：生成后自行验证文件落盘，并逐条汇报功能清单

4. 任务描述

我想要一个打字测试（Typing Test）网页应用，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 随机英文单词逐个下落，输入正确时当前字母高亮为绿色，输入错误时显示红色并记录错误次数
3. 倒计时 60 秒结束后统计正确率与 WPM（每分钟正确单词数）
4. 键盘实时监听，支持重新开始
5. 深色渐变背景，单词彩色显示
6. 记录最佳 WPM，使用 localStorage 持久化
7. 支持暂停与继续

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道先拆解需求，然后直接开始写代码：

生成过程中，码道边写代码边核对实现要点，进度条与生成日志实时可见：

约 4 分 25 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 typing-test.html 在浏览器中直接运行，Typing Test 界面、玩法说明与 Start Game 按钮都正常：

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

单词生成与渲染：从内置词库随机取词，每个字母包成一个 <span class="char"> 便于逐字高亮，落点随机、颜色随机：

function spawnWord() {const text = pick(WORDS);const el = document.createElement('div');el.className = 'falling-word';const color = pick(COLORS);el.style.color = color;for (let i = 0; i < text.length; i++) {const span = document.createElement('span');span.className = 'char';span.textContent = text[i];el.appendChild(span);}...}

目标锁定：输入首字母时遍历下落中的单词，锁定 y 坐标最大（最紧急）的匹配单词，符合直觉：

if (!target) {let candidate = null;for (const w of words) {if (w.text[0] === ch && w.y > -20) {if (!candidate || w.y > candidate.y) candidate = w;}}if (candidate) { setTarget(candidate); inputBuffer = ch; ... }}

实时判键与高亮：每敲一个字母就与目标单词对应位置比较，正确绿色、错误红色，错误计入 errors：

inputBuffer += ch;target.typed = inputBuffer.length;if (target.text[inputBuffer.length - 1] !== ch) errors++;renderWord(target);updateInputDisplay();updateStats();checkComplete(target);

游戏循环与难度曲线：用 requestAnimationFrame 驱动单词下落，生成间隔随剩余时间缩短（速度加快），底部出界自动清除：

const spawnInterval = Math.max(0.55, 1.4 - (60 - timeLeft) / 80);if (lastSpawn > spawnInterval && words.length < 9) {spawnWord();lastSpawn = 0;}

统计与持久化：结束弹窗展示 WPM、正确率、错误数与击键数，最佳 WPM 写入 localStorage，破纪录提示 New Best：

const wpm = elapsed > 0 ? Math.round((correctWords / elapsed) * 60) : 0;...let bestWpm = parseInt(localStorage.getItem('typingBestWpm') || '0', 10);

从这些代码可以看出，码道不只把功能拼出来，目标锁定、难度曲线、成绩统计这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击 typing-test.html 即可开始游戏：点击 Start Game，彩色单词从顶部流式下落，输入首字母自动锁定最下方的目标单词，正确字母绿色高亮、错误字母红色高亮并累计错误；顶部实时显示剩余时间、WPM、正确率、错误数与已完成单词数，ESC 可暂停/继续、Backspace 可退格修正。60 秒倒计时结束后弹出成绩单，若打破历史最佳会提示 New Best 并写入 localStorage，下次打开页面仍能看到最佳 WPM。深色渐变背景持续流动，配合单词霓虹光晕，视觉沉浸感不错。

8. 能力总结

1. 一次生成完整可玩：从需求到可双击运行的单文件应用，全程约 4 分半，无需手工补代码
2. 交互细节到位：目标单词锁定、逐字母双色高亮、退格修正、ESC 暂停、难度随时间递增，体验闭环完整
3. 统计准确：WPM、正确率、错误数、击键数全部实时计算，结束弹窗汇总清晰
4. 工程习惯良好：requestAnimationFrame 驱动动画、数据与 DOM 分离、localStorage 持久化，代码结构清晰可读

9. 总结

用码道开发打字测试这类网页应用，最大的感受是"需求即产品"：把玩法要点说清楚，码道就能给出包含完整交互、动画和视觉风格的成品。对想快速验证创意、或者刚学前端想看看"一个完整应用是怎么写的"的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同玩法的小游戏，继续记录真实的开发过程。