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本文基于 Web-Dev-For-Beginners 课程第 4 课的打字游戏项目完整讲解事件驱动编程Event-Driven Programming的核心机制如何用click与input事件监听器驱动一个逐词校验的打字速度游戏。读完本文你将掌握事件监听器的注册方式、常见事件类型的选用、游戏状态引语数组、词索引、起始时间的管理方法以及逐字符实时校验的瀑布式判断逻辑并能对照仓库内置的参考答案实现理解工程化改进方向。为什么选打字游戏来入门事件驱动编程打字速度是开发者一项常被低估的核心技能——从大脑到代码编辑器的管道越快想法落地越快。而最有趣的练习方式就是把它做成游戏本课程的打字游戏会随机抽取一句 Sherlock Holmes 的名言实时追踪你的输入速度与准确率错一个字符立刻给出视觉反馈。打字游戏恰好是理解事件驱动编程的绝佳载体原因在于它完整覆盖了三类事件事件来源事件类型游戏中的作用按键输入input文本输入事件逐字符校验、词推进、错误高亮按钮点击click鼠标事件开始/重置游戏、随机抽取新引语时间推移时间测量Date记录起始时间、计算完成耗时事件驱动编程的核心思想网页代码不关心用户何时点击或开始输入——可能立即发生也可能五分钟之后甚至根本不会发生。因此代码不能像菜谱那样从头到尾顺序执行而是要耐心地等待某事发生。浏览器会把用户的每次点击、每次按键封装成事件event发送给 JavaScript开发者通过注册事件监听器event listener来监听特定事件并在其发生时执行自定义函数。可以把事件监听器想象成代码的门铃先安装门铃调用addEventListener()告诉它监听哪种声音事件名如click、input再指定门铃响起时做什么自定义处理函数。事件监听器的工作方式概括为四点监听特定用户动作点击、按键、鼠标移动事件发生时执行自定义代码对用户交互即时响应同一个元素可以挂载多个不同的监听器。需要说明的是创建事件监听器有多种写法可以用匿名函数或命名函数可以直接给onclick等属性赋值也可以用addEventListener()。课程练习统一聚焦addEventListener()加匿名函数这一组合因为它是 web 开发者最常用的方式也最灵活——它对几乎所有事件通用事件名可以作为参数传入。常用事件一览浏览器提供了数十种可监听的事件任何用户在页面上的操作基本都会触发事件但多数交互应用只依赖其中少数几个。课程列出的常用事件如下事件描述常见用途click用户点击了某个元素按钮、链接、交互元素contextmenu用户点击了鼠标右键自定义右键菜单select用户选中了一段文本文本编辑、复制操作input用户输入了文本表单校验、实时搜索理解这些事件类型的关键它们在用户与页面元素交互时触发通过事件对象携带关于用户动作的详细信息使应用能够响应式地更新界面且行为在不同浏览器与设备上保持一致。前置知识清单开始之前建议确认自己对以下概念足够熟悉不熟悉也没关系边做边查是最好的巩固方式创建文本输入框与按钮控件HTML 表单元素使用 CSS 类class设置样式JavaScript 基础创建数组array生成随机数Math.random()获取当前时间Date。可以做一个快速自检能否解释这些概念如何协同工作事件Events在用户与元素交互时触发处理函数Handlers消费这些事件并更新游戏状态CSS 为用户提供视觉反馈时间测量Timing支撑性能统计与游戏推进。游戏的整体流程游戏运行流程可以概括为玩家点击 Start 按钮后界面随机显示一句引语玩家在下方的文本框中逐字输入当前正在输入的词以高亮标识引导注意力输入正确时保持正常样式出错时立即显示错误样式每完成一个词自动清空输入框并推进到下一个词当最后一词完成后计算并显示总耗时。从课程主文档的学习路径设计看一个完整的开发周期大致是搭建项目结构约 10 分钟→ 构建用户界面约 20 分钟→ 编写事件处理约 25 分钟→ 实现核心游戏逻辑约 30 分钟→ 加入性能追踪约 35 分钟→ 打磨体验约 45 分钟。功能上则覆盖引语随机选取、计时管理、准确率追踪、分数计算、键盘/鼠标事件处理、实时 UI 更新。项目初始化经典的三文件结构动手写代码前先组织好目录干净的文件结构能避免后期的混乱。本项目保持最简形态只用三个文件——这也是驱动大部分 web 页面的经典三件套文件职责index.html页面的结构与内容script.js所有游戏逻辑与事件监听器style.css视觉呈现与样式定义创建独立的工作目录并进入它在控制台或终端中执行# Linux 或 macOS mkdir typing-game cd typing-game # Windows md typing-game cd typing-game这些命令的作用是创建名为typing-game的项目目录自动进入该目录为开发搭建一个干净的工作区。然后在工作目录中用 VS Code 打开项目code .该命令会在当前目录启动 Visual Studio Code把整个项目文件夹载入编辑器之后所有开发工具都可以直接访问这三个文件。构建用户界面四个关键元素先想清楚游戏界面需要什么。作为一个打字游戏玩家需要看到要打的内容、看到当前状态/成功信息、有一个输入区域、有一个开始按钮。对应到 HTML 元素UI 元素用途HTML 元素引语显示区Quote Display显示要输入的文字带idquote的p消息区Message Area显示状态与成功信息带idmessage的p文本输入框Text Input玩家输入引语的位置带idtyped-value的input开始按钮Start Button启动游戏带idstart的button每个元素都需要唯一的id以便 JavaScript 精确操作。完整页面结构如下!-- inside 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 !-- This will display our quote -- p idmessage/p !-- This will display any status messages -- div input typetext aria-labelcurrent word idtyped-value / !-- The textbox for typing -- button typebutton idstartStart/button !-- To start the game -- /div script srcscript.js/script /body /html这段结构的要点在head中通过link relstylesheet引入样式表用标题加说明文字引导用户为动态内容预留两个带id的占位段落quote与message输入框带有aria-labelcurrent word无障碍属性供屏幕阅读器识别script标签放在/body之前加载 JavaScript保证脚本执行时 DOM 已构建完成。启动与热更新开发中应频繁测试以尽早发现问题。课程推荐安装 VS Code 的Live Server扩展它会在本地托管应用通常服务地址为https://localhost:5500并在每次保存文件时自动刷新浏览器。安装后按Ctrl-Shift-PmacOS 为Cmd-Shift-P打开命令面板输入 Live Server: Open with Live Server 即可启动。打开浏览器访问本地服务地址就能看到刚创建的页面。CSS 视觉反馈系统视觉反馈自计算机界面诞生之初就至关重要立即的视觉反馈能显著提升用户表现并减少错误。这个游戏的反馈规则很明确——玩家需要立刻知道当前该打哪个词并且一旦出错马上看到。因此只需要两个核心类/* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; }.highlight黄色背景高亮当前正在输入的词提供清晰的视觉引导.error浅珊瑚色背景加红色边框信号输入错误不打断用户输入流的同时给出即时反馈使用高对比度颜色兼顾可访问性与清晰的视觉传达。课程还鼓励自由发挥换字体、给标题上色、调整元素尺寸让页面更有吸引力。可以参考仓库中 solution/index.css 的完整样式——它在两个核心类之外还补充了全局box-sizing、渐变背景、聚焦态光晕input#typed-value:focus、按钮悬停动效以及 600px 断点的移动端响应式布局。JavaScript 第一步集中管理常量与状态有了 HTML 结构和 CSS 样式游戏还只是一辆没有引擎的车。JavaScript 是引擎让一切真正运转起来。课程建议分三步走步骤目的你将学到创建常量准备引语与 DOM 引用变量管理与 DOM 选取开始游戏的事件监听器处理游戏初始化事件处理与 UI 更新输入事件监听器实时处理用户输入输入校验与动态反馈先创建script.js文件然后写入资源准备代码// inside script.js // all of our quotes 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., ]; // store the list of words and the index of the word the player is currently typing let words []; let wordIndex 0; // the starting time let startTime Date.now(); // page elements const quoteElement document.getElementById(quote); const messageElement document.getElementById(message); const typedValueElement document.getElementById(typed-value);这段游戏状态初始化涉及四类数据数据类型用途示例引语数组存储所有候选引语[Quote 1, Quote 2, ...]词数组把当前引语拆成单词[When, you, have, ...]词索引追踪玩家正在打哪个词0, 1, 2, 3...起始时间计算耗时用于计分Date.now()以及三个 UI 元素引用typed-value玩家输入、quote引语显示、message状态消息。变量声明的取舍值得注意引语数组用const因为它在运行时不会被重新赋值words、wordIndex、startTime用let因为游戏过程中它们会不断更新。把 DOM 元素缓存为常量还有一个工程上的好处可以随时通过document.getElementById()取到元素而高频引用时用常量替代字符串字面量可以避免 ID 拼写错误、提升可读性、获得 IDE 的自动补全支持未来改名也更易重构。课程同时提示Vue.js、React 等框架可以帮助更好地集中管理这类逻辑。引语数组是开放的欢迎加入更多名言。开始逻辑click 事件监听器这是你的代码第一次真正对点击做出反应的时刻。玩家何时点击 Start 按钮不可预知——可能马上点也可能先去泡杯咖啡——但点击发生时游戏必须立刻活过来。点击start需要完成随机选取引语、初始化界面、设置当前词追踪与计时。在script.js末尾添加// at the end of script.js document.getElementById(start).addEventListener(click, () { // get a quote const quoteIndex Math.floor(Math.random() * quotes.length); const quote quotes[quoteIndex]; // Put the quote into an array of words words quote.split( ); // reset the word index for tracking wordIndex 0; // UI updates // Create an array of span elements so we can set a class const spanWords words.map(function(word) { return span${word} /span}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML spanWords.join(); // Highlight the first word quoteElement.childNodes[0].className highlight; // Clear any prior messages messageElement.innerText ; // Setup the textbox // Clear the textbox typedValueElement.value ; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime new Date().getTime(); });按逻辑分块解读词追踪准备用Math.floor(Math.random() * quotes.length)生成[0, quotes.length)范围内的随机下标选取引语用split( )按空格把引语拆成单词数组把wordIndex重置为 0为新一轮游戏准备初始状态。UI 构建与显示用map为每个词包裹span得到可以单独设置 class 的元素数组再join()拼成字符串一次性写入quoteElement.innerHTML——相比逐个插入这是一次性 DOM 更新更高效随后给第一个词的 span 加上highlight类高亮首词并清空messageElement.innerText清除上一局的残留消息。输入框准备清空输入框、调用focus()把焦点设到文本框上让玩家点完 Start 就能直接打字无需再点一次输入框。计时器初始化new Date().getTime()捕获当前时间戳毫秒为最终计算耗时做准备。注意它与常量区的Date.now()语义一致两者都返回当前 Unix 时间戳毫秒数。打字逻辑input 事件监听器与四种状态这是游戏的心脏。每当有人敲下一个字符代码都要完成三件事检查他打了什么、给出反馈、决定下一步。这段代码采用了瀑布式waterfall判断结构——从最特殊的情况到最一般的情况依次检查一旦命中立即执行对应分支// at the end of script.js typedValueElement.addEventListener(input, () { // Get the current word const currentWord words[wordIndex]; // get the current value const typedValue typedValueElement.value; if (typedValue currentWord wordIndex words.length - 1) { // end of sentence // Display success 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) { // end of word // clear the typedValueElement for the new word typedValueElement.value ; // move to the next word wordIndex; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className ; } // highlight the new word quoteElement.childNodes[wordIndex].className highlight; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className ; } else { // error state typedValueElement.className error; } });四个分支分别对应四种游戏状态场景 1整句完成。判断条件是输入值完全等于当前词且当前词就是最后一个词wordIndex words.length - 1。命中后计算耗时当前时间戳减起始时间戳得到毫秒差除以 1000 换算为秒拼成祝贺消息写入message元素。场景 2单词完成。用两个信号联合判定词边界输入以空格结尾endsWith( )说明玩家按下了空格键且去掉空白后的输入与当前词完全一致trim() currentWord。命中后依次执行清空输入框、wordIndex推进到下一词、遍历quoteElement.childNodes把每个 span 的className重置为空清除旧高亮、给新词的 span 加上highlight。这一串状态变更 视觉同步就是游戏状态管理的缩影。场景 3正在正确输入。用currentWord.startsWith(typedValue)验证已输入的内容是当前词的前缀——只要前缀匹配就说明暂时没错清除输入框上可能残留的error样式让玩家继续打字不被打断。场景 4错误状态。走到最后的else意味着输入已不可能是当前词的前缀给输入框加上error类触发浅珊瑚色背景与红边框玩家能立即定位并纠正错误。这套判断顺序是经过设计的最具体、最重的判定整句完成放最前最宽泛的兜底错误放最后。若把前缀匹配放在词完成判定之前带空格的输入永远不会被识别为词边界游戏就会卡死在第一个词上。事件模型小结把两个监听器放在一起看整个游戏就是事件 → 处理函数 → 状态变更 → DOM 更新的循环click事件触发start处理函数重置状态wordIndex 0、清空输入、重设startTime、生成新引语、渲染 span、聚焦输入框input事件触发校验处理函数读取当前状态、比较输入、更新高亮与错误样式、推进词索引、判定终局。测试与调试写完就测点击 Start 然后开始输入效果应与演示动画一致引语随机出现、当前词高亮、错字变红、完成后显示耗时。建议按以下清单逐项验证点击 Start 是否显示了一句随机引语输入时当前词的高亮是否正确打错字时错误样式是否立即出现完成一个词后高亮是否正确推进到下一个词完成整句时是否显示带耗时的完成消息。常见调试技巧打开浏览器控制台F12查看 JavaScript 报错确认文件名完全一致Linux/macOS 下区分大小写确认 Live Server 正在运行并正常热刷新多开几局测试不同引语验证随机选取是否工作。参考答案实现从教学版到工程化的对照仓库在 4-typing-game/solution/ 目录提供了完整可运行的参考答案与教程的匿名函数 getElementByIdclassName赋值风格相比做了若干工程化改进值得逐条对照学习改进点教程版参考答案DOM 选取document.getElementById(quote)document.querySelector(#quote)见 solution/index.js监听器组织逻辑内联在匿名箭头函数中抽出命名函数startGame、handleTyping后注册见 solution/index.js类名操作直接赋值element.className使用classList.toggle(highlight, i index)精确切换单个类见 solution/index.js文案管理字符串字面量散落各处集中为messages对象success/error/start见 solution/index.js终局处理仅显示消息额外typedValueElement.disabled true禁用输入框防止完成后继续触发input见 solution/index.js引语渲染手动map加 joinrenderQuote工具函数中把随机选取与 span 渲染合并首词直接带highlight类从源码结构看答案版把随机引语封装为getRandomQuotesolution/index.js把高亮某词封装为highlightWordsolution/index.js核心校验逻辑handleTyping的四个分支顺序与教程完全一致印证了瀑布式判断的稳定性。另外参考答案的 solution/index.html 在教程页面基础上还叠加了一个小型实时功能一个updateDateTime()函数把当前日期格式化为DD/MM/YYYY、时间格式化为 12 小时制HH:MM AM/PM先执行一次再用setInterval(updateDateTime, 60000)每分钟刷新一次。这是一个很好的补充示例——它展示了如何用定时器事件持续驱动 UI 更新并且配合.hidden-label视觉隐藏但保留给屏幕阅读器的label维持了可访问性。样式层面solution/index.css 演示了聚焦态:focus边框变色加阴影、按钮悬停transform: translateY(-2px)与媒体查询响应式布局的完整写法。进阶挑战与课后作业课程在掌握基础之后布置了两类进阶任务。功能增强挑战针对本游戏特性描述锻炼的技能输入控制完成时禁用input事件监听器点击按钮时重新启用事件管理与状态控制UI 状态管理玩家完成引语时禁用文本框DOM 属性操作模态对话框用模态框展示成功消息高级 UI 模式与可访问性最高分系统用localStorage存储最高分浏览器存储 API 与数据持久化配套实现提示研究localStorage.setItem()与localStorage.getItem()做持久化练习动态添加/移除事件监听器探索 HTMLdialog元素或纯 CSS 模态模式在禁用/启用表单控件时考虑可访问性。Copilot Agent 挑战用 Agent 模式为打字游戏实现难度自适应系统——追踪玩家的每分钟词数WPM与准确率在三档难度间自动切换简单引语/当前引语/带标点的复杂引语在 UI 上展示当前难度与统计连续 3 次良好表现后提升难度连续计数器 streak并用颜色与动画反馈难度变化要求补充必要的 HTML、CSS、JS包含错误处理并保留 ARIA 标签的可访问性。课后作业完整作业见 assignment.md要求设计并构建一个自己的键盘游戏节奏游戏、像素画板、词链构建、贪吃蛇、音乐合成器、鼓手键盘等均可硬性要求包括至少响应 3 种不同的键盘事件、提供即时的视觉反馈、包含计分/关卡/进度等游戏逻辑、界面有清晰的说明与直观的操作。评分维度覆盖功能完整度、代码质量事件处理是否高效、组织是否清晰、用户体验操控是否直观、反馈是否及时与创意是否对键盘事件有新颖用法每档按优秀/合格/待改进三级评定。技能盘点与现实应用完成这个项目后课程总结的能力清单是事件驱动编程响应用户输入的响应式界面、实时反馈即时的视觉与性能更新、性能测量精确的计时与计分系统、游戏状态管理控制应用流程与用户体验、交互设计有吸引力的用户体验、现代 Web API利用浏览器能力实现丰富交互、可访问性模式面向所有用户的包容性设计。从源码结构看这套技能在课程的其他项目中反复出现浏览器扩展项目用同类事件监听处理工具栏交互太空游戏用requestAnimationFrame与按键事件驱动游戏循环——事件驱动模式是贯穿整门课程的公共底座。这些能力可直接迁移到各类交互式 web 应用与仪表盘教育软件学习平台、技能测评工具生产力工具文本编辑器、IDE、协作软件浏览器游戏与互动娱乐以及基于触摸与手势的移动端界面。按课程给出的学习节奏最短路径是5 分钟内用addEventListener在控制台监听键盘事件、做一个最简输入检测页1 小时内完成词校验、视觉反馈与基础计分一周内补齐难度分级、WPM 与准确率统计、动效与移动端适配一个月则可以扩展到多个交互游戏深入游戏循环、状态管理与性能优化。打字游戏虽小但它完整走通了事件 → 处理 → 状态 → 渲染这条所有交互型 web 应用都会经历的路径。【免费下载链接】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），仅供参考 Web-Dev-For-Beginners 打字游戏教程：用事件驱动编程打造实时输入反馈与游戏状态管理
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本文基于 Web-Dev-For-Beginners 课程第 4 课的打字游戏项目完整讲解事件驱动编程Event-Driven Programming的核心机制如何用click与input事件监听器驱动一个逐词校验的打字速度游戏。读完本文你将掌握事件监听器的注册方式、常见事件类型的选用、游戏状态引语数组、词索引、起始时间的管理方法以及逐字符实时校验的瀑布式判断逻辑并能对照仓库内置的参考答案实现理解工程化改进方向。为什么选打字游戏来入门事件驱动编程打字速度是开发者一项常被低估的核心技能——从大脑到代码编辑器的管道越快想法落地越快。而最有趣的练习方式就是把它做成游戏本课程的打字游戏会随机抽取一句 Sherlock Holmes 的名言实时追踪你的输入速度与准确率错一个字符立刻给出视觉反馈。打字游戏恰好是理解事件驱动编程的绝佳载体原因在于它完整覆盖了三类事件事件来源事件类型游戏中的作用按键输入input文本输入事件逐字符校验、词推进、错误高亮按钮点击click鼠标事件开始/重置游戏、随机抽取新引语时间推移时间测量Date记录起始时间、计算完成耗时事件驱动编程的核心思想网页代码不关心用户何时点击或开始输入——可能立即发生也可能五分钟之后甚至根本不会发生。因此代码不能像菜谱那样从头到尾顺序执行而是要耐心地等待某事发生。浏览器会把用户的每次点击、每次按键封装成事件event发送给 JavaScript开发者通过注册事件监听器event listener来监听特定事件并在其发生时执行自定义函数。可以把事件监听器想象成代码的门铃先安装门铃调用addEventListener()告诉它监听哪种声音事件名如click、input再指定门铃响起时做什么自定义处理函数。事件监听器的工作方式概括为四点监听特定用户动作点击、按键、鼠标移动事件发生时执行自定义代码对用户交互即时响应同一个元素可以挂载多个不同的监听器。需要说明的是创建事件监听器有多种写法可以用匿名函数或命名函数可以直接给onclick等属性赋值也可以用addEventListener()。课程练习统一聚焦addEventListener()加匿名函数这一组合因为它是 web 开发者最常用的方式也最灵活——它对几乎所有事件通用事件名可以作为参数传入。常用事件一览浏览器提供了数十种可监听的事件任何用户在页面上的操作基本都会触发事件但多数交互应用只依赖其中少数几个。课程列出的常用事件如下事件描述常见用途click用户点击了某个元素按钮、链接、交互元素contextmenu用户点击了鼠标右键自定义右键菜单select用户选中了一段文本文本编辑、复制操作input用户输入了文本表单校验、实时搜索理解这些事件类型的关键它们在用户与页面元素交互时触发通过事件对象携带关于用户动作的详细信息使应用能够响应式地更新界面且行为在不同浏览器与设备上保持一致。前置知识清单开始之前建议确认自己对以下概念足够熟悉不熟悉也没关系边做边查是最好的巩固方式创建文本输入框与按钮控件HTML 表单元素使用 CSS 类class设置样式JavaScript 基础创建数组array生成随机数Math.random()获取当前时间Date。可以做一个快速自检能否解释这些概念如何协同工作事件Events在用户与元素交互时触发处理函数Handlers消费这些事件并更新游戏状态CSS 为用户提供视觉反馈时间测量Timing支撑性能统计与游戏推进。游戏的整体流程游戏运行流程可以概括为玩家点击 Start 按钮后界面随机显示一句引语玩家在下方的文本框中逐字输入当前正在输入的词以高亮标识引导注意力输入正确时保持正常样式出错时立即显示错误样式每完成一个词自动清空输入框并推进到下一个词当最后一词完成后计算并显示总耗时。从课程主文档的学习路径设计看一个完整的开发周期大致是搭建项目结构约 10 分钟→ 构建用户界面约 20 分钟→ 编写事件处理约 25 分钟→ 实现核心游戏逻辑约 30 分钟→ 加入性能追踪约 35 分钟→ 打磨体验约 45 分钟。功能上则覆盖引语随机选取、计时管理、准确率追踪、分数计算、键盘/鼠标事件处理、实时 UI 更新。项目初始化经典的三文件结构动手写代码前先组织好目录干净的文件结构能避免后期的混乱。本项目保持最简形态只用三个文件——这也是驱动大部分 web 页面的经典三件套文件职责index.html页面的结构与内容script.js所有游戏逻辑与事件监听器style.css视觉呈现与样式定义创建独立的工作目录并进入它在控制台或终端中执行# Linux 或 macOS mkdir typing-game cd typing-game # Windows md typing-game cd typing-game这些命令的作用是创建名为typing-game的项目目录自动进入该目录为开发搭建一个干净的工作区。然后在工作目录中用 VS Code 打开项目code .该命令会在当前目录启动 Visual Studio Code把整个项目文件夹载入编辑器之后所有开发工具都可以直接访问这三个文件。构建用户界面四个关键元素先想清楚游戏界面需要什么。作为一个打字游戏玩家需要看到要打的内容、看到当前状态/成功信息、有一个输入区域、有一个开始按钮。对应到 HTML 元素UI 元素用途HTML 元素引语显示区Quote Display显示要输入的文字带idquote的p消息区Message Area显示状态与成功信息带idmessage的p文本输入框Text Input玩家输入引语的位置带idtyped-value的input开始按钮Start Button启动游戏带idstart的button每个元素都需要唯一的id以便 JavaScript 精确操作。完整页面结构如下!-- inside 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 !-- This will display our quote -- p idmessage/p !-- This will display any status messages -- div input typetext aria-labelcurrent word idtyped-value / !-- The textbox for typing -- button typebutton idstartStart/button !-- To start the game -- /div script srcscript.js/script /body /html这段结构的要点在head中通过link relstylesheet引入样式表用标题加说明文字引导用户为动态内容预留两个带id的占位段落quote与message输入框带有aria-labelcurrent word无障碍属性供屏幕阅读器识别script标签放在/body之前加载 JavaScript保证脚本执行时 DOM 已构建完成。启动与热更新开发中应频繁测试以尽早发现问题。课程推荐安装 VS Code 的Live Server扩展它会在本地托管应用通常服务地址为https://localhost:5500并在每次保存文件时自动刷新浏览器。安装后按Ctrl-Shift-PmacOS 为Cmd-Shift-P打开命令面板输入 Live Server: Open with Live Server 即可启动。打开浏览器访问本地服务地址就能看到刚创建的页面。CSS 视觉反馈系统视觉反馈自计算机界面诞生之初就至关重要立即的视觉反馈能显著提升用户表现并减少错误。这个游戏的反馈规则很明确——玩家需要立刻知道当前该打哪个词并且一旦出错马上看到。因此只需要两个核心类/* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; }.highlight黄色背景高亮当前正在输入的词提供清晰的视觉引导.error浅珊瑚色背景加红色边框信号输入错误不打断用户输入流的同时给出即时反馈使用高对比度颜色兼顾可访问性与清晰的视觉传达。课程还鼓励自由发挥换字体、给标题上色、调整元素尺寸让页面更有吸引力。可以参考仓库中 solution/index.css 的完整样式——它在两个核心类之外还补充了全局box-sizing、渐变背景、聚焦态光晕input#typed-value:focus、按钮悬停动效以及 600px 断点的移动端响应式布局。JavaScript 第一步集中管理常量与状态有了 HTML 结构和 CSS 样式游戏还只是一辆没有引擎的车。JavaScript 是引擎让一切真正运转起来。课程建议分三步走步骤目的你将学到创建常量准备引语与 DOM 引用变量管理与 DOM 选取开始游戏的事件监听器处理游戏初始化事件处理与 UI 更新输入事件监听器实时处理用户输入输入校验与动态反馈先创建script.js文件然后写入资源准备代码// inside script.js // all of our quotes 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., ]; // store the list of words and the index of the word the player is currently typing let words []; let wordIndex 0; // the starting time let startTime Date.now(); // page elements const quoteElement document.getElementById(quote); const messageElement document.getElementById(message); const typedValueElement document.getElementById(typed-value);这段游戏状态初始化涉及四类数据数据类型用途示例引语数组存储所有候选引语[Quote 1, Quote 2, ...]词数组把当前引语拆成单词[When, you, have, ...]词索引追踪玩家正在打哪个词0, 1, 2, 3...起始时间计算耗时用于计分Date.now()以及三个 UI 元素引用typed-value玩家输入、quote引语显示、message状态消息。变量声明的取舍值得注意引语数组用const因为它在运行时不会被重新赋值words、wordIndex、startTime用let因为游戏过程中它们会不断更新。把 DOM 元素缓存为常量还有一个工程上的好处可以随时通过document.getElementById()取到元素而高频引用时用常量替代字符串字面量可以避免 ID 拼写错误、提升可读性、获得 IDE 的自动补全支持未来改名也更易重构。课程同时提示Vue.js、React 等框架可以帮助更好地集中管理这类逻辑。引语数组是开放的欢迎加入更多名言。开始逻辑click 事件监听器这是你的代码第一次真正对点击做出反应的时刻。玩家何时点击 Start 按钮不可预知——可能马上点也可能先去泡杯咖啡——但点击发生时游戏必须立刻活过来。点击start需要完成随机选取引语、初始化界面、设置当前词追踪与计时。在script.js末尾添加// at the end of script.js document.getElementById(start).addEventListener(click, () { // get a quote const quoteIndex Math.floor(Math.random() * quotes.length); const quote quotes[quoteIndex]; // Put the quote into an array of words words quote.split( ); // reset the word index for tracking wordIndex 0; // UI updates // Create an array of span elements so we can set a class const spanWords words.map(function(word) { return span${word} /span}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML spanWords.join(); // Highlight the first word quoteElement.childNodes[0].className highlight; // Clear any prior messages messageElement.innerText ; // Setup the textbox // Clear the textbox typedValueElement.value ; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime new Date().getTime(); });按逻辑分块解读词追踪准备用Math.floor(Math.random() * quotes.length)生成[0, quotes.length)范围内的随机下标选取引语用split( )按空格把引语拆成单词数组把wordIndex重置为 0为新一轮游戏准备初始状态。UI 构建与显示用map为每个词包裹span得到可以单独设置 class 的元素数组再join()拼成字符串一次性写入quoteElement.innerHTML——相比逐个插入这是一次性 DOM 更新更高效随后给第一个词的 span 加上highlight类高亮首词并清空messageElement.innerText清除上一局的残留消息。输入框准备清空输入框、调用focus()把焦点设到文本框上让玩家点完 Start 就能直接打字无需再点一次输入框。计时器初始化new Date().getTime()捕获当前时间戳毫秒为最终计算耗时做准备。注意它与常量区的Date.now()语义一致两者都返回当前 Unix 时间戳毫秒数。打字逻辑input 事件监听器与四种状态这是游戏的心脏。每当有人敲下一个字符代码都要完成三件事检查他打了什么、给出反馈、决定下一步。这段代码采用了瀑布式waterfall判断结构——从最特殊的情况到最一般的情况依次检查一旦命中立即执行对应分支// at the end of script.js typedValueElement.addEventListener(input, () { // Get the current word const currentWord words[wordIndex]; // get the current value const typedValue typedValueElement.value; if (typedValue currentWord wordIndex words.length - 1) { // end of sentence // Display success 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) { // end of word // clear the typedValueElement for the new word typedValueElement.value ; // move to the next word wordIndex; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className ; } // highlight the new word quoteElement.childNodes[wordIndex].className highlight; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className ; } else { // error state typedValueElement.className error; } });四个分支分别对应四种游戏状态场景 1整句完成。判断条件是输入值完全等于当前词且当前词就是最后一个词wordIndex words.length - 1。命中后计算耗时当前时间戳减起始时间戳得到毫秒差除以 1000 换算为秒拼成祝贺消息写入message元素。场景 2单词完成。用两个信号联合判定词边界输入以空格结尾endsWith( )说明玩家按下了空格键且去掉空白后的输入与当前词完全一致trim() currentWord。命中后依次执行清空输入框、wordIndex推进到下一词、遍历quoteElement.childNodes把每个 span 的className重置为空清除旧高亮、给新词的 span 加上highlight。这一串状态变更 视觉同步就是游戏状态管理的缩影。场景 3正在正确输入。用currentWord.startsWith(typedValue)验证已输入的内容是当前词的前缀——只要前缀匹配就说明暂时没错清除输入框上可能残留的error样式让玩家继续打字不被打断。场景 4错误状态。走到最后的else意味着输入已不可能是当前词的前缀给输入框加上error类触发浅珊瑚色背景与红边框玩家能立即定位并纠正错误。这套判断顺序是经过设计的最具体、最重的判定整句完成放最前最宽泛的兜底错误放最后。若把前缀匹配放在词完成判定之前带空格的输入永远不会被识别为词边界游戏就会卡死在第一个词上。事件模型小结把两个监听器放在一起看整个游戏就是事件 → 处理函数 → 状态变更 → DOM 更新的循环click事件触发start处理函数重置状态wordIndex 0、清空输入、重设startTime、生成新引语、渲染 span、聚焦输入框input事件触发校验处理函数读取当前状态、比较输入、更新高亮与错误样式、推进词索引、判定终局。测试与调试写完就测点击 Start 然后开始输入效果应与演示动画一致引语随机出现、当前词高亮、错字变红、完成后显示耗时。建议按以下清单逐项验证点击 Start 是否显示了一句随机引语输入时当前词的高亮是否正确打错字时错误样式是否立即出现完成一个词后高亮是否正确推进到下一个词完成整句时是否显示带耗时的完成消息。常见调试技巧打开浏览器控制台F12查看 JavaScript 报错确认文件名完全一致Linux/macOS 下区分大小写确认 Live Server 正在运行并正常热刷新多开几局测试不同引语验证随机选取是否工作。参考答案实现从教学版到工程化的对照仓库在 4-typing-game/solution/ 目录提供了完整可运行的参考答案与教程的匿名函数 getElementByIdclassName赋值风格相比做了若干工程化改进值得逐条对照学习改进点教程版参考答案DOM 选取document.getElementById(quote)document.querySelector(#quote)见 solution/index.js监听器组织逻辑内联在匿名箭头函数中抽出命名函数startGame、handleTyping后注册见 solution/index.js类名操作直接赋值element.className使用classList.toggle(highlight, i index)精确切换单个类见 solution/index.js文案管理字符串字面量散落各处集中为messages对象success/error/start见 solution/index.js终局处理仅显示消息额外typedValueElement.disabled true禁用输入框防止完成后继续触发input见 solution/index.js引语渲染手动map加 joinrenderQuote工具函数中把随机选取与 span 渲染合并首词直接带highlight类从源码结构看答案版把随机引语封装为getRandomQuotesolution/index.js把高亮某词封装为highlightWordsolution/index.js核心校验逻辑handleTyping的四个分支顺序与教程完全一致印证了瀑布式判断的稳定性。另外参考答案的 solution/index.html 在教程页面基础上还叠加了一个小型实时功能一个updateDateTime()函数把当前日期格式化为DD/MM/YYYY、时间格式化为 12 小时制HH:MM AM/PM先执行一次再用setInterval(updateDateTime, 60000)每分钟刷新一次。这是一个很好的补充示例——它展示了如何用定时器事件持续驱动 UI 更新并且配合.hidden-label视觉隐藏但保留给屏幕阅读器的label维持了可访问性。样式层面solution/index.css 演示了聚焦态:focus边框变色加阴影、按钮悬停transform: translateY(-2px)与媒体查询响应式布局的完整写法。进阶挑战与课后作业课程在掌握基础之后布置了两类进阶任务。功能增强挑战针对本游戏特性描述锻炼的技能输入控制完成时禁用input事件监听器点击按钮时重新启用事件管理与状态控制UI 状态管理玩家完成引语时禁用文本框DOM 属性操作模态对话框用模态框展示成功消息高级 UI 模式与可访问性最高分系统用localStorage存储最高分浏览器存储 API 与数据持久化配套实现提示研究localStorage.setItem()与localStorage.getItem()做持久化练习动态添加/移除事件监听器探索 HTMLdialog元素或纯 CSS 模态模式在禁用/启用表单控件时考虑可访问性。Copilot Agent 挑战用 Agent 模式为打字游戏实现难度自适应系统——追踪玩家的每分钟词数WPM与准确率在三档难度间自动切换简单引语/当前引语/带标点的复杂引语在 UI 上展示当前难度与统计连续 3 次良好表现后提升难度连续计数器 streak并用颜色与动画反馈难度变化要求补充必要的 HTML、CSS、JS包含错误处理并保留 ARIA 标签的可访问性。课后作业完整作业见 assignment.md要求设计并构建一个自己的键盘游戏节奏游戏、像素画板、词链构建、贪吃蛇、音乐合成器、鼓手键盘等均可硬性要求包括至少响应 3 种不同的键盘事件、提供即时的视觉反馈、包含计分/关卡/进度等游戏逻辑、界面有清晰的说明与直观的操作。评分维度覆盖功能完整度、代码质量事件处理是否高效、组织是否清晰、用户体验操控是否直观、反馈是否及时与创意是否对键盘事件有新颖用法每档按优秀/合格/待改进三级评定。技能盘点与现实应用完成这个项目后课程总结的能力清单是事件驱动编程响应用户输入的响应式界面、实时反馈即时的视觉与性能更新、性能测量精确的计时与计分系统、游戏状态管理控制应用流程与用户体验、交互设计有吸引力的用户体验、现代 Web API利用浏览器能力实现丰富交互、可访问性模式面向所有用户的包容性设计。从源码结构看这套技能在课程的其他项目中反复出现浏览器扩展项目用同类事件监听处理工具栏交互太空游戏用requestAnimationFrame与按键事件驱动游戏循环——事件驱动模式是贯穿整门课程的公共底座。这些能力可直接迁移到各类交互式 web 应用与仪表盘教育软件学习平台、技能测评工具生产力工具文本编辑器、IDE、协作软件浏览器游戏与互动娱乐以及基于触摸与手势的移动端界面。按课程给出的学习节奏最短路径是5 分钟内用addEventListener在控制台监听键盘事件、做一个最简输入检测页1 小时内完成词校验、视觉反馈与基础计分一周内补齐难度分级、WPM 与准确率统计、动效与移动端适配一个月则可以扩展到多个交互游戏深入游戏循环、状态管理与性能优化。打字游戏虽小但它完整走通了事件 → 处理 → 状态 → 渲染这条所有交互型 web 应用都会经历的路径。【免费下载链接】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），仅供参考