Web-Dev-For-Beginners/translations/hk/4-typing-game

事件驅動程式設計 - 建立一個打字遊戲

journey
    title 你的打字遊戲開發旅程
    section 基礎
      計劃遊戲結構: 3: Student
      設計用戶界面: 4: Student
      設置 HTML 元素: 4: Student
    section 功能
      處理用戶輸入: 4: Student
      跟蹤時間: 5: Student
      計算準確度: 5: Student
    section 功能特色
      增加視覺反饋: 5: Student
      實現遊戲邏輯: 5: Student
      美化體驗: 5: Student

介紹

有一件每個開發者都知道但很少談論的事：打字快是超能力！🚀 想想看——你越快把腦中的想法輸入到程式編輯器，創造力就能流動得越順暢。就像你的思緒和螢幕之間有條直接的管道。

pie title 遊戲功能
    "即時反饋" : 25
    "效能追蹤" : 20
    "互動介面" : 20
    "計時系統" : 15
    "引言管理" : 10
    "結果顯示" : 10

想知道提升這項技能的最佳方法之一嗎？你猜對了——我們要做一款遊戲！

flowchart LR
    A[玩家開始遊戲] --> B[隨機顯示語錄]
    B --> C[玩家輸入字元]
    C --> D{字元正確嗎？}
    D -->|是| E[綠色高亮]
    D -->|否| F[紅色高亮]
    E --> G[更新準確率]
    F --> G
    G --> H{語錄完成了嗎？}
    H -->|否| C
    H -->|是| I[計算每分鐘字數]
    I --> J[顯示結果]
    J --> K[再玩一次？]
    K -->|是| B
    K -->|否| L[遊戲結束]
    
    style A fill:#e1f5fe
    style D fill:#fff3e0
    style E fill:#e8f5e8
    style F fill:#ffebee
    style I fill:#f3e5f5

讓我們一起創造一款超棒的打字遊戲吧！

準備好運用你學習的 JavaScript、HTML 和 CSS 技能了嗎？我們要建立一個打字遊戲，遊戲內容會挑戰你打出來自傳奇偵探 Sherlock Holmes 的隨機名言。遊戲會追蹤你打字的速度和準確性——相信我，這比你想像中還要令人上癮！

mindmap
  root((打字遊戲開發))
    User Interface
      Input Elements
      Visual Feedback
      Responsive Design
      Accessibility
    Game Logic
      Quote Selection
      Timer Management
      Accuracy Tracking
      Score Calculation
    Event Handling
      Keyboard Input
      Button Clicks
      Real-time Updates
      Game State Changes
    Performance Metrics
      Words Per Minute
      Character Accuracy
      Error Tracking
      Progress Display
    User Experience
      Immediate Feedback
      Clear Instructions
      Engaging Content
      Achievement System

你需要知道的

flowchart TD
    A[用戶動作] --> B{事件類型？}
    B -->|鍵盤按鍵| C[鍵盤事件]
    B -->|按鈕點擊| D[滑鼠事件]
    B -->|計時器| E[時間事件]
    
    C --> F[檢查字元]
    D --> G[開始/重設遊戲]
    E --> H[更新計時器]
    
    F --> I{正確？}
    I -->|是| J[標示綠色]
    I -->|否| K[標示紅色]
    
    J --> L[更新分數]
    K --> L
    L --> M[檢查遊戲狀態]
    
    G --> N[生成新名言]
    H --> O[顯示時間]
    
    M --> P{遊戲完成？}
    P -->|是| Q[顯示結果]
    P -->|否| R[繼續遊戲]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#fff3e0
    style Q fill:#f3e5f5

在深入之前，請確保你熟悉以下概念（如果需要快速複習也沒關係——我們都經歷過！）：

• 建立文字輸入和按鈕控件
• CSS 與使用類別設定樣式
• JavaScript 基礎
  • 建立陣列
  • 產生隨機數字
  • 取得目前時間

如果有任何部分感覺有點生疏，也完全沒問題！有時候鞏固知識的最好方式就是開始實作，邊做邊學。

🔄 教學確認

基礎評估：開始開發前，確保你了解：

• ✅ HTML 表單與輸入元素的工作原理
• ✅ CSS 類別與動態樣式設定
• ✅ JavaScript 事件監聽器與處理程序
• ✅ 陣列操作與隨機選擇
• ✅ 時間測量與計算

快速自我測驗：你能解釋這些概念如何在互動遊戲中協同運作嗎？

• 事件 在使用者與元素互動時觸發
• 處理程序 負責處理事件並更新遊戲狀態
• CSS 提供使用者行為的視覺反饋
• 計時 使得效能測量和遊戲進展成為可能

