🥔 馬鈴薯貪食蛇
是怎麼做出來的？

整個網站是用 Astro 建立的。 你可以把 Astro 想像成蓋房子的骨架——它負責把各個頁面、元件組合在一起， 最後產出一個速度快、乾淨的網站。

Astro 的特色是「靜態輸出」：網頁在部署前就已經產生好 HTML 檔案， 不需要每次都在伺服器即時運算，所以載入速度非常快。 這個遊戲頁面也是其中的一部分，和部落格文章、首頁共用同一套版型與樣式。

遊戲邏輯全部用 TypeScript 撰寫。 TypeScript 是網頁最常見語言 JavaScript 的進化版——它多了「型別」的概念， 就像每個資料都貼上標籤，說明它是數字、文字還是其他東西。

這讓程式碼更不容易出錯：如果有個地方應該放座標數字，卻不小心傳入文字， 程式在執行前就會發出警告，而不是等玩家玩到一半才當機。

遊戲被拆分成五個獨立的模組：types.ts（資料定義）、 game.ts（遊戲邏輯）、 loop.ts（主迴圈）、 renderer.ts（畫面繪製）、 audio.ts（音效）。 每個模組只負責一件事，讓程式容易維護也容易修改。

你看到的所有遊戲畫面——馬鈴薯、蛇身、開始畫面、死亡特效—— 都是用瀏覽器內建的 Canvas API 即時繪製出來的。

Canvas 就像一塊數位畫布，程式可以在上面畫圖形、貼圖片、寫文字。 遊戲每 150 毫秒（不到六分之一秒）就重新計算一次蛇的位置， 然後把整個畫面重畫一遍——這就是你看到蛇「移動」的原理。

遊戲地圖是 10×10 的格子，每格 60 像素，整個畫布大小是 600×600。 蛇的每個身體節段、食物、邊框，都是用座標計算後畫上去的。

遊戲裡的馬鈴薯角色——包含一般馬鈴薯、發芽馬鈴薯、黃金馬鈴薯、 蛇頭、蛇身，以及各種死亡畫面的插圖——全都是用 GPT-image-2（OpenAI 的圖像生成模型）繪製而成的。

GPT-image-2 是一個可以根據文字描述自動生成圖片的 AI 模型。 製作這款遊戲時，只需要用文字說明想要什麼樣的馬鈴薯角色， 模型就會產出對應的圖片素材，直接用在遊戲裡。

遊戲裡的所有音效——爬行聲、進食聲、死亡音效—— 都是由瀏覽器內建的 Web Audio API「即時合成」出來的， 不需要下載任何音訊檔案。

這項技術可以讓程式直接控制聲波的頻率、音量、持續時間， 合成出復古電玩風格的 8-bit 音效。 例如吃到黃金馬鈴薯時的三連上揚音（Do-Mi-Sol）， 就是在 0.21 秒內連續播出三個不同頻率的方波音色。

右上角的喇叭圖示可以切換靜音，偏好設定會記錄在瀏覽器裡， 下次開啟頁面時會自動套用。

這款遊戲可以在手機和平板上遊玩。為了讓觸控裝置也有好的體驗， 做了以下三項調整：

• ▸ 畫面自動縮放： 遊戲畫布用 CSS 自動縮小到符合螢幕寬度，不會超出畫面， 但遊戲內部的座標計算完全不受影響。
• ▸ 滑動手勢（Swipe）： 手指在畫面上往任意方向滑動超過 20 像素，就會控制蛇轉向。 滑動距離的門檻設計是為了避免誤觸。
• ▸ 虛擬方向鍵（D-pad）： 在觸控裝置上，畫布下方會顯示十字方向鍵。 方向鍵放在畫布外面，不會遮住遊戲畫面—— 因為手機螢幕是長方形，畫布（正方形）下方自然留有空間。 在桌機上這組按鍵會自動隱藏。

這款貪食蛇和傳統版本有幾個不一樣的地方：

• ▸ 邊框穿越： 撞到牆壁不會死，蛇會從對面的牆壁穿出來繼續前進。
• ▸ 飢餓機制： 10 秒內沒吃到食物就會餓死，逼著玩家積極行動。
• ▸ 發芽馬鈴薯： 吃了之後蛇身會從尾部開始「發芽」，每隔 3 秒往前蔓延一節。 如果整條蛇都發芽了就死亡。吃黃金馬鈴薯可以解除。