Web-Dev-For-Beginners 实战用事件驱动编程Event-Driven Programming构建一个打字速度游戏【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本篇技术指南基于 Web-Dev-For-Beginners 开源课程第 4 章4-typing-game完整讲解如何以事件驱动编程为核心思想从零构建一个基于福尔摩斯名言的打字速度游戏。通过本指南你将掌握addEventListener事件监听机制、游戏状态管理、实时输入校验与视觉反馈等关键技术并能结合仓库中的官方源码教学版 与 Solution 实现理解从教学代码到工程化实现的演进路径。课程定位为什么选择打字游戏来学习事件驱动编程打字速度是每一位开发者都拥有却极少被刻意训练的隐藏超能力——从大脑到代码编辑器的通道越快创造力流动就越顺畅。而 Web-Dev-For-Beginners 课程24 课、12 周、面向 Web 开发初学者在第 4 章选择用打字游戏这一载体正是因为它天然依赖键盘输入事件是理解浏览器与 JavaScript 之间对话机制的最佳场景。这门课程的核心目标是让你理解互动网页的底层运行逻辑浏览器在用户每次点击、键入、移动鼠标时都会向 JavaScript 代码发送一条条称为event事件的小消息而开发者通过编写事件监听器来决定如何响应。当你完成本项目的学习后你将亲手得到一个能够实时跟踪输入速度与准确率、并显示完成耗时的可玩打字游戏——同时理解驱动一切互动网站的核心原理。事件驱动编程从顺序执行到等待与响应什么是事件传统编程按从上到下的顺序执行代码如同照着菜谱做菜。但 Web 应用面临一个本质不确定性我们永远不知道用户何时会点击按钮或开始输入——可能立即点击可能五分钟后也可能永远不点。这种不可预测性要求我们换一种思路写代码不是主动执行而是写下一段耐心等待某事发生的代码就像 1800 年代的电报员守在机器旁、时刻准备响应线上传来的消息。简单来说事件就是发生的事情点击按钮是事件键入一个字母是事件移动鼠标也是事件。事件驱动编程让我们把代码设置为监听 响应模式。事件监听器为你的代码装上门铃我们通过创建名为event listener事件监听器的特殊函数来实现监听与响应。可以把事件监听器想象成代码的门铃装上门铃调用addEventListener()告诉它听什么声音传入事件名如click或input指定门铃响时做什么传入自定义回调函数事件监听器的四大特性监听特定的用户动作点击、按键、鼠标移动执行事件发生时你编写的自定义代码响应用户交互创造无缝的实时体验处理同一元素上的多个事件通过挂载不同的监听器说明创建事件监听器的方式有很多可以使用匿名函数或具名函数也可以使用onclick这类快捷属性。本课程聚焦于addEventListener() 匿名函数这一组合因为它是 Web 开发者最常用、也最灵活的方式——它对所有事件通用且事件名可作为参数动态传入。常用事件一览浏览器提供了数十种可监听的事件用户几乎任何操作都会触发事件但大多数交互应用只依赖少量核心事件。下面是课程列出的事件表含本项目用到的两个事件事件描述常见使用场景click用户点击了某元素按钮、链接、交互元素contextmenu用户点击鼠标右键自定义右键菜单select用户选中了部分文本文本编辑、复制操作input用户输入了文本表单校验、实时搜索这些事件在用户与页面元素交互时触发通过事件对象提供详细信息让我们得以创建响应式交互应用并在不同浏览器与设备上保持一致行为。游戏设计功能拆解与流程建模本项目游戏使用福尔摩斯Sherlock Holmes的名言作为输入素材整体功能占比大致为实时反馈 25%、性能追踪 20%、交互式 UI 20%、计时系统 15%、引语管理 10%、结果展示 10%。游戏的核心流程如下玩家点击Start按钮 → 随机显示一条福尔摩斯名言玩家在文本框逐词输入当前词输入正确 → 高亮下一个词输入有误 → 显示错误样式整个引语完成 → 显示包含耗时的成功消息基于此游戏需要具备以下能力启动玩家点击开始按钮后显示随机引语追踪实时按词追踪玩家的输入进度高亮高亮当前应输入的词引导玩家注意力反馈输入错误时立即给出视觉反馈结算引语完成时计算并显示总耗时项目搭建文件结构与开发环境保持整洁的文件结构是专业开发的第一步。本项目只需经典三件套文件index.html—— 页面结构与内容script.js—— 全部游戏逻辑与事件监听器style.css—— 视觉外观与样式在终端中创建项目目录# Linux 或 macOS mkdir typing-game cd typing-game # Windows md typing-game cd typing-game然后使用 VS Code 打开并新建上述三个文件code .启动开发服务器推荐安装 VS Code 的 Live Server 扩展它会在本地托管应用并在每次保存文件时自动刷新浏览器。安装后按Ctrl-Shift-PmacOS 为Cmd-Shift-P打开命令面板输入并执行Live Server: Open with Live Server然后在浏览器中访问https://localhost:5500即可看到页面。迭代式开发能让你尽早发现问题、实时看到进展。用户界面HTML 结构游戏界面需要四个关键 UI 元素UI 元素用途HTML 元素引语展示区显示待输入的文本p idquote消息区显示状态与成功消息p idmessage文本输入框玩家输入引语input idtyped-value开始按钮开始游戏button idstart每个元素都需要唯一 ID 供 JavaScript 定位。创建index.html并添加以下代码html head titleTyping game/title link relstylesheet hrefstyle.css /head body h1Typing game!/h1 pPractice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!/p p idquote/p !-- 显示引语 -- p idmessage/p !-- 显示状态消息 -- div input typetext aria-labelcurrent word idtyped-value / !-- 输入框 -- button typebutton idstartStart/button !-- 开始按钮 -- /div script srcscript.js/script /body /html该结构在head中链接 CSS 样式表创建清晰的标题与操作说明用带 ID 的占位段落承载动态内容输入框带有aria-label无障碍属性script放在页面底部以获得最佳加载性能。视觉反馈CSS 样式视觉反馈自计算早期就被证明能显著提升用户表现、降低错误率。游戏需要让玩家立刻知道该打哪个词以及是否打错了因此定义两个简洁的样式类/* style.css 内容 */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; }.highlight用黄色背景高亮当前应输入的词提供清晰的视觉引导.error用浅珊瑚色背景标识输入错误在输入同时给出即时反馈对比色设计兼顾了无障碍与清晰沟通提示样式可以自由发挥——换一种字体、给标题上色、调整元素尺寸让页面更美观。游戏逻辑JavaScript 实现HTML 和 CSS 搭好了车身JavaScript 则是让一切运转的引擎。我们将按三个步骤循序渐进地实现。第一步常量与状态初始化// script.js 内容 // 全部引语 const quotes [ When you have eliminated the impossible, whatever remains, however improbable, must be the truth., There is nothing more deceptive than an obvious fact., I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation., I never make exceptions. An exception disproves the rule., What one man can invent another can discover., Nothing clears up a case so much as stating it to another person., Education never ends, Watson. It is a series of lessons, with the greatest for the last., ]; // 存储单词列表与当前输入单词的索引 let words []; let wordIndex 0; // 开始时间 let startTime Date.now(); // 页面元素引用 const quoteElement document.getElementById(quote); const messageElement document.getElementById(message); const typedValueElement document.getElementById(typed-value);这段初始化代码的要点引语数组用const声明内容不会改变福尔摩斯名言可自行扩充追踪变量用let声明游戏过程中会不断更新通过document.getElementById()提前捕获 DOM 引用后续高效复用使用具名常量避免重复书写字符串字面量造成拼写错误还能获得 IDE 自动补全与重构支持第二步开始逻辑click 事件当用户点击 Start 按钮时需要选中一条引语、搭建 UI、并为当前词与计时建立追踪// script.js 末尾 document.getElementById(start).addEventListener(click, () { // 随机获取一条引语 const quoteIndex Math.floor(Math.random() * quotes.length); const quote quotes[quoteIndex]; // 将引语拆分为单词数组 words quote.split( ); // 重置单词索引 wordIndex 0; // UI 更新为每个单词创建 span便于单独设置样式 const spanWords words.map(function(word) { return span${word} /span}); quoteElement.innerHTML spanWords.join(); // 高亮第一个单词 quoteElement.childNodes[0].className highlight; // 清除历史消息 messageElement.innerText ; // 准备输入框清空、聚焦 typedValueElement.value ; typedValueElement.focus(); // 启动计时器 startTime new Date().getTime(); });单词追踪用Math.floor()Math.random()随机选引语用split( )切分为单词数组将wordIndex重置为 0 准备新一轮。UI 搭建将每个单词包进span并拼接为字符串一次性写入innerHTML高效更新 DOM为第一个单词加上highlight类清空上局消息。输入框准备清空残留文本并调用.focus()让玩家可以立刻开始输入。计时初始化用new Date().getTime()记录当前时间戳为计算输入速度与完成耗时奠定基础。第三步打字逻辑input 事件这是游戏的心脏。每一次键入字符代码都会校验输入、给出反馈并决定下一步。实现采用瀑布式waterfall判断——从最具体到最一般的条件依次检查// script.js 末尾 typedValueElement.addEventListener(input, () { // 获取当前应输入的单词 const currentWord words[wordIndex]; // 获取当前输入值 const typedValue typedValueElement.value; if (typedValue currentWord wordIndex words.length - 1) { // 场景1整句完成 const elapsedTime new Date().getTime() - startTime; const message CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.; messageElement.innerText message; } else if (typedValue.endsWith( ) typedValue.trim() currentWord) { // 场景2当前单词完成以空格结尾且去除空格后完全匹配 typedValueElement.value ; wordIndex; // 清除所有单词的高亮样式 for (const wordElement of quoteElement.childNodes) { wordElement.className ; } // 高亮下一个单词 quoteElement.childNodes[wordIndex].className highlight; } else if (currentWord.startsWith(typedValue)) { // 场景3到目前为止输入正确 typedValueElement.className ; } else { // 场景4错误状态 typedValueElement.className error; } });四个分支逐一解析 场景 1 —— 整句完成输入值完全匹配当前词且当前词是最后一个词。用当前时间戳减去startTime得到耗时毫秒除以 1000 换算为秒展示祝贺消息。✅ 场景 2 —— 单词完成输入以空格结尾且trim()后与当前词完全一致。清空输入框、wordIndex前进到下一个词、清除全部高亮并为新词添加highlight类。 场景 3 —— 输入进行中当前词以已输入内容开头startsWith说明到目前为止正确移除错误样式允许继续输入。❌ 场景 4 —— 错误状态输入内容与预期不匹配为输入框加上error类立即给出红色视觉反馈。源码对照官方 Solution 的工程化重构仓库中的完整参考实现位于 4-typing-game/solution/采用现代 ES6 语法对教学版进行了重构非常值得对照学习工具函数拆分index.js 将随机取引语getRandomQuote、渲染引语为 spanrenderQuote与高亮当前词highlightWord抽象为独立函数逻辑更清晰、可复用性更强消息系统用messages对象统一管理成功、错误、开始三类提示文案替换散落的字符串拼接classListAPI用classList.toggle(highlight, i index)与classList.add/remove(error)取代直接赋值className代码更健壮游戏结束处理完成引语后通过typedValueElement.disabled true禁用输入框对应挑战列表中的UI State ManagementUI 增强index.html 引入 Font Awesome 图标、隐藏式 label视觉隐藏但保留给屏幕阅读器、日期时间显示index.css 提供了渐变背景、卡片式引语展示、按钮悬停动画与移动端媒体查询等完整视觉方案从教学版到 Solution 的演进展示了同一套事件驱动逻辑在真实项目中的组织方式状态集中管理、行为函数化、样式类原子化。测试与调试点击 Start 开始游戏运行效果可参考仓库中的演示动画 demo.gif。测试清单点击 Start 是否显示随机引语输入时当前词是否正确高亮错误输入是否出现错误样式完成单词后高亮是否正确前进完成整条引语后是否显示含耗时的成功消息常见调试技巧按 F12 打开浏览器控制台检查 JavaScript 报错确认所有文件名完全一致区分大小写确认 Live Server 正在运行并正常刷新多试几条引语验证随机选取逻辑进阶挑战与课后作业Challenge为游戏增加高级功能功能描述练习的技能输入控制游戏完成后禁用input事件监听点击按钮时重新启用事件管理与状态控制UI 状态管理玩家完成引语后禁用文本框DOM 属性操作模态对话框用模态对话框展示成功消息高级 UI 模式与无障碍最高分系统用localStorage持久化最高分浏览器存储 API 与数据持久化实现提示研究localStorage.setItem()与localStorage.getItem()练习动态添加/移除事件监听器探索 HTML dialog 元素或 CSS 模态模式注意禁用/启用表单控件时的无障碍设计。Copilot Agent 挑战难度自适应系统仓库还给出了一个基于 Agent 模式的扩展挑战为打字游戏实现难度自适应系统——跟踪 WPM每分钟字数与准确率在 Easy简单引语、Medium当前引语、Hard带标点的复杂引语三档间自动切换UI 展示当前难度与玩家统计连续 3 次良好表现后通过连击计数提升难度并用颜色、动画给出难度变化反馈同时保持 ARIA 无障碍标注。课后作业创建全新键盘游戏作业要求详见 assignment.md设计一个使用键盘事件完成特定任务的小游戏可以是另一种打字游戏、按键绘制像素的画板应用、方向键控制的街机游戏等。必须包含事件监听器响应至少 3 种不同的键盘事件视觉反馈对用户输入立即给出视觉响应游戏逻辑包含计分、关卡或进度机制用户界面清晰的说明与直观的操作作业提供了完整的评价量表Rubric从功能完整性、代码质量、用户体验、创意四个维度划分优秀 / 达标 / 待改进三档可作为自评标准。学习路径从 5 分钟到专业级的能力成长课程给出了清晰的进阶时间线详见 课程概述 中的 Timeline 图Setup10 分钟搭建 HTML 基础、CSS 样式、创建 JS 文件用户界面20 分钟输入框、按钮、显示区与响应式布局事件处理25 分钟键盘/鼠标事件、实时反馈、状态管理游戏逻辑30 分钟引语生成、字符比对、准确率计算、计时器性能追踪35 分钟WPM 计算、错误追踪、进度可视化、结果展示打磨与增强45 分钟视觉反馈、音效、动画、无障碍特性高级功能1 周难度等级、排行榜、自定义引语、多人模式专业技能1 个月性能优化、代码架构、测试策略、部署模式分阶段行动清单5 分钟打开浏览器控制台用addEventListener监听键盘事件创建带输入框的简单 HTML 页面测试键入检测练习用字符串比较对目标文本用setTimeout理解定时函数。1 小时完成课后测验理解事件驱动编程构建带单词校验的基础版打字游戏添加正确/错误输入的视觉反馈实现基于速度与准确率的简单计分系统用 CSS 美化界面。1 周完成全功能打字游戏添加不同词汇复杂度的难度等级实现用户统计WPM、长期准确率加入音效与动画适配触屏移动端上线分享并收集反馈。1 个月构建多个探索不同交互模式的游戏学习游戏循环、状态管理与性能优化为开源游戏项目做贡献掌握高级计时概念与平滑动画建立展示各类交互应用的 portfolio指导其他对游戏开发感兴趣的学习者。完成后你将掌握的技能事件驱动编程构建对输入实时响应的用户界面实时反馈即时的视觉与性能更新性能测量精确的计时与计分系统游戏状态管理控制应用流程与用户体验交互设计创造沉浸式的用户交互现代 Web API善用浏览器能力实现丰富交互无障碍模式面向所有用户的包容性设计这些技能可直接迁移到网页应用任意交互界面或仪表盘、教育软件学习平台与技能评估工具、生产力工具文本编辑器、IDE、协作软件、游戏行业浏览器游戏与互动娱乐以及移动开发触屏界面与手势处理。结语事件驱动编程是让网页活起来的核心概念下拉菜单、边输入边校验的表单、响应点击的游戏……这一切背后都是事件监听与响应的魔法。完成本项目后你已经掌握了驱动每一款互动网站与应用的底层机制——你不仅在学习写代码更在学着创造直观、引人入胜的用户体验。接下来你完全有基础去探索高级游戏框架、实时多人系统或更复杂的交互应用了。本课程模块由 Christopher Harrison 编写隶属于 Web-Dev-For-Beginners 课程体系。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/11 2:46:04 · 阅读 1.2k Web-Dev-For-Beginners 实战：用事件驱动编程（Event-Driven Programming）构建一个打字速度游戏
Web-Dev-For-Beginners 实战用事件驱动编程Event-Driven Programming构建一个打字速度游戏【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本篇技术指南基于 Web-Dev-For-Beginners 开源课程第 4 章4-typing-game完整讲解如何以事件驱动编程为核心思想从零构建一个基于福尔摩斯名言的打字速度游戏。通过本指南你将掌握addEventListener事件监听机制、游戏状态管理、实时输入校验与视觉反馈等关键技术并能结合仓库中的官方源码教学版 与 Solution 实现理解从教学代码到工程化实现的演进路径。课程定位为什么选择打字游戏来学习事件驱动编程打字速度是每一位开发者都拥有却极少被刻意训练的隐藏超能力——从大脑到代码编辑器的通道越快创造力流动就越顺畅。而 Web-Dev-For-Beginners 课程24 课、12 周、面向 Web 开发初学者在第 4 章选择用打字游戏这一载体正是因为它天然依赖键盘输入事件是理解浏览器与 JavaScript 之间对话机制的最佳场景。这门课程的核心目标是让你理解互动网页的底层运行逻辑浏览器在用户每次点击、键入、移动鼠标时都会向 JavaScript 代码发送一条条称为event事件的小消息而开发者通过编写事件监听器来决定如何响应。当你完成本项目的学习后你将亲手得到一个能够实时跟踪输入速度与准确率、并显示完成耗时的可玩打字游戏——同时理解驱动一切互动网站的核心原理。事件驱动编程从顺序执行到等待与响应什么是事件传统编程按从上到下的顺序执行代码如同照着菜谱做菜。但 Web 应用面临一个本质不确定性我们永远不知道用户何时会点击按钮或开始输入——可能立即点击可能五分钟后也可能永远不点。这种不可预测性要求我们换一种思路写代码不是主动执行而是写下一段耐心等待某事发生的代码就像 1800 年代的电报员守在机器旁、时刻准备响应线上传来的消息。简单来说事件就是发生的事情点击按钮是事件键入一个字母是事件移动鼠标也是事件。事件驱动编程让我们把代码设置为监听 响应模式。事件监听器为你的代码装上门铃我们通过创建名为event listener事件监听器的特殊函数来实现监听与响应。可以把事件监听器想象成代码的门铃装上门铃调用addEventListener()告诉它听什么声音传入事件名如click或input指定门铃响时做什么传入自定义回调函数事件监听器的四大特性监听特定的用户动作点击、按键、鼠标移动执行事件发生时你编写的自定义代码响应用户交互创造无缝的实时体验处理同一元素上的多个事件通过挂载不同的监听器说明创建事件监听器的方式有很多可以使用匿名函数或具名函数也可以使用onclick这类快捷属性。本课程聚焦于addEventListener() 匿名函数这一组合因为它是 Web 开发者最常用、也最灵活的方式——它对所有事件通用且事件名可作为参数动态传入。常用事件一览浏览器提供了数十种可监听的事件用户几乎任何操作都会触发事件但大多数交互应用只依赖少量核心事件。下面是课程列出的事件表含本项目用到的两个事件事件描述常见使用场景click用户点击了某元素按钮、链接、交互元素contextmenu用户点击鼠标右键自定义右键菜单select用户选中了部分文本文本编辑、复制操作input用户输入了文本表单校验、实时搜索这些事件在用户与页面元素交互时触发通过事件对象提供详细信息让我们得以创建响应式交互应用并在不同浏览器与设备上保持一致行为。游戏设计功能拆解与流程建模本项目游戏使用福尔摩斯Sherlock Holmes的名言作为输入素材整体功能占比大致为实时反馈 25%、性能追踪 20%、交互式 UI 20%、计时系统 15%、引语管理 10%、结果展示 10%。游戏的核心流程如下玩家点击Start按钮 → 随机显示一条福尔摩斯名言玩家在文本框逐词输入当前词输入正确 → 高亮下一个词输入有误 → 显示错误样式整个引语完成 → 显示包含耗时的成功消息基于此游戏需要具备以下能力启动玩家点击开始按钮后显示随机引语追踪实时按词追踪玩家的输入进度高亮高亮当前应输入的词引导玩家注意力反馈输入错误时立即给出视觉反馈结算引语完成时计算并显示总耗时项目搭建文件结构与开发环境保持整洁的文件结构是专业开发的第一步。本项目只需经典三件套文件index.html—— 页面结构与内容script.js—— 全部游戏逻辑与事件监听器style.css—— 视觉外观与样式在终端中创建项目目录# Linux 或 macOS mkdir typing-game cd typing-game # Windows md typing-game cd typing-game然后使用 VS Code 打开并新建上述三个文件code .启动开发服务器推荐安装 VS Code 的 Live Server 扩展它会在本地托管应用并在每次保存文件时自动刷新浏览器。安装后按Ctrl-Shift-PmacOS 为Cmd-Shift-P打开命令面板输入并执行Live Server: Open with Live Server然后在浏览器中访问https://localhost:5500即可看到页面。迭代式开发能让你尽早发现问题、实时看到进展。用户界面HTML 结构游戏界面需要四个关键 UI 元素UI 元素用途HTML 元素引语展示区显示待输入的文本p idquote消息区显示状态与成功消息p idmessage文本输入框玩家输入引语input idtyped-value开始按钮开始游戏button idstart每个元素都需要唯一 ID 供 JavaScript 定位。创建index.html并添加以下代码html head titleTyping game/title link relstylesheet hrefstyle.css /head body h1Typing game!/h1 pPractice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!/p p idquote/p !-- 显示引语 -- p idmessage/p !-- 显示状态消息 -- div input typetext aria-labelcurrent word idtyped-value / !-- 输入框 -- button typebutton idstartStart/button !-- 开始按钮 -- /div script srcscript.js/script /body /html该结构在head中链接 CSS 样式表创建清晰的标题与操作说明用带 ID 的占位段落承载动态内容输入框带有aria-label无障碍属性script放在页面底部以获得最佳加载性能。视觉反馈CSS 样式视觉反馈自计算早期就被证明能显著提升用户表现、降低错误率。游戏需要让玩家立刻知道该打哪个词以及是否打错了因此定义两个简洁的样式类/* style.css 内容 */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; }.highlight用黄色背景高亮当前应输入的词提供清晰的视觉引导.error用浅珊瑚色背景标识输入错误在输入同时给出即时反馈对比色设计兼顾了无障碍与清晰沟通提示样式可以自由发挥——换一种字体、给标题上色、调整元素尺寸让页面更美观。游戏逻辑JavaScript 实现HTML 和 CSS 搭好了车身JavaScript 则是让一切运转的引擎。我们将按三个步骤循序渐进地实现。第一步常量与状态初始化// script.js 内容 // 全部引语 const quotes [ When you have eliminated the impossible, whatever remains, however improbable, must be the truth., There is nothing more deceptive than an obvious fact., I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation., I never make exceptions. An exception disproves the rule., What one man can invent another can discover., Nothing clears up a case so much as stating it to another person., Education never ends, Watson. It is a series of lessons, with the greatest for the last., ]; // 存储单词列表与当前输入单词的索引 let words []; let wordIndex 0; // 开始时间 let startTime Date.now(); // 页面元素引用 const quoteElement document.getElementById(quote); const messageElement document.getElementById(message); const typedValueElement document.getElementById(typed-value);这段初始化代码的要点引语数组用const声明内容不会改变福尔摩斯名言可自行扩充追踪变量用let声明游戏过程中会不断更新通过document.getElementById()提前捕获 DOM 引用后续高效复用使用具名常量避免重复书写字符串字面量造成拼写错误还能获得 IDE 自动补全与重构支持第二步开始逻辑click 事件当用户点击 Start 按钮时需要选中一条引语、搭建 UI、并为当前词与计时建立追踪// script.js 末尾 document.getElementById(start).addEventListener(click, () { // 随机获取一条引语 const quoteIndex Math.floor(Math.random() * quotes.length); const quote quotes[quoteIndex]; // 将引语拆分为单词数组 words quote.split( ); // 重置单词索引 wordIndex 0; // UI 更新为每个单词创建 span便于单独设置样式 const spanWords words.map(function(word) { return span${word} /span}); quoteElement.innerHTML spanWords.join(); // 高亮第一个单词 quoteElement.childNodes[0].className highlight; // 清除历史消息 messageElement.innerText ; // 准备输入框清空、聚焦 typedValueElement.value ; typedValueElement.focus(); // 启动计时器 startTime new Date().getTime(); });单词追踪用Math.floor()Math.random()随机选引语用split( )切分为单词数组将wordIndex重置为 0 准备新一轮。UI 搭建将每个单词包进span并拼接为字符串一次性写入innerHTML高效更新 DOM为第一个单词加上highlight类清空上局消息。输入框准备清空残留文本并调用.focus()让玩家可以立刻开始输入。计时初始化用new Date().getTime()记录当前时间戳为计算输入速度与完成耗时奠定基础。第三步打字逻辑input 事件这是游戏的心脏。每一次键入字符代码都会校验输入、给出反馈并决定下一步。实现采用瀑布式waterfall判断——从最具体到最一般的条件依次检查// script.js 末尾 typedValueElement.addEventListener(input, () { // 获取当前应输入的单词 const currentWord words[wordIndex]; // 获取当前输入值 const typedValue typedValueElement.value; if (typedValue currentWord wordIndex words.length - 1) { // 场景1整句完成 const elapsedTime new Date().getTime() - startTime; const message CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.; messageElement.innerText message; } else if (typedValue.endsWith( ) typedValue.trim() currentWord) { // 场景2当前单词完成以空格结尾且去除空格后完全匹配 typedValueElement.value ; wordIndex; // 清除所有单词的高亮样式 for (const wordElement of quoteElement.childNodes) { wordElement.className ; } // 高亮下一个单词 quoteElement.childNodes[wordIndex].className highlight; } else if (currentWord.startsWith(typedValue)) { // 场景3到目前为止输入正确 typedValueElement.className ; } else { // 场景4错误状态 typedValueElement.className error; } });四个分支逐一解析 场景 1 —— 整句完成输入值完全匹配当前词且当前词是最后一个词。用当前时间戳减去startTime得到耗时毫秒除以 1000 换算为秒展示祝贺消息。✅ 场景 2 —— 单词完成输入以空格结尾且trim()后与当前词完全一致。清空输入框、wordIndex前进到下一个词、清除全部高亮并为新词添加highlight类。 场景 3 —— 输入进行中当前词以已输入内容开头startsWith说明到目前为止正确移除错误样式允许继续输入。❌ 场景 4 —— 错误状态输入内容与预期不匹配为输入框加上error类立即给出红色视觉反馈。源码对照官方 Solution 的工程化重构仓库中的完整参考实现位于 4-typing-game/solution/采用现代 ES6 语法对教学版进行了重构非常值得对照学习工具函数拆分index.js 将随机取引语getRandomQuote、渲染引语为 spanrenderQuote与高亮当前词highlightWord抽象为独立函数逻辑更清晰、可复用性更强消息系统用messages对象统一管理成功、错误、开始三类提示文案替换散落的字符串拼接classListAPI用classList.toggle(highlight, i index)与classList.add/remove(error)取代直接赋值className代码更健壮游戏结束处理完成引语后通过typedValueElement.disabled true禁用输入框对应挑战列表中的UI State ManagementUI 增强index.html 引入 Font Awesome 图标、隐藏式 label视觉隐藏但保留给屏幕阅读器、日期时间显示index.css 提供了渐变背景、卡片式引语展示、按钮悬停动画与移动端媒体查询等完整视觉方案从教学版到 Solution 的演进展示了同一套事件驱动逻辑在真实项目中的组织方式状态集中管理、行为函数化、样式类原子化。测试与调试点击 Start 开始游戏运行效果可参考仓库中的演示动画 demo.gif。测试清单点击 Start 是否显示随机引语输入时当前词是否正确高亮错误输入是否出现错误样式完成单词后高亮是否正确前进完成整条引语后是否显示含耗时的成功消息常见调试技巧按 F12 打开浏览器控制台检查 JavaScript 报错确认所有文件名完全一致区分大小写确认 Live Server 正在运行并正常刷新多试几条引语验证随机选取逻辑进阶挑战与课后作业Challenge为游戏增加高级功能功能描述练习的技能输入控制游戏完成后禁用input事件监听点击按钮时重新启用事件管理与状态控制UI 状态管理玩家完成引语后禁用文本框DOM 属性操作模态对话框用模态对话框展示成功消息高级 UI 模式与无障碍最高分系统用localStorage持久化最高分浏览器存储 API 与数据持久化实现提示研究localStorage.setItem()与localStorage.getItem()练习动态添加/移除事件监听器探索 HTML dialog 元素或 CSS 模态模式注意禁用/启用表单控件时的无障碍设计。Copilot Agent 挑战难度自适应系统仓库还给出了一个基于 Agent 模式的扩展挑战为打字游戏实现难度自适应系统——跟踪 WPM每分钟字数与准确率在 Easy简单引语、Medium当前引语、Hard带标点的复杂引语三档间自动切换UI 展示当前难度与玩家统计连续 3 次良好表现后通过连击计数提升难度并用颜色、动画给出难度变化反馈同时保持 ARIA 无障碍标注。课后作业创建全新键盘游戏作业要求详见 assignment.md设计一个使用键盘事件完成特定任务的小游戏可以是另一种打字游戏、按键绘制像素的画板应用、方向键控制的街机游戏等。必须包含事件监听器响应至少 3 种不同的键盘事件视觉反馈对用户输入立即给出视觉响应游戏逻辑包含计分、关卡或进度机制用户界面清晰的说明与直观的操作作业提供了完整的评价量表Rubric从功能完整性、代码质量、用户体验、创意四个维度划分优秀 / 达标 / 待改进三档可作为自评标准。学习路径从 5 分钟到专业级的能力成长课程给出了清晰的进阶时间线详见 课程概述 中的 Timeline 图Setup10 分钟搭建 HTML 基础、CSS 样式、创建 JS 文件用户界面20 分钟输入框、按钮、显示区与响应式布局事件处理25 分钟键盘/鼠标事件、实时反馈、状态管理游戏逻辑30 分钟引语生成、字符比对、准确率计算、计时器性能追踪35 分钟WPM 计算、错误追踪、进度可视化、结果展示打磨与增强45 分钟视觉反馈、音效、动画、无障碍特性高级功能1 周难度等级、排行榜、自定义引语、多人模式专业技能1 个月性能优化、代码架构、测试策略、部署模式分阶段行动清单5 分钟打开浏览器控制台用addEventListener监听键盘事件创建带输入框的简单 HTML 页面测试键入检测练习用字符串比较对目标文本用setTimeout理解定时函数。1 小时完成课后测验理解事件驱动编程构建带单词校验的基础版打字游戏添加正确/错误输入的视觉反馈实现基于速度与准确率的简单计分系统用 CSS 美化界面。1 周完成全功能打字游戏添加不同词汇复杂度的难度等级实现用户统计WPM、长期准确率加入音效与动画适配触屏移动端上线分享并收集反馈。1 个月构建多个探索不同交互模式的游戏学习游戏循环、状态管理与性能优化为开源游戏项目做贡献掌握高级计时概念与平滑动画建立展示各类交互应用的 portfolio指导其他对游戏开发感兴趣的学习者。完成后你将掌握的技能事件驱动编程构建对输入实时响应的用户界面实时反馈即时的视觉与性能更新性能测量精确的计时与计分系统游戏状态管理控制应用流程与用户体验交互设计创造沉浸式的用户交互现代 Web API善用浏览器能力实现丰富交互无障碍模式面向所有用户的包容性设计这些技能可直接迁移到网页应用任意交互界面或仪表盘、教育软件学习平台与技能评估工具、生产力工具文本编辑器、IDE、协作软件、游戏行业浏览器游戏与互动娱乐以及移动开发触屏界面与手势处理。结语事件驱动编程是让网页活起来的核心概念下拉菜单、边输入边校验的表单、响应点击的游戏……这一切背后都是事件监听与响应的魔法。完成本项目后你已经掌握了驱动每一款互动网站与应用的底层机制——你不仅在学习写代码更在学着创造直观、引人入胜的用户体验。接下来你完全有基础去探索高级游戏框架、实时多人系统或更复杂的交互应用了。本课程模块由 Christopher Harrison 编写隶属于 Web-Dev-For-Beginners 课程体系。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考