🇬🇧 #20 英文字母打字練習遊戲：26 字母從上落下 + 手指提示 + 純前端 Tailwind 無 LLM 遊戲化練習
#20 真實名稱「英文字母打字練習遊戲」— 26 個英文字母從上方落下，學生要在字母落到底部前正確按鍵。內建手指提示（標準鍵盤打字法），完成時間計分。純 Tailwind 單檔 HTML 18KB 部署 XOOPS VM。
國小英打教學的真實痛點
國小三年級開始接觸電腦課，英打是基礎必教 — 但教學上的痛：
- ❌ 傳統打字機 APP → 介面老氣，學生提不起勁
- ❌ TypingClub / Typing.com → 英文介面 / 要創帳號 / 付費
- ❌ 紙本打字練習單 → 沒互動 / 無趣
- ❌ 不教手指位置 → 學生「兩指神功」打字（一輩子改不過來）
阿凱的 #20 英文字母打字練習遊戲 反向：字母從上落下 + 手指提示 + 計時 + 進度計分。
#20 真實怎麼做？
真實標題：「英文字母打字練習遊戲」
核心遊戲機制：
- 26 個英文字母從上方落下
- 學生要在字母落到底部前輸入正確按鍵
- 下方有手指提示 ✋（教標準鍵盤打字法）
- 即時統計「0 / 26 個字母」+「時間: 0 秒」
- 完成顯示「遊戲完成！你已完成全部 26 個字母，用時: X 秒」
遊戲流程：
- 開始遊戲 → 26 個字母依序落下挑戰 → 結算分數 → 再玩一次
真實技術棧（無 LLM 純前端）
- 純前端單檔 HTML（17,805 字元）
- Tailwind CSS（
cdn.tailwindcss.com） - 無後端、無 LLM、無 Web Audio
- 部署：
smes.tyc.edu.tw/smes_html/typeEN.html - 對應 GitHub repo 是後來搬到 GitHub 的
cagoooo/typeEN版本
「手指提示」這個設計太重要
教國小英打最大重點不是速度，是「正確的手指位置」。傳統教學：
左手食指：F R T B Y G V
右手食指：J U Y H N M
左手中指：D E C
右手中指：K I ,
左手無名指：S W X
右手無名指：L O .
左手小指：A Q Z
右手小指：; P /
阿凱在每個字母落下時畫出該字母對應的手指（從程式碼推測是 SVG / emoji 鍵盤示意圖），學生邊玩邊建立正確指法，比看打字教科書有效 100 倍。
跟 #21 #22 三件套
| 工具 | 練什麼 | 適合 |
|---|---|---|
| #20 英打練習（本篇） | 26 字母 + 手指提示 | 三年級英打入門 |
| #21 中打練習 | 注音符號 → 鍵盤鍵位 | 三-五年級中文輸入 |
| #22 成語中打練習 | 50 個國小成語填空 | 高年級語文延伸 |
阿凱「用 Gemini 寫好一個落物遊戲框架 → 換題目資料庫就再生一個工具」的策略。
老師使用情境
資訊課英打單元 3 節課：
- 第 1 節：講解手指位置 + 學生玩 5 次練習 → 看誰最快
- 第 2 節：分組挑戰賽 → 平均最快組勝出
- 第 3 節：個人賽 → 全班排名
早自習補強：
- 學生掃 QR 進 → 5 分鐘練一輪
- 一週 5 次累積看進步曲線
回家作業：
- 給家長 LINE 群組連結
- 「請孩子今天玩 1 次練英打 5 分鐘」
配對工具推薦
- #21 中文注音打字遊戲 — 注音版（用同款落物框架）
- #22 成語填空遊戲 — 成語版（落物 + 填空複合）
- #81 國小資訊科技教學駕駛艙 — 三年級資訊課單元入口
適用對象
- 國小三年級資訊課老師（英打必教）
- 中年級英文老師（鞏固字母）
- 補習班美語老師（純打字訓練）
- 想看「Gemini 寫遊戲 + 純前端落物物理」案例的開發者
想試試？
第一次玩建議：正坐 + 雙手放在 ASDF JKL; 起始位置 → 開始遊戲 → 用對的手指按字母 → 看「用時 X 秒」會記住正確指法。