一段需求码道自动写出 515 行、约 16 KB 的单文件打字测试应用——彩色单词从顶部流式下落、输入首字母自动锁定目标、正确/错误字母双色高亮、60 秒倒计时统计 WPM 与正确率、最佳成绩本地持久化双击 HTML 就能玩分类: 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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)# 2. 配置环境变量exportPATH~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK你的AKexportCODEARTS_CLI_SK你的SK# 3. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「打字测试网页应用」码道直接理解成单词下落 目标锁定 实时判键 倒计时统计 成绩持久化一整套方案自主产品设计自动选择了深色渐变流动背景、单词霓虹光晕、彩色随机单词、输入缓冲条、结束弹窗成绩单等视觉与交互设计工程细节到位输入首字母自动锁定 y 坐标最低的单词、正确/错误字母双色高亮、Backspace 退格修正、ESC 暂停/继续、单词速度随时间加快自检与收尾生成后自行验证文件落盘并逐条汇报功能清单4. 任务描述我想要一个打字测试Typing Test网页应用具体要求单个 HTML 文件即可运行不需要任何构建步骤随机英文单词逐个下落输入正确时当前字母高亮为绿色输入错误时显示红色并记录错误次数倒计时 60 秒结束后统计正确率与 WPM每分钟正确单词数键盘实时监听支持重新开始深色渐变背景单词彩色显示记录最佳 WPM使用 localStorage 持久化支持暂停与继续5. 开发过程及真实截图我在码道 TUI 中贴入需求后码道先拆解需求然后直接开始写代码生成过程中码道边写代码边核对实现要点进度条与生成日志实时可见约 4 分 25 秒后码道汇报完成输出功能清单并提示文件位置双击生成的typing-test.html在浏览器中直接运行Typing Test 界面、玩法说明与 Start Game 按钮都正常6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰单词生成与渲染从内置词库随机取词每个字母包成一个span classchar便于逐字高亮落点随机、颜色随机functionspawnWord(){consttextpick(WORDS);consteldocument.createElement(div);el.classNamefalling-word;constcolorpick(COLORS);el.style.colorcolor;for(leti0;itext.length;i){constspandocument.createElement(span);span.classNamechar;span.textContenttext[i];el.appendChild(span);}...}目标锁定输入首字母时遍历下落中的单词锁定 y 坐标最大最紧急的匹配单词符合直觉if(!target){letcandidatenull;for(constwofwords){if(w.text[0]chw.y-20){if(!candidate||w.ycandidate.y)candidatew;}}if(candidate){setTarget(candidate);inputBufferch;...}}实时判键与高亮每敲一个字母就与目标单词对应位置比较正确绿色、错误红色错误计入errorsinputBufferch;target.typedinputBuffer.length;if(target.text[inputBuffer.length-1]!ch)errors;renderWord(target);updateInputDisplay();updateStats();checkComplete(target);游戏循环与难度曲线用 requestAnimationFrame 驱动单词下落生成间隔随剩余时间缩短速度加快底部出界自动清除constspawnIntervalMath.max(0.55,1.4-(60-timeLeft)/80);if(lastSpawnspawnIntervalwords.length9){spawnWord();lastSpawn0;}统计与持久化结束弹窗展示 WPM、正确率、错误数与击键数最佳 WPM 写入 localStorage破纪录提示 New Bestconstwpmelapsed0?Math.round((correctWords/elapsed)*60):0;...letbestWpmparseInt(localStorage.getItem(typingBestWpm)||0,10);从这些代码可以看出码道不只把功能拼出来目标锁定、难度曲线、成绩统计这些影响体验的细节也都处理得比较到位。7. 真实运行效果双击typing-test.html即可开始游戏点击 Start Game彩色单词从顶部流式下落输入首字母自动锁定最下方的目标单词正确字母绿色高亮、错误字母红色高亮并累计错误顶部实时显示剩余时间、WPM、正确率、错误数与已完成单词数ESC 可暂停/继续、Backspace 可退格修正。60 秒倒计时结束后弹出成绩单若打破历史最佳会提示 New Best 并写入 localStorage下次打开页面仍能看到最佳 WPM。深色渐变背景持续流动配合单词霓虹光晕视觉沉浸感不错。8. 能力总结一次生成完整可玩从需求到可双击运行的单文件应用全程约 4 分半无需手工补代码交互细节到位目标单词锁定、逐字母双色高亮、退格修正、ESC 暂停、难度随时间递增体验闭环完整统计准确WPM、正确率、错误数、击键数全部实时计算结束弹窗汇总清晰工程习惯良好requestAnimationFrame 驱动动画、数据与 DOM 分离、localStorage 持久化代码结构清晰可读9. 总结用码道开发打字测试这类网页应用最大的感受是需求即产品把玩法要点说清楚码道就能给出包含完整交互、动画和视觉风格的成品。对想快速验证创意、或者刚学前端想看看一个完整应用是怎么写的的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同玩法的小游戏继续记录真实的开发过程。