適配各大 HTML5 遊戲平台：Kiwi Defenders 的發行之路
解決 iframe 縮放、Visibility API 以及模組化 SDK 整合，實現全球瀏覽器分發。
瀏覽器遊戲發行的隱藏複雜性
在現代發行一款 HTML5 遊戲，絕不僅僅是把一個 ZIP 壓縮檔上傳到伺服器那麼簡單。
各大瀏覽器遊戲平台（Portals）都在不同的環境下運行，它們有著各自的：
- Iframe 嵌套環境
- 安全策略
- 廣告 SDK
- 音訊播放限制
- 畫面縮放要求
- 平台認證規則
在部署期間，確保遊戲在所有這些平台上都能完美相容，成為了一個巨大的工程挑戰。
解決 Iframe 縮放難題
最大的技術障礙之一，是如何在不可預測的瀏覽器環境中保持視覺一致性。當遊戲被嵌入到第三方平台的佈局中時，標準的響應式 CSS 縮放方法通常會導致基於 Canvas 的遊戲畫面變形。
為了解決這個問題，《Kiwi Defenders》使用了一個專用的 resizeGame() 縮放系統。它能動態計算長寬比，並應用受控的 CSS transform 縮放，同時完美保留原始的 1280×720 遊戲解析度。
這確保了遊戲畫面在以下設備中保持清晰穩定：
- 超寬螢幕顯示器
- 標準桌面顯示器
- 平板電腦
- 行動端直式瀏覽器
遵守現代瀏覽器的可見性規則 (Visibility API)
大型發行平台對遊戲的背景行為有著嚴格的要求。如果玩家最小化了瀏覽器視窗或切換了分頁，遊戲必須立即暫停、靜音，並掛起活動渲染循環。
為了符合這些要求，遊戲引擎透過監聽 visibilitychange 事件，直接與瀏覽器的 Visibility API 整合。這不僅防止了背景播放音訊的尷尬，還有效降低了遊戲處於非活動狀態時不必要的 CPU 占用。
構建模組化的 SDK 整合層
不同的發行商使用截然不同的廣告與平台 API。我們沒有將商業化系統與核心遊戲架構強耦合，而是圍繞「模組化 SDK 整合層」設計了整個專案。
這種抽象化設計允許遊戲快速在以下系統間無縫切換：
- 基於 Promise 的廣告系統
- 全域事件監聽器 (Global event listeners)
- 獎勵式廣告 API (Rewarded ad APIs)
- 發行商特定的儲存框架
這一切都不需要重寫底層的核心遊戲邏輯。
面向長期可擴展性的工程設計
《Kiwi Defenders》的長期目標之一始終是「高移植性」。透過保持架構的模組化、輕量級與平台無關性，該專案能輕鬆適應未來新增的發行商整合、新的商業化變現系統、多語言部署以及長期的營運服務 (Live-service) 更新。
隨著瀏覽器遊戲生態系在桌面與行動端的持續演進，這種底層的靈活性正變得越來越具有戰略價值。