Tower Defense
Tower Defense（塔防）是即時策略遊戲的常見子類型，核心玩法為玩家在敵人必經的路徑上放置防禦單位，阻止敵人抵達終點或攻擊我方基地。此類型深受《植物大戰殭屍》（Plants vs. Zombies）影響，強調資源管理、單位部署與波次（Wave）設計。
核心機制¶
典型的 Tower Defense 遊戲具備以下元素：
- 路線：敵人沿固定或可變路線前進，玩家在路旁部署防禦單位。
- 資源經濟：擊敗敵人可獲得資源（如金幣、民意值），用於購買或升級單位。
- 防禦單位：不同角色具備攻擊、減速、生產資源等能力。
- 敵方波次：敵人強度隨關卡遞增，甚至包含 Boss。
- 基地／生命值：若敵人抵達終點，基地生命值下降，歸零即遊戲失敗。
本地專案「釘子戶大戰拆遷隊」正是此類型的範例，將塔防機制套入香港都市更新主題：玩家扮演釘子戶，部署老人、孩子與狗等居民，抵擋拆遷隊與地產商的推土機攻勢。遊戲以「民意值」作為資源，祖屋作為基地，使用五條平行道路的經典架構。
技術實作¶
現代的 HTML5 Tower Defense 遊戲常用 phaser-3 框架開發。Phaser 提供 Scene、Sprite 動畫、物理系統與時間事件，適合製作 2D 塔防遊戲。在 釘子戶大戰拆遷隊 的實作中：
- 使用
Phaser.Game建立遊戲實例，設定寬高與場景。 - 以
lane陣列定義五條道路的 Y 座標。 - 透過
add.text或load.spritesheet載入角色與動畫。 - 以
time.addEvent定期生成敵人，update迴圈處理子彈碰撞與敵人移動。
卡牌與冷卻系統¶
進階塔防常加入卡牌系統，玩家需等待冷卻時間才能再次部署單位。卡牌可使用 setAlpha 顯示冷卻中的半透明狀態，並以 setTimeout 或 Phaser 的計時器恢復可用狀態。
資產與動畫¶
Sprite Sheet 是常見的動畫載入方式，例如將角色 idle、walk、attack、hurt 四種狀態繪製於同一張 PNG，再以 generateFrameNumbers 建立動畫。Boss 角色通常需要更大的 frame 尺寸。音效可透過 load.audio 與 sound.play 管理，背景音樂通常循環播放。
部署與自動化¶
此類瀏覽器遊戲可靜態部署於 cloudflare-pages。搭配 github-actions 的 cloudflare/wrangler-action@v3，即可在 push 到 main 分支時自動建置並發佈。專案結構需包含 index.html、style.css、game.js 與 assets/ 資料夾，Cloudflare Pages 設定 Build command 為空、Output directory 為 / 即可。
設計與延伸¶
塔防遊戲的樂趣在於單位搭配與資源取捨。設計上需注意：
- 數值平衡：敵我生命值、攻擊力、生產成本需形成策略深度。
- 角色特色：不同單位應有獨特定位，例如坦克、遠程、輔助或資源生產。
- 關卡節奏：波次之間須提供喘息空間，讓玩家調整佈局。
- 主題包裝：將機制融入文化背景能強化代入感，如以「拆遷」為主題的 釘子戶大戰拆遷隊。
未來可加入 pwa 離線安裝、LocalStorage 存檔、每日挑戰（搭配 cloudflare Workers AI 生成關卡）、以及更完整的 Sprite 動畫與音效，使作品從 Demo 邁向商業小遊戲。