quadrantChart
    title 打字遊戲技能發展
    x-axis 初學者 --> 專家
    y-axis 靜態 --> 互動式
    quadrant-1 進階遊戲
    quadrant-2 即時應用程式
    quadrant-3 基本頁面
    quadrant-4 互動網站
    
    HTML Forms: [0.3, 0.2]
    CSS Styling: [0.4, 0.3]
    Event Handling: [0.7, 0.8]
    Game Logic: [0.8, 0.9]
    Performance Tracking: [0.9, 0.7]

開工吧！

利用事件驅動程式設計創建打字遊戲

⚡ 接下來 5 分鐘你可以做什麼

• 開啟瀏覽器主控台，試試用 addEventListener 監聽鍵盤事件
• 建立一個簡單 HTML 頁面，有輸入欄並測試打字偵測
• 練習字串操作，將輸入文字與目標文字比對
• 嘗試使用 setTimeout 理解定時功能

🎯 這一小時你可以完成什麼

• 完成課後小測，理解事件驅動程式設計
• 建立打字遊戲的基本版本並驗證字詞
• 新增正確與錯誤打字的視覺反饋
• 實作基於速度與準確性的簡單計分系統
• 用 CSS 美化遊戲介面，使之更吸引人

📅 這一週你的遊戲開發路線

• 完成具備所有功能與細節的完整打字遊戲
• 新增難度等級，包含不同複雜度的字詞
• 實作用戶統計追蹤（WPM、準確率變化）
• 添加音效與動畫，提升使用體驗
• 讓遊戲響應式適用於觸控裝置
• 將遊戲分享線上並收集用戶回饋

🌟 這一個月你的互動開發計畫

• 開發多款遊戲，探索不同互動模式
• 學習遊戲循環、狀態管理與效能優化
• 貢獻開源遊戲開發專案
• 精通高階計時概念與流暢動畫
• 建立展示各式互動應用的作品集
• 指導其他對遊戲開發與用戶互動有興趣的人

🎯 你的打字遊戲精通時間表

timeline
    title 遊戲開發學習進度
    
    section 設置 (10分鐘)
        專案結構: HTML 基礎
                 : CSS 樣式設置
                 : JavaScript 檔案建立
        
    section 使用者介面 (20分鐘)
        互動元素: 輸入欄位
                  : 按鈕控制
                  : 顯示區域
                  : 響應式佈局
        
    section 事件處理 (25分鐘)
        使用者互動: 鍵盤事件
                    : 滑鼠事件
                    : 即時反饋
                    : 狀態管理
        
    section 遊戲邏輯 (30分鐘)
        核心功能: 引言產生
                  : 角色比較
                  : 精確度計算
                  : 計時器實作
        
    section 性能追蹤 (35分鐘)
        指標與分析: 每分鐘字數計算
                    : 錯誤追蹤
                    : 進度可視化
                    : 結果顯示
        
    section 美化與增強 (45分鐘)
        使用者體驗: 視覺反饋
                    : 音效
                    : 動畫
                    : 無障礙功能
        
    section 進階功能 (1週)
        擴展功能: 難度等級
                 : 排行榜
                 : 自訂引言
                 : 多人選項
        
    section 專業技能 (1個月)
        遊戲開發: 性能優化
                  : 代碼架構
                  : 測試策略
                  : 部署模式

🛠️ 你的遊戲開發工具包總結

完成這個專案後，你將掌握：

• 事件驅動程式設計：對輸入反應的互動界面
• 即時反饋：快速視覺與效能更新
• 效能測量：精確的計時與計分系統
• 遊戲狀態管理：控制應用流程與用戶體驗
• 互動設計：創造引人入勝、令人上癮的使用體驗
• 現代網頁 API：利用瀏覽器能力實現豐富互動
• 無障礙模式：為所有使用者打造包容性設計

實際應用場景：這些技能適用於：

• 網頁應用程式：任何互動界面或儀表板
• 教育軟體：學習平台與技能評估工具
• 生產力工具：文字編輯器、整合開發環境、協作軟體
• 遊戲產業：瀏覽器遊戲與互動娛樂
• 行動開發：觸控介面與手勢處理

下一階段：準備探索進階遊戲框架、即時多人系統或複雜的互動應用！

致謝

由 Christopher Harrison 以 ♥️ 撰寫

---

免責聲明：
本文件乃使用人工智能翻譯服務【Co-op Translator】(https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威資料。對於重要資訊，建議使用專業人工翻譯。對於因使用本翻譯而引致的任何誤解或誤釋，我們概不負責。