「簡譜節拍師 Rhythm Beat Master」是阿凱老師為國小音樂課簡譜節奏訓練打造的 太鼓達人風格節奏遊戲,部署在 cagoooo.github.io/music/,當前 v2.6 UI/UX 視覺升級。
🎯 核心特色
- 🎮 7 鍵 Do Re Mi Fa Sol La Si 玩法 — 1~7 對應七音,音符從右往左捲動,在判定線(菱形光柱)按下對應數字鍵
- ⭐ 三種判定:PERFECT(金色)/ GOOD(綠色)/ MISS(紅色)+ COMBO 連擊 — 太鼓達人的爽感、學生愛不釋手
- 🎯 4 段難度調整 — 初學 / 一般 / 高手 / 地獄,改變 Perfect / Good 判定視窗
- 🎵 Web Audio API 即時合成背景旋律(神細節)— 不放 mp3、單檔即用、可程式控制音高時長、跟倒數計時同步啟動 0 延遲、iOS Safari 也能跑
- 💾 LocalStorage 最高分 — 每首歌 × 每個難度分別記錄,選曲卡片顯示 PB 徽章
- 📱 觸控虛擬按鍵 + 多指同時觸控 — 手機平板都能玩
- 📦 ES Module 模組化重構 —
game.js/input.js/index.js拆分,純前端無 React/Vue
💡 設計理念
音樂課抓不到節奏是老師最痛的點 — 拍手節奏太抽象、節拍器看不到、老師打節拍學生看老師沒看譜、商業節奏遊戲(太鼓達人)沒有簡譜版。阿凱反向:太鼓達人 × 簡譜 = 7 鍵 Do Re Mi 節奏遊戲。為什麼用 Web Audio API 合成而不放 mp3?載入快、單檔即用、可程式控制、0 延遲同步 — 跟 #33 讓聲音具現化吧 與 #26 九九乘法大冒險 是「Web Audio API 三件套」案例,用對工具是工程師的修養(阿凱多次驗證)。
🎒 適合情境
- 音樂課節奏訓練單元(4 節課):第 1 節初學 → 第 2 節一般 → 第 3 節高手 → 第 4 節地獄級 PK
- 直笛課暖身:上直笛課前 10 分鐘玩 #64 建立 1234567 鍵盤反應,接著吹直笛更順
- 音樂社 / 直笛社 / 烏克麗麗社:自由時間看誰連擊最高
- 家庭親子假日:「昨天連擊 50,今天破紀錄」變家庭遊戲
適合國中小音樂課老師、直笛 / 烏克麗麗 / 鋼琴指導老師、音樂社團指導、想看 Web Audio API + 太鼓達人案例的開發者。打開選「初學」→ 跟著音符按 1234567 → 看 PERFECT 金光連擊 → 比商業節奏遊戲免費 + 中文友善。搭配 #41 阿凱彈唱之夜 與 #50 童樂學園節奏達人 是完整音樂遊戲化套組。