tower-defense

name	tower-defense
description	快速製作純原生（零依賴）Canvas 2D 無盡塔防遊戲。當使用者想做塔防、tower defense、守城、放置砲塔擋怪物的網頁遊戲時觸發。提供可直接執行的單頁遊戲，含多種砲塔升級、元素克制、主動技能、無盡隨機波次與 Boss 戰，並用統一設定檔串接 Grok CLI 生成美術。
when_to_use	觸發語句包含「做一個塔防」「tower defense」「守城遊戲」「放砲塔擋怪」「無盡波次」「塔防遊戲技能」。
shell	powershell

無盡塔防遊戲快速製作 (tower-defense)

在幾分鐘內生出一個可直接在瀏覽器執行的 Canvas 2D 塔防遊戲。 技術路線純原生：HTML + CSS + 原生 JavaScript + Canvas 2D，零框架、零建置、零 npm。

何時用這個 skill

當使用者要做塔防類遊戲：怪物沿路徑前進、玩家放砲塔攔截、守護女神。本模板特色：

• 守護女神核心：終點站著要守護的女神，怪物漏過攻擊她，可花金升級（加生命、解鎖聖光反擊）
• 無盡隨機波次：一波波無限生成、難度遞增、Boss 波、比拼最高波數
• 多種砲塔 + 升級：弓箭(單體)、加農砲(範圍)、寒冰塔(減速)、電磁塔(穿透)，可升 6 級，外觀隨等級變化
• 元素克制 + 塔協同：火/冰/雷互克；被減速/冰凍的敵人受傷 +25%（救活寒冰塔）
• 可抽卡英雄：抽英雄上場，地圖自走打怪、自我升級、四方向精靈圖，可指定駐守點
• 主動技能：隕石、冰封、雷暴，有冷卻，緊急時手動施放
• 三難度模式：普通(主流可過)/嚴酷/無盡煉獄，難度當社群鉤子（值得寫攻略）
• 特殊事件波：狂奔/精英/蟲潮/寶藏波，打破單調、製造驚喜
• Meta 進度：最高紀錄、魂晶、連殺 combo、暫停、低血告警、死亡分享戰績

專案結構

tower-defense/
├── SKILL.md
├── art-config.json           # ★ 美術生成設定（砲塔/怪物/技能提示詞）
├── index.html                # 遊戲頁面 + HUD/UI 樣式
├── src/
│   ├── config.js             # ★ 資料層：塔/怪/技能/元素克制/平衡參數
│   ├── game.js               # 核心引擎：Canvas 渲染、遊戲迴圈、波次、戰鬥
│   └── ui.js                 # HUD、建塔選單、技能列、升級面板
├── assets/{towers,enemies,skills}/  # 美術圖（生成後放這）
├── scripts/gen-art.ps1       # 用 Grok 批次生成美術
└── references/data-model.md  # 加塔/加怪/調平衡說明

快速開始（玩現成的）

# 在 tower-defense 根目錄起 server
python -m http.server 8000
# 開 http://localhost:8000/index.html

玩法：選砲塔 → 點地圖空格建造（不能蓋路徑上）→ 點「開始下一波」→ 塔自動攻擊怪物 → 賺金錢升級/蓋更多塔 → 撐越多波越高分。

⚠️ 用 HTTP server 開（不要 file://），server 開在 tower-defense/ 根目錄。

核心設計原則（改動時請遵守）

1. config.js 是資料層：塔、怪、技能、元素克制、平衡都在這，改這裡即可調整。
2. 美術接點零侵入：game.js 的 drawSprite 優先用 assets/<group>/<id>.png， 沒有才用 emoji。接美術不需改邏輯。
3. 無盡波次核心：startWave() 依波數算血量成長與敵人組成，bossEveryWaves 控 Boss 頻率。
4. 元素克制：elementMultiplier(atk, def) 回傳傷害倍率（克制 1.5、被克 0.66）。
5. 零依賴：純 Canvas 2D，不引入任何套件。

⭐ 視覺基線（生成新塔防時必套，否則會很醜）

這些是預設要做的，不是選配。greybox（純色塊）版本不可接受：

1. 設計系統色階：CSS 變數定義 3 階 surface（--surface-0/1/2）+ 統一陰影 （inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.35)）+ 柔邊框 （rgba(255,255,255,.07)）。強調色（綠/金）只用在 CTA，不當大面積背景。
2. 互動態：所有按鈕 :hover 提亮 + :active{transform:translateY(1px)}， 觸控目標 min-height:44px。
3. 打擊回饋（爽感 CP 最高）：傷害浮動數字（克制時放大變紅），命中 glow 圓點粒子 + 擴張環，粒子帶重力。子彈用投射物圖、朝飛行方向旋轉。
4. Canvas 場景深度：背景 radial vignette、路徑描邊分層、血條圓角漸層 + 外框、 所有 canvas 文字先 strokeText（黑描邊）再 fillText。
5. 美術去背：素材方塊背景用 getImg 的去背處理融入場景（地圖滿版磚塊用 noBg）。

🎮 爽感與深度必備（讓「玩一次」變「再玩一次」）

生成時這些是預設機制，缺了就不算「超好玩」：

1. Meta 進度 loop（最大留存）：結算面板顯示本局波數、localStorage 存 bestWave， 破紀錄慶祝、每局產出魂晶（可規劃永久升級）。HUD 顯示歷史最高。
2. 輸出對抗碾壓：波獎勵指數成長（base * growth^wave）給金錢出口，塔開放 6 級， 血量分段成長（前期 0.15、後期 0.10）。改完跑 scripts/sim-balance.js 驗證撐波 ≥20。
3. 新手引導 + 資訊透明：首次 3 步引導 overlay（存 localStorage）、塔/英雄按鈕補關鍵數值、 元素 chip 顯示克制（🔥火 ❄️冰 ⚡雷 · 克X）。
4. 元素克制要「看得見」：不只程式有，UI 要呈現（塔按鈕元素標、敵人元素提示）。
5. 連殺/回饋：擊殺有粒子噴濺，可加 combo 連殺倍率（接打擊數字基礎設施）。

加塔 / 加怪 / 調平衡

改 config.js 即可，細節見 references/data-model.md：

• 加砲塔：在 TOWERS 加一筆（range/damage/fireRate/cost/element/特殊效果）
• 加怪物：在 ENEMIES 加一筆（hp/speed/reward/element）
• 調難度：改 GAME.hpGrowthPerWave（波血量成長）、bossEveryWaves 等

生成美術

cd tower-defense
.\scripts\gen-art.ps1 -DryRun        # 預覽
.\scripts\gen-art.ps1                  # 生成全部
.\scripts\gen-art.ps1 -Group towers    # 只生砲塔

生完圖檔自動放到 assets/<group>/<id>.png，遊戲會自動載入。

驗證遊戲可玩

起 server → 開 index.html → 建幾座塔貼著路徑 → 開始波次 → 確認塔射擊、敵人扣血死亡、 金錢增加、波次循環。Console 只有 favicon/未生成圖的 404 屬正常（會 fallback 到 emoji）。

測試提示：window.TD 暴露 state()、startWave()、selectTower() 等接口可程式化驗證。