🐍 大口吃螞蟻 | Chomp Snake

Mobile-first 像素風貪吃蛇遊戲，純 Vanilla JS + HTML5 Canvas，零依賴靜態 PWA。

---

🌐 線上遊戲網址

https://chomp-snake.netlify.app

• Netlify Project ID: b284f39f-2517-49c8-8e49-89cb0fb3eaaf
• Admin 管理後台: https://app.netlify.com/projects/chomp-snake

---

📁 專案結構

chomp-snake/
├── index.html              # 主頁面（含 CSP 安全 meta）
├── manifest.json           # PWA 描述檔
├── sw.js                   # Service Worker（離線快取）
├── netlify.toml            # Netlify 建置設定
├── _headers                # Netlify CDN 安全標頭
├── server.js               # 本地開發伺服器（不部署）
├── .gitignore
├── icons/
│   ├── icon-192.svg        # PWA 圖示 192×192
│   └── icon-512.svg        # PWA 圖示 512×512
├── styles/
│   └── main.css            # Mobile-first CSS
├── js/
│   ├── main.js             # 進入點：觸控/鍵盤輸入、選單、安全初始化
│   ├── game.js             # 核心引擎：遊戲迴圈、蛇/螞蟻渲染、碰撞
│   ├── dashboard.js        # 上方狀態列 + 側邊選單 UI
│   ├── audio.js            # Web Audio API 合成音效（零音檔）
│   ├── constants.js        # 遊戲常數、動態格線計算
│   ├── ranks.js            # 段位系統
│   └── security.js         # 安全 localStorage 封裝（HMAC 驗證）
└── docs/
    └── final_game_spec.md  # 設計規格書（中文）

---

🚀 部署更新指令

在專案目錄下執行：

cd /Users/dorachiu/Documents/chomp-snake

# 1. 確認修改內容
git status

# 2. 加入所有變更
git add -A

# 3. 提交
git commit -m "描述這次的修改內容"

# 4. 部署到 Netlify 正式環境
npx netlify-cli deploy --prod --dir=.

⚠️ 若更新了靜態資源，記得同步更新 sw.js 裡的 CACHE_NAME 版本號（例如 chomp-snake-v2），
這樣用戶端的 Service Worker 才會刷新快取。

---

🖥️ 本地開發

cd /Users/dorachiu/Documents/chomp-snake
node server.js              # 預設 http://localhost:8080
node server.js 3000         # 自訂 port

server.js 是完整的安全靜態伺服器，包含 15+ HTTP 安全標頭、MIME 白名單、路徑穿越防護。

---

🎮 遊戲模式

模式	說明
Classic 經典	標準貪吃蛇，撞牆/撞自己 = 死亡
Tunnel 隧道	邊界每 20 秒縮小，壓到 = 死亡，3 秒紅色預警
Frenzy 狂熱	同時 5 隻螞蟻、2 倍連擊獎勵、每吃 +2% 速度（上限 30 FPS）

毒螞蟻模式（可疊加任何模式）：35% 機率產生紅色毒螞蟻，吃到扣 1 HP（最多 3 HP），歸零 = 死亡。

---

🔒 安全機制

前端 (security.js)

• localStorage 白名單 + FNV-1a 完整性雜湊
• 型別驗證 + 溢出防護
• DevTools 偵測、Frame Buster、CSP Reporter

伺服器 / CDN 標頭

• Content-Security-Policy（script-src 'self'，禁止 inline/eval）
• X-Frame-Options: DENY
• X-Content-Type-Options: nosniff
• Referrer-Policy: no-referrer
• Permissions-Policy（封鎖 25+ 瀏覽器 API）
• Cross-Origin-Opener-Policy / Resource-Policy: same-origin
• HSTS preload（Netlify 自動）

---

📋 技術規格

• 前端: Vanilla JS ES Modules + HTML5 Canvas 2D
• 音效: Web Audio API 即時合成（零音檔）
• PWA: manifest.json + Service Worker（cache-first）
• 部署: Netlify 靜態站（免費方案、自動 HTTPS、全球 CDN）
• 格線: 24×24，動態縮放 recalcGrid()
• 蛇皮膚: 7 種（Block / Neon / Retro / Stripe / Lava / Ice / Ghost）

---

📝 更新紀錄

v1.0.0 — 2026-03-30

• ✅ 完整手機版改版（響應式 Canvas、虛擬方向鍵、滑動操控）
• ✅ 精緻螞蟻渲染（3 體節、6 腿動畫、觸角、大顎、毒骷髏標記）
• ✅ 精緻蛇渲染（7 種皮膚各有獨特材質、連接段落、漸細尾巴）
• ✅ 最高等級資安防護（15+ 安全標頭、加密 localStorage）
• ✅ PWA 離線遊玩 + Netlify 雲端部署
• ✅ 20+ bug 修復（死亡顏色、連擊暫停、毒蛇成長等）