🇹🇼 #21 中文注音打字遊戲：完整 ㄅㄆㄇ→鍵盤鍵位對照 + 180 秒倒數 + 字元下落物理遊戲
#21 真實名稱「中文注音打字遊戲」— 學生要在 180 秒內輸入正確的注音符號或對應按鍵來消滅從天而降的字元。內建完整 ㄅㄆㄇ → 鍵盤鍵位對照表（ㄅ→1 / ㄆ→q / ㄇ→a / ㄈ→z⋯）+ Tailwind + 純前端 26KB 單檔 XOOPS VM 部署。
注音打字 — 國小中文輸入第一關
國小中年級開始學中文輸入，台灣最普及的是注音輸入法：
- 學生要記 37 個注音符號對應的鍵盤位置
- ㄅㄆㄇㄈ 在哪、ㄉㄊㄋㄌ 又在哪
- 還有四聲（一二三四）+ 輕聲（˙）位置
傳統教法問題：
- ❌ 印鍵盤對照表貼螢幕 → 學生一直低頭看不專心
- ❌ 用 Word 打字 → 學生只記得詞不記得鍵位
- ❌ 線上注音課 → 都是無聊教學影片
阿凱的 #21 中文注音打字遊戲 反向：字元從上落下 + 學生輸入注音消滅字元 + 180 秒倒數。
#21 真實怎麼做？
真實標題：「中文注音打字遊戲」
核心遊戲機制：
- 挑戰你的中文注音打字速度！
- 字元（中文字）從天而降
- 學生輸入正確的注音符號或對應按鍵消滅該字
- 180 秒倒數
- 即時統計「已完成: 0」+「分數: 0」+「時間: 180 秒」
- 結算「完成字元 / 最終得分 / 剩餘時間」
內建完整注音鍵位對照表（從程式碼抽出，部分）：
const bopomofoKeyMap = {
'ㄅ': '1', 'ㄆ': 'q', 'ㄇ': 'a', 'ㄈ': 'z',
'ㄉ': '2', 'ㄊ': 'w', 'ㄋ': 's', 'ㄌ': 'x',
'ㄍ': 'e', 'ㄎ': 'd', 'ㄏ': 'c',
'ㄐ': 'r', 'ㄑ': 'f', 'ㄒ': 'v',
'ㄓ': '5', 'ㄔ': 't', // ...完整 37 個符號
};
→ 學生不用記注音對應鍵位 — AI 已對應好，學生直接練手感。
真實技術棧
- 純前端單檔 HTML（25,743 字元）
- Tailwind CSS
- 無後端、無 LLM
- 對應 GitHub repo
cagoooo/typeCC（後來搬到 GitHub 的版本） - 部署：
smes.tyc.edu.tw/smes_html/typeCC.html
跟 #20 英打的對比
| 維度 | #20 英打（已寫） | #21 中打（本篇） |
|---|---|---|
| 字元 | 26 字母 | 中文字元（含多字組合） |
| 時間 | 不限（直到打完 26 個） | 180 秒倒數 |
| 輸入方式 | 直接按字母鍵 | 按注音對應鍵或完整注音 |
| 鍵位提示 | 手指圖 ✋ | bopomofoKeyMap（隱藏在後台） |
| 適合年級 | 三年級 | 四五年級（學完注音） |
老師使用情境
中打教學單元 4 節課：
- 第 1 節：講注音鍵位 + 學生玩 1 次熟悉介面
- 第 2 節：分組挑戰 → 看誰 180 秒能消滅最多字
- 第 3 節：班內 PK 賽 → 最快 5 名上台演示
- 第 4 節：個人最佳成績挑戰
早自習補強：
- 跟 #20 英打輪流練（兩天一個）
家長期末作業：
- 家長 LINE 群組「孩子玩 #21 注音遊戲，180 秒消滅多少字？」
- 拍照截圖傳上來 → 比較進步
配對工具推薦
- #20 英文字母打字練習 — 英打入門
- #22 成語填空遊戲 — 高年級成語應用
- #26 九九乘法大冒險 — 同款「字落下挑戰」遊戲化框架（數學版）
適用對象
- 國小四五年級資訊課老師（中打必教）
- 中文系師資培訓（教注音輸入法）
- 補習班 / 安親班（孩子加強中打）
- 老人家學注音輸入（介面友善）
想試試？
第一次玩建議：180 秒先玩 1 次熟悉介面 → 第二次認真消滅 → 看「最終得分」對比第一次有沒有進步。