| 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 # 加塔/加怪/調平衡說明
快速開始（玩現成的）
python -m http.server 8000
玩法：選砲塔 → 點地圖空格建造（不能蓋路徑上）→ 點「開始下一波」→
塔自動攻擊怪物 → 賺金錢升級/蓋更多塔 → 撐越多波越高分。
⚠️ 用 HTTP server 開（不要 file://），server 開在 tower-defense/ 根目錄。
核心設計原則（改動時請遵守）
config.js 是資料層：塔、怪、技能、元素克制、平衡都在這，改這裡即可調整。- 美術接點零侵入：
game.js 的 drawSprite 優先用 assets/<group>/<id>.png，
沒有才用 emoji。接美術不需改邏輯。
- 無盡波次核心：
startWave() 依波數算血量成長與敵人組成，bossEveryWaves 控 Boss 頻率。
- 元素克制：
elementMultiplier(atk, def) 回傳傷害倍率（克制 1.5、被克 0.66）。
- 零依賴：純 Canvas 2D，不引入任何套件。
⭐ 視覺基線（生成新塔防時必套，否則會很醜）
這些是預設要做的，不是選配。greybox（純色塊）版本不可接受：
- 設計系統色階：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，不當大面積背景。
- 互動態：所有按鈕
:hover 提亮 + :active{transform:translateY(1px)}，
觸控目標 min-height:44px。
- 打擊回饋（爽感 CP 最高）：傷害浮動數字（克制時放大變紅），命中 glow 圓點粒子 +
擴張環，粒子帶重力。子彈用投射物圖、朝飛行方向旋轉。
- Canvas 場景深度：背景 radial vignette、路徑描邊分層、血條圓角漸層 + 外框、
所有 canvas 文字先
strokeText（黑描邊）再 fillText。
- 美術去背：素材方塊背景用
getImg 的去背處理融入場景（地圖滿版磚塊用 noBg）。
🎮 爽感與深度必備（讓「玩一次」變「再玩一次」）
生成時這些是預設機制，缺了就不算「超好玩」：
- Meta 進度 loop（最大留存）：結算面板顯示本局波數、
localStorage 存 bestWave，
破紀錄慶祝、每局產出魂晶（可規劃永久升級）。HUD 顯示歷史最高。
- 輸出對抗碾壓：波獎勵指數成長（
base * growth^wave）給金錢出口，塔開放 6 級，
血量分段成長（前期 0.15、後期 0.10）。改完跑 scripts/sim-balance.js 驗證撐波 ≥20。
- 新手引導 + 資訊透明：首次 3 步引導 overlay（存 localStorage）、塔/英雄按鈕補關鍵數值、
元素 chip 顯示克制（🔥火 ❄️冰 ⚡雷 · 克X）。
- 元素克制要「看得見」：不只程式有，UI 要呈現（塔按鈕元素標、敵人元素提示）。
- 連殺/回饋：擊殺有粒子噴濺，可加 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() 等接口可程式化驗證。
