# 使用事件创建游戏
你有没有想过网站是如何知道你点击了按钮或在文本框中输入的？这就是事件驱动编程的魔力！还有什么比通过构建一个能够响应你每一次按键的打字速度游戏来学习这项关键技能更好的方法呢。
你将亲眼见证网页浏览器如何“与”你的JavaScript代码“对话”。每当你点击、输入或移动鼠标时，浏览器都会向你的代码发送小信息（我们称之为事件），而你来决定如何响应！
完成本教程后，你将创建一个能够跟踪你的打字速度和准确率的真实打字游戏。更重要的是，你将理解支撑每个互动网站的基本概念。让我们开始吧！
## 课前测验
[课前测验](https://ff-quizzes.netlify.app/web/quiz/21)
## 事件驱动编程
想想你最喜欢的应用或网站——是什么让它感觉生动且响应灵敏？这全在于它如何对你的操作做出反应！每次点击、敲击、滑动或按键都会产生我们所说的“事件”，真正的网页开发魔力就在这里。
让网页编程如此有趣的是：我们永远不知道别人什么时候会点击按钮或开始在文本框中输入。他们可能马上点击，等待五分钟，甚至可能从不点击！这种不可预测性意味着我们需要用不同的思路写代码。
我们不再写那种像食谱一样自上而下执行的代码，而是写一段坐在那里耐心等待事情发生的代码。这有点像19世纪的电报操作员，坐在设备旁，准备在信息通过电线传来时立刻响应。
那么什么是“事件”呢？简单来说，它就是发生的事情！你点击按钮——那是一个事件。你输入一个字母——那是一个事件。你移动鼠标——又是一个事件。
事件驱动编程让我们可以设置代码去“监听”和响应这些事件。我们创建称为**事件监听器**的特殊函数，它们耐心等待特定事件发生，然后在事件发生时立即行动。
把事件监听器想象成代码的门铃。你设置门铃（`addEventListener()`），告诉它要监听什么声音（比如“点击”或“按键”），然后指定有人按响时要执行什么（你自定义的函数）。
**事件监听器的工作原理：**
- **监听**用户的特定操作，如点击、按键或鼠标移动
- **执行**在指定事件发生时你的自定义代码
- **即时响应**用户交互，创造无缝体验
- **支持**对同一元素使用多个监听器处理不同事件
> **注意：**有很多创建事件监听器的方法。你可以使用匿名函数，也可以创建命名函数。可以使用各种快捷方式，比如设置`click`属性，或使用`addEventListener()`。本练习中我们重点使用`addEventListener()`和匿名函数，因为这是网络开发者最常用的方法。它也是最灵活的，适用于所有事件，事件名称可作为参数传入。
### 常见事件
虽然浏览器提供了数十种不同事件可供监听，但大多数互动应用只依赖其中几种核心事件。理解这些核心事件能为你构建复杂用户交互奠定基础。
有[数十种事件](https://developer.mozilla.org/docs/Web/Events)可供你在创建应用时监听。基本上，用户在页面上所做的任何操作都会触发事件，赋予你强大能力确保他们得到理想的体验。幸运的是，通常只需少数几个事件。下面是几个常用事件（包括我们在游戏中会用到的两个）：
| 事件 | 描述 | 常见用例 |
|-------|-------------|------------------|
| `click` | 用户点击了某个元素 | 按钮、链接、互动元素 |
| `contextmenu` | 用户点击了鼠标右键 | 自定义右键菜单 |
| `select` | 用户选中了文本 | 文本编辑、复制操作 |
| `input` | 用户输入了文本 | 表单验证、实时搜索 |
**理解这些事件类型：**
- **在用户与页面特定元素交互时触发**
- **通过事件对象提供有关用户行为的详细信息**
- **使你能创建响应式、互动性强的网页应用**
- **在不同浏览器和设备上表现一致**
## 创建游戏
既然了解了事件的工作原理，让我们用所学知识实践，创造点有用的东西。我们将创建一个打字速度游戏，演示事件处理的同时，帮助你培养一项重要的开发者技能。
我们要制作一个游戏，探索JavaScript中事件的工作方式。游戏将考验玩家的打字技能，而这正是所有开发者都应具备的一项被低估的技能。有趣的是，我们今天使用的QWERTY键盘布局其实是在1870年代为打字机设计的——良好的打字技能对程序员来说仍然非常宝贵！游戏的大致流程如下：
```mermaid
flowchart TD
A[玩家点击开始] --> B[显示随机引用]
B --> C[玩家在文本框中输入]
C --> D{单词完成？}
D -->|是| E[高亮下一个单词]
D -->|否| F{到目前为止正确吗？}
F -->|是| G[保持正常样式]
F -->|否| H[显示错误样式]
E --> I{引用完成？}
I -->|否| C
I -->|是| J[显示成功消息和时间]
G --> C
H --> C
```
**游戏的工作方式：**
- **玩家点击开始按钮时启动，显示随机引用文本**
- **实时逐词追踪玩家的输入进度**
- **高亮当前应输入的单词以帮助集中注意力**
- **为输入错误提供即时视觉反馈**
- **引用完成时计算并显示总用时**
让我们一起搭建游戏，学习事件！
### 文件结构
在开始编码之前，让我们先理清文件结构！从一开始就保持文件结构清晰，会让你避免日后困扰，使项目更为专业。😊
我们将保持简单，仅使用三个文件：`index.html`负责页面结构，`script.js`包含所有游戏逻辑，`style.css`负责美化页面。这是驱动大部分网页的经典组合！
**在控制台或终端窗口中执行以下命令，创建新文件夹以开始工作：**
```bash
# Linux 或 macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
**这些命令执行了以下操作：**
- **创建**名为`typing-game`的新目录存放项目文件
- **自动切换**至新建目录
- **为游戏开发设置**一个干净的工作空间
**打开 Visual Studio Code：**
```bash
code .
```
**该命令执行：**
- **在当前目录**启动 Visual Studio Code
- **打开**你的项目文件夹
- **提供**所有开发工具的访问
**在 Visual Studio Code 中为该文件夹添加三个文件，命名如下：**
- `index.html` - 包含游戏的结构和内容
- `script.js` - 处理所有游戏逻辑和事件监听
- `style.css` - 定义视觉外观和样式
## 创建用户界面
现在让我们构建游戏进行的舞台！把它想象成设计飞船的控制面板——确保玩家所需的一切都在预期位置。
让我们确定游戏到底需要哪些元素。如果你在玩打字游戏，会想在屏幕上看到什么？我们需要：
| UI 元素 | 目的 | HTML 元素 |
|------------|---------|-------------|
| 引用显示区 | 展示要打的文本 | ``，`id="quote"` |
| 消息区 | 显示状态和成功信息 | `
`，`id="message"` |
| 文本输入框 | 玩家输入引用的地方 | ``，`id="typed-value"` |
| 开始按钮 | 开始游戏 | `