✖️ #26 九九乘法大冒險：Web Audio + Tailwind + Lucide 純前端遊戲化練習（無 LLM 也能做好工具）
#26 真實名稱「九九乘法大冒險」是純前端遊戲化練習器 — Tailwind + Lucide + **Web Audio API**（OscillatorNode 合成音效）做的 25KB 單檔 HTML，嵌進 Google Sites。3 狀態反饋（答對了 / 哎呀答錯了 / 挑戰完成）+ 計分計時，**沒用 LLM** — 證明「好的教學工具不一定需要 AI」。
九九乘法練習器跟 Kahoot 為什麼不同？
很多老師會用 Kahoot 出九九乘法題給學生練 — 但有問題：
- 要全班同時開帳號
- 題目要老師自己出
- 練完就消失（沒有「獨自反覆練到熟」的模式）
阿凱的 #26 九九乘法大冒險 是反向設計：單人連續挑戰 + 即時音效反饋，不需要老師、不需要帳號、不需要連網。
#26 真實怎麼做？
真實標題：「九九乘法大冒險」（不是「練習器」這種枯燥名字）
遊戲化 4 個狀態（從 H 標籤抽出）：
- 「回到主選單？」（中途要走的確認）
- 「答對了！」（綠色 + 撒花音效）
- 「哎呀，答錯了」（提示正確答案）
- 「挑戰完成！」（結算分數）
真實技術棧（純前端，無 LLM）：
- Tailwind CSS（
cdn.tailwindcss.com） - Lucide Icons
- Web Audio API —
new AudioContext().createOscillator()合成音效（不是 mp3！） - 25,359 字元單檔 HTML（data-code 內）
Web Audio 純合成音效的好處
從反編譯出的 JS 確認，阿凱用：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playSound(type) {
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
// ...頻率 + 波形 + 包絡控制
}
好處：
- ✅ 沒有 mp3 檔案要載（網頁載入超快）
- ✅ 單檔即用（不依賴外部資源）
- ✅ 可程式控制音高 / 長度（不同對錯不同音調）
- ✅ iOS Safari 也能跑（需要 user gesture 後 resume）
為什麼這值得寫？
證明「好的教學工具不一定需要 AI」：
- #25 國語演說 = 有 Gemini AI（適合需要評估的場景）
- #26 九九乘法 = 沒有 AI（題目固定 / 答案固定，AI 沒幫助反而拖累）
阿凱會看場景選擇用不用 AI — 不是無腦套 LLM。
跟 #44 數學加減法練習器的關係
- #26 九九乘法大冒險 → 給二年級 / 三年級（學完九九乘法表）
- #44 快樂數學小冒險 → 給一年級（10 以內 / 20 以內加減）
兩者是同系列姊妹工具，都在 swissknife 上、都用同款遊戲化架構、都用 canvas-confetti + Tailwind，程式碼可能共用 70%+。
適用對象
- 國小一到三年級數學老師
- 二年級導師（九九乘法表是該年級重點）
- 帶課輔 / 補救教學的老師
- 家長想讓孩子在家練九九乘法
想試試？
→ 前往 #26 九九乘法大冒險 → #44 快樂數學小冒險（一年級）
第一次用：學生掃 QR 進 → 點「2 的乘法」→ 連續答 10 題 → 看「挑戰完成！」結算分數。不需要登入、不需要記住。