還記得去年初剛用chatgpt 請它給我一個貪吃蛇範例，他緩慢的吐出一個稍微可以執行的鍵盤左右上下鍵的貪吃蛇範例，當時我還驚為天人，覺得軟體開發，可能可以變得簡單，但實際上，一直到了 (2025) 去年五月，Cursor內建的AI 模型 Claude，才讓我真的發現，軟體開發似乎可以請AI代勞了。
以前，為玩個遊戲，絕對不會想要自己寫一個在玩，但現在，每天空閒下來，似乎我都在做這樣的事情。
進化版貪吃蛇畫面如下: 用純網頁開發，要包裝成IOS (ipa)或 Android(apk;aab)也變得輕而易舉。
SNAKE BATTLE 是一款節奏明快、基於向量運算的 .io 生存遊戲。玩家將在色彩斑斕的賽博龐克宇宙中操控霓虹蛇。不斷成長、擊敗對手，並統治排行榜吧！
🎮 遊玩方式
核心目標
盡可能生存更久，吞噬發光的能量球來成長，並擊敗其他蛇以奪取它們的能量。成為競技場中最長的一條蛇！
操作說明
平台動作控制方式電腦版 (Desktop)移動移動 滑鼠游標 來轉向，蛇會追隨你的指標。衝刺 (加速)按住滑鼠左鍵 進行衝刺。會消耗能量！手機版 (Mobile)移動在螢幕任意處 觸控並拖曳 以控制方向。衝刺 (加速)點擊或雙擊（視裝置設定而定）進行衝刺。
遊戲機制
- 能量球 (食物)：散佈在場地各處。吃下它們可以增長長度並獲得分數。
- 戰鬥細節：切記： 頭部 不可碰撞 其他蛇的身體，否則會死亡！
- 攔截對手：利用加速（衝刺）繞到敵人前方，逼迫他們撞上你的身體。
- 大快朵頤：蛇死亡後會化為一堆發光食物，迅速吃掉它們可以瞬間暴漲！能量值：使用 衝刺 會消耗能量條（黃條）。能量會隨時間緩慢恢復，或透過進食補充。
- 魔王 (The Boss)：當心！得分達到一定門檻後，「柴郡貓王 (Cheshire King)」可能會現身。擊敗他可獲得極高分數。
介面說明 (HUD)
- 左上角：目前分數與最高紀錄。
- 右上角：能量條。
- 右下角：小地圖 (雷達)。
🔵 藍點：你自己。
🔴 紅點：敵方電腦 (Bots)。
🟣 紫點：魔王。 - 左側：即時排行榜，顯示頂尖玩家。
🌟 遊戲特色
- 霓虹視覺效果：採用「發光 (Bloom)」渲染、RGB 分離特效及動態光影。
- 3D 卡通風格：提供可愛卻致命的動物頭像（貓、兔、熊貓等），搭配 3D 渲染的蛇身。物理引擎：流暢的 360 度向量移動（非方格點對點移動）。
- 智能 AI：電腦蛇會自行遊走、覓食並嘗試攔截玩家。
- 高響應性：針對桌面端（滑鼠）與行動端（觸控）進行雙重優化。
🛠️ 技術概覽
架構設計
- 核心：原生 JavaScript (ES6+)，未選用外部遊戲引擎。
- 渲染：HTML5 Canvas API (2D Context)。使用自定義的 Vector 類別進行物理計算。實現「節點跟隨 (Segment Follow)」演算法，讓蛇身擺動更擬真。
- 樣式：CSS3 打造 UI 介面（開始畫面、排行榜），結合玻璃擬態 (Glassmorphism) 與霓虹特效。
檔案結構
- index.html：主要入口，定義 UI 結構。style.css：視覺樣式、字體與動畫。game.js：完整的遊戲邏輯（遊戲循環、實體、物理、AI、渲染）。
核心類別 (Key Classes)
- Game：管理循環、狀態與所有實體。BaseSnake：處理移動與渲染的父類別。PlayerSnake：處理玩家輸入控制。BotSnake：實現 AI 行為（遊走/追蹤狀態）。Particle：處理爆炸特效。
🚀 啟動遊戲
只需在任何現代瀏覽器中開啟 index.html 即可遊玩。無需架設伺服器（除非要測試特定的瀏覽器安全性功能）。
祝戰鬥愉快！ 🐍⚔️
