# 使用事件創建遊戲
你是否曾經好奇網站如何知道你點擊按鈕或在文本框中輸入文字？這就是事件驅動編程的魔力！學習這項重要技能的最佳方式莫過於創建一些有趣且實用的東西——一個能對每次按鍵做出反應的打字速度遊戲。
你將親眼看到網頁瀏覽器如何與你的 JavaScript 代碼“交流”。每次你點擊、輸入或移動鼠標，瀏覽器都會向你的代碼發送小消息（我們稱之為事件），而你可以決定如何回應！
完成這部分後，你將創建一個真正的打字遊戲，能追蹤你的速度和準確性。更重要的是，你將理解支撐每個互動式網站的基本概念。讓我們開始吧！
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/21)
## 事件驅動編程
想想你最喜歡的應用程序或網站——是什麼讓它感覺生動且響應迅速？這一切都與它如何回應你的操作有關！每次點擊、滑動或按鍵都會創建我們稱之為“事件”的東西，而這正是網頁開發的真正魔力所在。
網頁編程的有趣之處在於：我們永遠不知道用戶何時會點擊按鈕或開始在文本框中輸入。他們可能立即點擊，可能等五分鐘，或者可能永遠不點擊！這種不可預測性意味著我們需要以不同的方式思考如何編寫代碼。
與其像食譜一樣從上到下執行代碼，我們更傾向於編寫代碼，讓它耐心等待某些事情發生。這類似於19世紀的電報操作員，他們坐在機器旁，準備在電報線上收到消息的那一刻做出回應。
那麼，什麼是“事件”？簡單來說，它就是某件事情的發生！當你點擊按鈕——這是一個事件。當你輸入一個字母——這是一個事件。當你移動鼠標——這又是一個事件。
事件驅動編程讓我們能夠設置代碼來監聽並回應。我們創建特殊的函數，稱為 **事件監聽器**，它們耐心等待特定事情發生，然後在事件發生時迅速行動。
把事件監聽器想像成代碼的門鈴。你設置門鈴（`addEventListener()`），告訴它要聽什麼聲音（比如“點擊”或“按鍵”），然後指定有人按門鈴時應該發生什麼（你的自定義函數）。
**事件監聽器的工作原理如下：**
- **監聽**特定的用戶操作，比如點擊、按鍵或鼠標移動
- **執行**指定事件發生時的自定義代碼
- **立即回應**用戶交互，創造流暢的體驗
- **處理**同一元素上的多個事件，使用不同的監聽器
> **NOTE:** 值得注意的是，創建事件監聽器有多種方式。你可以使用匿名函數，也可以創建命名函數。你可以使用各種快捷方式，比如設置 `click` 屬性，或者使用 `addEventListener()`。在我們的練習中，我們將專注於 `addEventListener()` 和匿名函數，因為這可能是網頁開發者最常用的技術。它也是最靈活的，因為 `addEventListener()` 適用於所有事件，並且事件名稱可以作為參數提供。
### 常見事件
雖然網頁瀏覽器提供了數十種不同的事件供你監聽，但大多數交互式應用程序僅依賴少數幾個基本事件。了解這些核心事件將為你構建複雜的用戶交互奠定基礎。
在創建應用程序時，你可以監聽[數十種事件](https://developer.mozilla.org/docs/Web/Events)。基本上，任何用戶在頁面上的操作都會觸發事件，這讓你擁有很大的權力來確保用戶獲得理想的體驗。幸運的是，你通常只需要少數幾個事件。以下是一些常見的事件（包括我們在創建遊戲時會使用的兩個事件）：
| 事件 | 描述 | 常見用途 |
|------|------|----------|
| `click` | 用戶點擊了某個元素 | 按鈕、鏈接、交互元素 |
| `contextmenu` | 用戶點擊了右鍵 | 自定義右鍵菜單 |
| `select` | 用戶選中了某些文本 | 文本編輯、複製操作 |
| `input` | 用戶輸入了某些文本 | 表單驗證、即時搜索 |
**理解這些事件類型：**
- **觸發**用戶與頁面上特定元素的交互
- **提供**有關用戶操作的詳細信息，通過事件對象
- **使能**創建響應式、交互式的網頁應用程序
- **在不同瀏覽器和設備上**保持一致性
## 創建遊戲
現在你已經了解了事件的工作原理，讓我們通過創建一些有用的東西來實踐這些知識。我們將創建一個打字速度遊戲，展示事件處理的同時幫助你發展一項重要的開發者技能。
我們將創建一個遊戲來探索 JavaScript 中事件的工作原理。我們的遊戲將測試玩家的打字技能，這是所有開發者應該擁有的一項非常重要的技能。有趣的事實：我們今天使用的 QWERTY 鍵盤布局實際上是在19世紀70年代為打字機設計的——而良好的打字技能對於今天的程序員來說仍然非常重要！遊戲的基本流程如下：
```mermaid
flowchart TD
A[Player clicks Start] --> B[Random quote displays]
B --> C[Player types in textbox]
C --> D{Word complete?}
D -->|Yes| E[Highlight next word]
D -->|No| F{Correct so far?}
F -->|Yes| G[Keep normal styling]
F -->|No| H[Show error styling]
E --> I{Quote complete?}
I -->|No| C
I -->|Yes| J[Show success message with time]
G --> C
H --> C
```
**我們的遊戲將如何運作：**
- **開始**時，玩家點擊開始按鈕並顯示隨機引用
- **追蹤**玩家的打字進度，逐字實時更新
- **突出顯示**當前單詞以引導玩家的注意力
- **提供**即時的打字錯誤視覺反饋
- **計算**並顯示完成引用所需的總時間
讓我們開始構建遊戲，並學習事件！
### 文件結構
在開始編碼之前，讓我們先整理一下！從一開始就保持清晰的文件結構可以幫助你避免日後的麻煩，並使你的項目更專業。😊
我們將保持簡單，只使用三個文件：`index.html` 用於頁面結構，`script.js` 用於所有遊戲邏輯，`style.css` 用於美化頁面。這是大多數網頁的經典三件套！
**通過打開控制台或終端窗口並輸入以下命令，創建一個新文件夾：**
```bash
# Linux or 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"` |
| 開始按鈕 | 開始遊戲 | `