🐍 #36 貪食蛇互動遊戲：純 Canvas 2D + 200ms 更新間隔 + 最高分紀錄的經典復刻
#36 真實標題「Snake Game」是阿凱用純 Canvas 2D 寫的經典貪食蛇復刻版。20px 格子 + 200ms 更新間隔 + localStorage 存最高分。7.6KB 單檔極簡部署 XOOPS VM。
經典貪食蛇 — 永不退流行
貪食蛇是程式設計入門的「Hello World 等級遊戲」：
- 規則簡單（吃食物變長、撞牆 / 自己死亡）
- 程式碼短（200 行內就能寫完）
- 視覺單純（網格 + 點點）
- 機制經典（Nokia 3310 1997 年原版到現在仍能玩）
阿凱的 #36 貪食蛇互動遊戲 是這款經典的純 JavaScript 復刻。
#36 真實怎麼做？
真實標題：「Snake Game」（純英文標題，極簡）
核心遊戲機制：
- 即時顯示「得分: 0」+「最高得分: 0」
- 點「開始遊戲」開始
- 蛇吃食物 → 長度增加 + 得分 +1
- 撞牆 / 撞自己 → 遊戲結束
遊戲參數（從程式碼抽出）：
gridSize = 20（每格 20px）gameInterval = 1000/5 = 200ms（每 200ms 更新一次 → 5fps）tileCount = canvas.width / gridSize動態計算格子數
真實技術棧
- 純前端單檔 HTML（7,655 字元 — 極簡）
- Canvas 2D（
getContext('2d')） - setInterval（不是 requestAnimationFrame — 200ms 慢動作好玩）
- localStorage 存最高得分
- 無框架、無 LLM、無音效
- 部署：
smes.tyc.edu.tw/smes_html/snake_game.html
為什麼用 setInterval 而不是 requestAnimationFrame？
設計選擇：
- requestAnimationFrame = 60fps 流暢 — 貪食蛇 60fps 太快根本玩不了
- setInterval(200ms) = 5fps — 每秒蛇移動 5 格剛好
→ 用對工具是工程師的修養（再次！）。
跟 #30 遊戲集合內的「貪吃蛇」是不同版本嗎？
#30 遊戲集合 內也有「貪吃蛇」子遊戲 — 跟 #36 是不同版本：
- #30 內的貪吃蛇 = 遊戲集合的一部分
- #36 獨立貪食蛇 = 單獨佔一個工具編號
可能是阿凱先寫獨立版（#36）→ 之後做合集（#30）時把貪吃蛇也納入 — 兩個版本都保留。
教學情境
程式設計課示範：
- 五六年級資訊課
- 老師展示「單檔 HTML + 純 JavaScript = 貪食蛇」
- 開 DevTools 看程式碼 → 總共不到 100 行
- 學生會感受到「寫程式不是天書」
下課休閒：
- 5 分鐘玩一輪
- 比 YouTube 廣告好
回家自學程式設計參考：
- 學生想學寫遊戲 → 從 #36 程式碼抄起
配對工具推薦
- #28 瑪莉歐風格平台跳躍 — 同款 Canvas 2D 但更複雜
- #30 遊戲集合 — 12-in-1 合集（含另一版貪吃蛇）
- #26 九九乘法大冒險 — Canvas 2D 學習版
適用對象
- 五六年級資訊課老師
- 程式設計營隊講師（Canvas 2D 入門案例）
- 想學「最簡單 Canvas 遊戲」的開發者
- 懷舊玩家