项目：打字游戏

相关源文件

• 2-js-basics/2-functions-methods/README.md
• 2-js-basics/3-making-decisions/README.md
• 2-js-basics/4-arrays-loops/README.md
• 3-terrarium/1-intro-to-html/README.md
• 3-terrarium/2-intro-to-css/README.md
• 3-terrarium/3-intro-to-DOM-and-closures/README.md
• 4-typing-game/typing-game/README.md
• 5-browser-extension/1-about-browsers/README.md
• 5-browser-extension/2-forms-browsers-local-storage/README.md
• 5-browser-extension/3-background-tasks-and-performance/README.md

目的与范围

本文档提供了打字游戏项目的技术概述，该游戏演示了 JavaScript 中的事件驱动编程概念。游戏通过挑战玩家以尽可能快的速度和准确性输入提供的引语来测试玩家的打字技能。本文档涵盖了游戏的架构、核心组件、事件处理和实现细节。

打字游戏实现了关键的 Web 开发概念，包括：

• 事件驱动编程
• DOM 操作
• 事件监听器和处理器
• JavaScript 定时函数
• 条件状态逻辑

有关本课程中其他项目的信息，请参阅《Web 开发课程概述》。

来源：4-typing-game/typing-game/README.md1-38

系统架构

打字游戏具有由三个主要组件组成的简单而有效的架构

来源：4-typing-game/typing-game/README.md41-64

核心系统组件

1. 文件结构

项目包含三个基本文件：

typing-game/
│
├── index.html    # HTML structure and UI elements
├── script.js     # Game logic and event handling
└── style.css     # Styling for game elements

这些文件协同工作，创建了一个完整的、交互式的 Web 应用程序。

来源：4-typing-game/typing-game/README.md41-64

2. 用户界面

用户界面使用 HTML 构建，包含以下主要元素：

• 标题和说明
• 用于显示引语的段落元素
• 用于状态消息的段落元素
• 用于输入的字段
• 开始按钮

来源：4-typing-game/typing-game/README.md65-96 4-typing-game/typing-game/README.md114-130

3. 游戏常量和变量

游戏使用几个重要的 JavaScript 常量和变量来跟踪状态：

• quotes：包含所有可能引语的数组
• words：用于存储当前引语中单词的数组
• wordIndex：跟踪玩家当前正在输入的单词
• startTime：存储玩家开始输入的时间戳
• DOM 元素的引用：quoteElement、messageElement、typedValueElement

来源：4-typing-game/typing-game/README.md148-188

游戏流程和事件

打字游戏围绕事件驱动编程构建，其中用户操作会触发特定函数。游戏流程如下：

来源：4-typing-game/typing-game/README.md196-232 4-typing-game/typing-game/README.md254-292

实现细节

4. 事件监听器设置

游戏使用两个主要的事件监听器：

1. 开始按钮上的单击事件，用于初始化游戏
2. 文本字段上的输入事件，用于检查玩家的打字进度

来源：4-typing-game/typing-game/README.md196-232 4-typing-game/typing-game/README.md254-257

5. 游戏初始化

当玩家点击开始按钮时，游戏会：

1. 从引语数组中随机选择一个引语
2. 将引语拆分成单词
3. 将单词索引重置为 0
4. 为每个单词创建 span 元素以允许突出显示
5. 通过清除输入字段并将其聚焦来设置 UI
6. 记录开始时间以进行性能跟踪

来源：4-typing-game/typing-game/README.md202-232

6. 输入验证

输入事件处理程序将玩家的输入与当前单词进行比较。

验证逻辑采用瀑布模式，包含四种主要条件：

1. 引语完成：键入值与当前单词匹配，并且是最后一个单词。
2. 单词完成：键入值以空格结尾，并且与当前单词匹配。
3. 正确输入：当前单词以键入值为开头。
4. 错误状态：不满足上述任何条件。

来源：4-typing-game/typing-game/README.md257-292

7. UI 更新

游戏使用几种基于 CSS 的视觉指示器。

• 具有黄色背景的 .highlight 类标记当前单词。
• 具有红色背景的 .error 类指示输入错误。
• DOM 操作根据游戏状态设置不同部分的可见性。

来源：4-typing-game/typing-game/README.md114-130

关键概念和 JavaScript 功能

1. 事件驱动编程

打字游戏演示了事件驱动编程，其中：

• 代码响应事件执行，而不是按照预定顺序执行。
• 事件监听器注册要在特定事件发生时调用的函数。
• 浏览器事件循环管理这些事件处理程序的执行。

这种模式对于用户操作不可预测的交互式 Web 应用程序至关重要。

来源：4-typing-game/typing-game/README.md7-17

2. DOM 操作

该游戏广泛使用 JavaScript 来操作文档对象模型 (DOM)。

• 动态创建和修改元素
• 更改元素样式和类
• 根据游戏状态更新文本内容
• 根据需要显示/隐藏元素

来源：4-typing-game/typing-game/README.md214-221

3. JavaScript 数组方法

该实现使用了几个重要的数组方法：

• split()：将引语字符串转换为单词数组。
• map()：将单词数组元素转换为 HTML span 元素。
• join()：将 span 数组连接成单个 HTML 字符串。

来源：4-typing-game/typing-game/README.md209-217

4. JavaScript 定时

游戏利用 JavaScript 的定时功能来衡量玩家表现。

这提供了对玩家完成打字挑战所需时间的精确测量。

来源：4-typing-game/typing-game/README.md230-231 4-typing-game/typing-game/README.md267-269

扩展和挑战

基础打字游戏可以通过添加额外功能来扩展：

1. 在完成时禁用输入事件监听器，并在单击“开始”时重新启用它。
2. 玩家完成引语时禁用文本框。
3. 添加一个模态对话框以显示成功消息。
4. 使用 localStorage 实现高分跟踪。

这些扩展将涉及实现额外的事件处理程序和状态管理逻辑，进一步展示 JavaScript 在构建交互式应用程序方面的能力。

来源：4-typing-game/typing-game/README.md320-327

相关概念

打字游戏项目建立在之前模块中涵盖的基础 JavaScript 概念之上。

1. 做出决策：游戏广泛使用条件逻辑来确定正确的输入、单词完成和游戏状态。

2. 数组和循环：游戏操作单词数组并使用迭代来处理它们。

3. DOM 和事件：核心功能依赖于对 DOM 和事件处理的理解。

这些概念为构建此交互式打字游戏奠定了基础。

来源：2-js-basics/3-making-decisions/README.md11-12 2-js-basics/4-arrays-loops/README.md9-10