# 使用事件創建一個遊戲
你是否曾經想過網站如何知道你何時點按按鈕或在文字框中輸入？這就是事件驅動程式設計的魔力！有什麼比構建一個有用的東西更好的方式來學習這項基本技能呢——一個會對你每次敲打的按鍵作出反應的打字速度遊戲。
你將親身看到網頁瀏覽器如何「與」你的 JavaScript 代碼「對話」。每次你點按、輸入或移動滑鼠時，瀏覽器都會向你的代碼發送小訊息（我們稱之為事件），而你則決定如何回應！
到本文結束時，你將建立一個真實的打字遊戲，追蹤你的速度和準確度。更重要的是，你將理解驅動每一個你曾使用過的互動網站的基本概念。讓我們開始吧！
## 課前測驗
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21)
## 事件驅動程式設計
想想你最喜歡的應用程式或網站——是什麼令它感覺生動且反應靈敏？全在於它如何回應你的操作！每一次點按、點擊、滑動或鍵入都會創造一個我們稱之為「事件」的東西，而這正是網頁開發中真正的魔法所在。
這就是為什麼針對網頁編程如此有趣的原因：我們永遠不知道何時有人會點擊按鈕或開始輸入文字。他們可能立即點擊，也可能等待五分鐘，或者可能根本不點擊！這種不可預測性意味著我們需要用不同的方法來撰寫代碼。
我們不是寫一段從上到下運行的程式碼（就像食譜一樣），而是寫程式碼耐心地等待事情發生。這就像 1800 年代的電報操作員守候在他們的機器旁，準備在訊息通過電線時立即回應一樣。
那麼，「事件」究竟是什麼？簡單地說，它是發生的事情！你點擊一個按鈕——這就是一個事件。你輸入一個字母——這是另一個事件。你移動滑鼠——還有另一個事件。
事件驅動程式設計讓我們能夠設定代碼來聆聽和回應。我們創建特殊函數稱為**事件監聽器（event listeners）**，它們耐心等待特定事件發生，然後在事件發生時立即執行。
把事件監聽器想像成你的代碼的門鈴。你安裝門鈴 (`addEventListener()`)，告訴它要聽哪種聲音（如「click」或「keypress」），然後指定誰按鐘時該做什麼（你的自訂函數）。
**事件監聽器的工作原理：**
- **監聽**特定的用戶操作，如點擊、鍵擊或滑鼠移動
- **執行**指定事件發生時的自訂代碼
- **立即回應**用戶互動，創造無縫體驗
- **可處理**同一元素上的多個不同事件監聽器
> **NOTE:** 值得一提的是，創建事件監聽器的方法有很多。你可以使用匿名函數，或者建立有名稱的函數。你也可以用各種快捷方式，比如設定 `click` 屬性，或者使用 `addEventListener()`。在我們的練習中，我們將專注於 `addEventListener()` 和匿名函數，因為這可能是網頁開發者最常用的技術。它也是最靈活的，因為 `addEventListener()` 適用於所有事件，且事件名稱可作為參數傳入。
### 常見事件
雖然網頁瀏覽器提供數十種不同的事件可供監聽，但大多數互動應用程式只依賴幾個基本事件。理解這些核心事件將為你建立複雜的用戶互動奠定基礎。
有[數十種事件](https://developer.mozilla.org/docs/Web/Events)可供你監聽，幾乎用戶在頁面上做的任何事情都可以引發事件，這讓你能夠掌控用戶體驗。幸運的是，你通常只需要少數幾種事件。以下是一些常見的（包括我們創建遊戲時將使用的兩種）：
| Event | 說明 | 常見用例 |
|-------|-------|---------|
| `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"` |
| 開始按鈕 | 開始遊戲 | `