為 Kiwi Defenders 選擇原生 HTML5：拋棄重型遊戲引擎的幕後思考
深入探討我們這款輕量級、60 幀絲滑運行的 Web 塔防遊戲背後的工程決策。
當《Kiwi Defenders》的開發工作啟動時，一個決定塑造了後續的一切：保持遊戲的輕量化、極速載入，以及點開即玩。
極速載入是核心設計目標
我們沒有依賴 Unity 或 Godot 這樣龐大的遊戲引擎，整個專案完全使用原生 JavaScript (Vanilla JavaScript) 與原生的 HTML5 Canvas API 構建。這種方法讓我們從第一天起，就能對效能、渲染、記憶體使用與行動端優化擁有絕對的控制權。
對於瀏覽器玩家來說，這一點比以往任何時候都重要。沒有人願意在測試一款遊戲前等待漫長的下載。我們的目標很簡單：打開網頁，幾秒鐘內就開始保衛紐西蘭。
點擊此處立即遊玩純淨 HTML5 版的 Kiwi Defenders ➔
打造穩定的 60 FPS 體驗
塔防遊戲最大的技術挑戰之一，是在高單位密度的混亂戰場中保持流暢的幀率。到了戰役後期，幾十個彈射物、粒子特效、敵人、召喚物與動畫可能會同時處於啟用 (Active) 狀態。
為了應對這種負載，引擎使用了一個經過精心優化的 requestAnimationFrame 循環，將遊戲邏輯與渲染操作嚴格分離。這使得戰鬥計算即使在「末日級」波次、螢幕視覺極度密集的時刻也能保持穩定。
其結果就是：無論是在桌面瀏覽器、平板電腦，還是低階行動裝置上，遊戲都能提供靈敏的控制與極其流暢的戰鬥表現。
極具擴展性的輕量級碰撞偵測
《Kiwi Defenders》沒有實作昂貴的物理模擬，而是依賴於精簡的 AABB（軸對齊包圍盒，Axis-Aligned Bounding Box）碰撞系統。
這種極簡主義的架構支撐著：
- 近戰擊中判定
- 彈射物撞擊
- 對空單位鎖定
- 濺射範圍傷害 (AOE) 計算
- 防禦牆互動
因為該系統的計算成本極低，所以螢幕上可以同時存在龐大的敵人群體，而不會引發嚴重的掉幀。
跨平台遊玩的響應式設計
現代瀏覽器遊戲必須「無處不在」。遊戲的響應式 Canvas 系統能夠動態縮放戰場，同時完美保留長寬比與遊戲畫面的清晰度。
結合經過優化的 WebP 序列幀 (Sprite sheets) 與壓縮過的音訊資產，遊戲體驗不僅在視覺上保持乾淨，而且完全不會臃腫拖慢載入時間。
無論玩家是在寬螢幕桌面顯示器上啟動遊戲，還是在橫向模式的手機瀏覽器中遊玩，戰場始終居中、銳利且易於閱讀。