⌨️ #61 英打打字超互動遊戲 GitHub Pages 重構版：跟 #20 同源升級（虛擬手指肌肉記憶 + 隨機色彩 + Tailwind CDN）
#61「英文字母打字練習遊戲」是 [#20 英打練習](/blog/typing-20-english-letters-falling) 的 **GitHub Pages 重構版**！單檔 typeEN.html + 虛擬雙手亮起對應手指（左手小拇指對應 A、右手食指對應 J）+ Vanilla JS + Tailwind CDN + 26 字母隨機排序 / 顏色 / 位置 + RWD。
#61 跟 #20 是同源（XOOPS VM vs GitHub Pages 雙部署）
阿凱的英打工具有兩個：
| 維度 | #20 英打（XOOPS VM） | #61 英打 GitHub 版（本篇） |
|---|---|---|
| 部署 | XOOPS 校網 VM smes_html/ | GitHub Pages cagoooo/typeEN |
| 程式碼 | 純單檔 HTML | 單檔 typeEN.html + Vanilla JS |
| 字母提示 | 手指圖 | 虛擬雙手亮起對應手指 |
| 隨機性 | 字母排序 | 隨機排序 + 隨機顏色 + 隨機 X 軸 |
| RWD | 基本 | Tailwind 響應式類別 |
| 部署方便度 | 上傳學校 VM | git push 自動 deploy |
漸進式工具家族再 +1 案例（前 7 個：PIRLS / Aura / 教師回覆 / 演說 / 瑪莉歐 / 課程計畫 / 點石成金）。
#61 真實技術細節
真實標題：「英文字母打字練習遊戲 (English Typing Practice Game)」
5 大功能特色：
功能 A：直覺視覺提示（核心殺手鐧）
- 當字母落下時，畫面下方的虛擬雙手會亮起對應的手指
- 例如：看到 'A' 落下 → 左手小拇指會發光提示
- 看到 'J' 落下 → 右手食指會發光提示
- 幫助正確建立肌肉記憶（不是兩指神功）
功能 B：純靜態無依賴
- 單一
typeEN.html檔案即可運行 - 無需後端伺服器
- 直接點擊開啟即可遊玩
功能 C：隨機排序與色彩
- 26 個英文字母會以隨機順序、隨機顏色、隨機 X 軸位置落下
- 增加挑戰與趣味性
- 不會「第二次玩跟第一次完全一樣」
功能 D：Tailwind CSS 快速排版
- 透過 CDN 引入 Tailwind CSS
- 畫面簡潔明瞭
功能 E：RWD 響應式基礎
- 使用相對單位與 Tailwind 類別
- 在不同螢幕尺寸下維持基本可用性
真實技術棧
- 單檔 HTML（Vanilla JS 原生 JavaScript）
- Tailwind CSS CDN（無 build step）
- 無框架、無後端、無 LLM
- 部署：
cagoooo.github.io/typeEN/
「虛擬雙手亮起手指提示」的教學價值
標準英打鍵盤指法 11 個區域：
| 鍵 | 對應手指 |
|---|---|
| Q A Z | 左手小指 |
| W S X | 左手無名指 |
| E D C | 左手中指 |
| R F V T G B | 左手食指 |
| Y H N U J M | 右手食指 |
| I K , | 右手中指 |
| O L . | 右手無名指 |
| P ; / | 右手小指 |
#61 把整個指法視覺化：
- ✅ 學生看到字母 → 不會去找鍵盤
- ✅ 自然建立肌肉記憶
- ✅ 三個月後閉眼睛也能打
跟 #20 比較
| 場景 | 用哪個？ |
|---|---|
| 學校已用 XOOPS 校網 | #20（已掛學校網域） |
| 學校用 Google Workspace 為主 | #61（GitHub Pages 易分享） |
| 老師個人推薦給其他學校 | #61（cagoooo.github.io 公開） |
| 校內推廣 | #20（smes.tyc.edu.tw 信任度） |
→ 同源雙部署服務不同受眾（再次驗證阿凱部署策略）。
教學情境
三年級英打單元第一週：
- 老師講「手指對應字母」抽象 → 學生記不住
- 用 #61 → 學生看「虛擬手指亮起來」
- 5 分鐘看完 → 立刻會用對的手指打
早自習補強：
- 學生每天玩 5 分鐘
- 看誰用時最短
- 累積一週手指肌肉記憶建立
家長親子練英打：
- 家長陪小孩玩 #61
- 「爸爸我打了 X 秒」變家庭遊戲
寒暑假作業：
- 「全班挑戰破紀錄」
- 分享自己的最佳成績
配對工具推薦
- #20 英文字母打字練習（XOOPS VM 版） — 同源學校網域版
- #21 中文注音打字遊戲 — 中打入門
- #70 中文注音打字 Pro — 進階版（4 級難度 + 全球榜）
適用對象
- 國小三年級資訊課老師（英打必教）
- 中年級英文老師（鞏固字母）
- 補習班美語老師
- 家長親子練英打
- 想看「Vanilla JS + Tailwind CDN 純靜態遊戲」案例的開發者
想試試？
第一次玩 — 正坐 + 雙手放 ASDF JKL; 起始位置 → 開始 → 觀察虛擬手指亮起來 → 用對的手指按 → 這比看打字教科書快 100 倍。