🎲 #55 ㄅㄆㄇ 注音大挑戰：6 主題關卡 + 漸進式解鎖 + 虛擬鍵盤拼注音 + 學習回顧模組（一年級必用）
#55 真實名稱「ㄅㄆㄇ 注音大挑戰 🎲」是阿凱為一年級兒童設計的注音學習遊戲。純前端 HTML/CSS/JS、6 個主題（水果 / 動物 / 交通 / 身體 / 家人 / 學校）+ 漸進式解鎖 + 虛擬鍵盤拼聲母韻母聲調 + 答對撒紙條 / 答錯震動 + localStorage 進度儲存 + 學習回顧看答對答錯紀錄。
一年級「ㄅㄆㄇ」學習的真實痛點
一年級上學期前 10 週是注音密集學習期：
- 從不認識 ㄅㄆㄇ → 學會拼音
- 37 個注音符號 + 4 個聲調
- 老師最痛的是「學生每個都會念但拼不出來」
傳統做法：
- ❌ 抄注音 → 學生抗拒
- ❌ 注音樂理本 → 沒互動
- ❌ APP 廣告太多 → 老師不敢推薦
阿凱的 #55 ㄅㄆㄇ 注音大挑戰 反向：6 個主題 + 漸進解鎖 + 虛擬鍵盤拼音 + 純前端零廣告。
#55 真實怎麼做？
真實標題：「ㄅㄆㄇ 注音大挑戰 🎲 (Bopomofo Learning Game)」
完整 5 大功能（從 README 抽出）：
功能 A：6 個主題關卡（漸進式解鎖）
- 🍎 水果
- 🐶 動物
- 🚗 交通
- ✋ 身體
- 👨👩👧👦 家人
- 🏫 學校
漸進式解鎖規則：玩家必須成功通過前一關，才能挑戰下一關。
功能 B：生動測驗互動
- 每關從題庫隨機抽 5 題
- 可愛圖片 + 單字提示（如「🍎 apple → ㄆㄧㄥˊㄍㄨㄛˇ」蘋果）
- 玩家用畫面下方虛擬鍵盤拼出對應的：
- 聲母（ㄅㄆㄇㄈ⋯）
- 韻母（ㄚㄛㄜㄝㄞ⋯）
- 聲調（一聲 / 二聲 / 三聲 / 四聲 / 輕聲）
- 答對：彩色碎紙機動畫 + 綠色字體
- 答錯：畫面震動 + 顯示正確答案
功能 C：學習回顧模組
- 關卡結束後可點「學習回顧」
- 查看該回合所有答對與答錯的題目紀錄
- 學生看自己弱在哪
- 老師看全班統計（推測有）
功能 D：進度儲存（localStorage）
- 已解鎖關卡 / 各關獲得的愛心數量評等
- 自動儲存於瀏覽器
- 「重置進度」按鈕重來
功能 E：RWD
- 手機 / 平板 / 桌機完美支援
- 自動調整大小與排版
真實技術棧
- 純前端 HTML/CSS/JS（無框架！）
- 圖片引用外部 CDN（Apple / Banana 等）
- 無後端、無 LLM、無依賴
- 部署：
cagoooo.github.io/zhuyin/
「極端適合 GitHub Pages 部署」(README 原文) — 阿凱明確選擇純靜態的理由：一年級工具最重要的就是「永遠不會壞」。
跟 #21 #70 三件套對比
| # | 工具 | 學什麼 | 適合 |
|---|---|---|---|
| #55 注音大挑戰（本篇） | 拼注音（聲母 + 韻母 + 聲調） | 一年級入門 | |
| #21 中文注音打字 | 注音→鍵盤鍵位 | 四五年級中打 | |
| #70 中打 Pro | 進階中打競賽 | 高年級 + 大師級 |
完整注音學習進化鏈：
- 一上：#55 學會 ㄅㄆㄇ 怎麼拼
- 四上：#21 知道 ㄅㄆㄇ 在鍵盤哪
- 六上：#70 中打速度大師級
教學情境
一年級國語課：
- 第 1-3 週：學生上完 ㄅㄆㄇ 課堂後 → 玩 #55「水果」關卡
- 第 4-6 週：解鎖「動物」「交通」
- 第 7-10 週：「身體」「家人」「學校」漸進完成
- 學期末：學生全 6 關通過 → 得到 6 顆愛心評等
早自習補強：
- 全班同時開 #55
- 老師看誰卡哪個主題 → 個別輔導
家長親子：
- 假日家長陪小孩玩 → 看「學習回顧」對針弱點
- 比注音樂理本好玩 + 不用印
配對工具推薦
- #21 中文注音打字遊戲 — 中年級鍵盤版
- #70 中文注音打字 Pro — 高年級進階版
- #6 蜂類配對消消樂 — 同款一年級主題（注音符號主題包）
適用對象
- 一年級導師（注音必教）
- 一年級國語老師
- 補救教學老師（針對拼音卡關學生）
- 家長親子教注音
- 想看「純前端 + localStorage 漸進解鎖」設計案例的開發者
想試試？
一年級新生入學第一週 — 印 QR Code 貼黑板 → 學生掃進 → 從「水果」關開始解鎖整個世界。