🍄 #28 瑪莉歐風格平台跳躍遊戲：純 Canvas 2D + requestAnimationFrame + AudioContext 音效 + 最高分紀錄
#28 真實名稱「瑪莉歐風格平台跳躍遊戲」是阿凱用純 Canvas 2D（無框架）寫的橫向卷軸跳跳遊戲。方向鍵移動 + 空白鍵跳躍，AudioContext 合成音效，localStorage 存最高分。20KB 單檔部署 XOOPS VM。
課間 5 分鐘小遊戲也是教具
下課時間學生會去玩線上小遊戲 — 但廣告滿天飛、要登入、容易踩雷。
阿凱「用 Gemini 寫一個自己的小遊戲掛在學校網域」反向：
- ✅ 不會廣告污染
- ✅ 不用登入
- ✅ 掛在
smes.tyc.edu.tw學校網域 — 老師家長信任
#28 真實怎麼做？
真實標題：「瑪莉歐風格平台跳躍遊戲」
遊戲機制：
- 橫向卷軸跳跳遊戲（致敬瑪莉歐）
- 使用左右方向鍵移動
- 點擊畫面或按空白鍵跳躍
- 即時顯示「分數: 0」+「最高分: 0」
- 遊戲結束 → 重新開始
真實技術棧
- 純前端單檔 HTML（20,021 字元）
- Canvas 2D（
getContext('2d')） - requestAnimationFrame（流暢 60fps 動畫）
- AudioContext（合成音效，跟 #26 九九乘法同款）
- localStorage（存最高分）
- 無框架 / 無 Tailwind / 無 LLM — 純 JavaScript
- 部署：
smes.tyc.edu.tw/smes_html/mariojump.html
為什麼純 Canvas 2D 還是好選擇？
阿凱沒用 Phaser / PixiJS 這類遊戲引擎，因為：
- 載入快：CDN 引擎要載 100-500KB，Canvas 原生 0 KB
- 單檔即用：不需 build / bundle / 模組系統
- 學生看得懂：開瀏覽器 DevTools 看到的程式碼是「他們也能寫」的等級
- 改容易：阿凱要加新地形 / 敵人，直接改 JS 沒套件冗餘
教學情境
資訊科技課示範：
- 五六年級程式設計單元
- 老師打開 #28 → 給學生看「單檔 HTML + 純 Canvas 2D 就能做出瑪莉歐」
- 用 DevTools 開 Sources 看程式碼 → 學生知道遊戲背後其實「沒這麼難」
下課時間放鬆：
- 不會打擾其他課程
- 5 分鐘玩一輪正好
回家作業選做：
- 想挑戰自己破最高分
配對工具推薦
- #29 太陽系探索者 — 純 Three.js 3D 教學
- #36 貪食蛇互動遊戲 — 同款 Canvas 2D 遊戲
- #30 遊戲集合 — 12 個遊戲合集
適用對象
- 資訊科技課老師（純 Canvas 教學範例）
- 程式設計營隊講師
- 想做「沒廣告小遊戲」給學生玩的老師
- 想學「不靠 Phaser 寫 2D 遊戲」的開發者