🍄 #9 超級瑪莉歐冒險：純 Canvas 多關卡平台跳躍 + 蹬牆跳 + 成就系統 + 教學模式（v2.33.0 持續打磨）
#9 真實名稱「超級冒險 🍄 Mario Style Platformer」是阿凱用純 Canvas 寫的多關卡平台跳躍遊戲。完整 Stage Clear / 暫停 / 教學 / 成就系統 / 全螢幕 + 操作含蹬牆跳 / 衝刺 / 蹲下，已迭代到 v2.33.0。
#9 vs #28 — 同主題不同進化階段
阿凱有兩個瑪莉歐風格遊戲：
| 維度 | #9 超級瑪莉歐冒險（本篇） | #28 瑪莉歐風格平台跳躍 |
|---|---|---|
| 部署 | GitHub Pages cagoooo/mario-game | XOOPS VM smes_html/ |
| 規模 | 多關卡 + 成就系統 + 教學 | 單關純跳躍 |
| 控制 | ←→ 移動 / 空白跳 / Shift 衝刺 / S 蹲下 / 蹬牆跳 | 純 ←→ + 空白 |
| 版本 | v2.33.0（持續打磨） | 早期單版 |
#9 是 #28 的 Pro / 升級進化版 — 阿凱「漸進式工具家族」哲學再案例。
#9 真實怎麼做？
真實標題：「🍄 超級冒險 🍄 Mario Style Platformer」
完整功能：
- 多世界選擇「SELECT WORLD」（NES retro style text menu）
- 「↑↓ 選擇 ｜ Enter / 點擊 進入」
- Stage Clear 結算頁
- 「★ STAGE CLEAR ★ World 1-1 SCORE: 0」
- 過關解鎖下一關
操作（完整 6 種）：
| 鍵盤 | 動作 |
|---|---|
| ⬅️ ➡️ | 移動 |
| 空白鍵 | 跳躍 |
| ⬇️ / S | 蹲下 |
| Shift | 衝刺 |
| 牆壁 + 跳 | 蹬牆跳（瑪莉歐風格進階） |
手機觸控：點擊移動 + 點擊跳躍。
遊戲統計：
- 💀 擊殺
- 🪙 金幣
- 👑 分數
- 🏅 成就
功能按鈕：
- 🔊 音效開關
- ⚙️ 音效設定
- ⛶ 全螢幕
- ⏸️ 暫停
- 📖 重看教學
🏅 成就系統：完整 modal 顯示成就清單 + 「X/Y」進度。
真實技術棧
- 純前端（無 React/Vue）
- Canvas 2D（
<canvas id="gameArea">） - CSS 版本控制：
style.css?v=2.33.0— 阿凱用 query string 強制清快取 - PWA 完整：manifest.json + 多尺寸 icon + apple-mobile-web-app-capable
- 無 LLM、無後端（localStorage 存進度）
- 部署：
cagoooo.github.io/mario-game/
為什麼用純 Canvas 而不是 Phaser?
阿凱在遊戲開發上的選擇：
Canvas 2D 適合「完整可控自製遊戲」 — 不需要 Phaser 引擎的物理 / 場景系統，自己寫更輕（v2.33.0 累積這麼多功能還在純 Canvas）。
教學情境
資訊科技課示範：
- 五六年級程式設計單元
- 老師展示「多關卡 + 成就系統 + 蹬牆跳 = 純 Canvas + JS 也能做」
- 開 DevTools 看
v2.33.0一路迭代史
下課休閒：
- 比商業遊戲入口網（充滿廣告）親民 100 倍
- 學生可以正面挑戰多關卡
家長親子：
- 假日陪小孩玩
- 「蹬牆跳」教手指靈活度
配對工具推薦
- #28 瑪莉歐風格平台跳躍 — XOOPS VM 早期版
- #30 遊戲集合 — 12-in-1 經典遊戲合集
- #85 企鵝跑酷 — 致敬經典版本
適用對象
- 國中小所有任課老師（下課小遊戲）
- 想看「Canvas 2D 多關卡遊戲程式」的開發者
- 五六年級資訊課（純 Canvas 教學案例）
- 想做「經典遊戲復刻」的工程師
想試試？
按 「SELECT WORLD」進關卡 → 試試 Shift 衝刺 + 蹬牆跳 — 比 #28 有層次得多。