戰鬥規則核心
- 固定步長模擬
- 決定性重播
戰鬥規則以每秒 60 步的固定步長更新，處理軍費、生產排程、移動、射程、兵種相剋、傷害同時結算與勝負。核心規則不使用亂數，戰場軍費等隨機事件由種子產生；每筆命令記錄所在的更新步與結果，並每秒記錄狀態雜湊，可完整重播同一場戰鬥。
← 返回成果與技術實蹟遊戲開發
零日出擊：網頁即時策略遊戲
應用產業：遊戲與互動娛樂
桔果科技自行開發的 2D 橫向即時策略遊戲，以二戰為背景：玩家率領盟軍戰車連，從諾曼第一路打到紐倫堡，每打贏一場就推進一章劇情。以 HTML5 與 JavaScript 實作，提供中文與英文版，已於 zeroday.gigoo.co 上線，電腦與手機瀏覽器開啟即可遊玩。
前往零日出擊遊玩（另開分頁）
遊戲實際畫面（第 7 章「渡河之夜」戰鬥）
HTML5 CanvasJavaScriptWeb Audio APIPWACloudflare Pages
THE CHALLENGE
解決的問題
即時策略遊戲要在瀏覽器中同時處理生產、移動、射程、兵種相剋與勝負判定，每一場的規則結果都必須一致且可以驗證；同一套操作還要兼顧滑鼠鍵盤與手機觸控，AI 對手也要從新手到高手都有明顯的難度差別。加入章節劇情與中英文介面後，文字與語言的切換也不能影響戰鬥規則與重播結果。
WHAT WE DELIVER
交付成果
- 01固定步長的戰鬥規則核心：每秒 60 步更新，命令紀錄可重播並以狀態雜湊比對
- 0210 章二戰劇情與 10 級 AI 對手：每章對應一級 AI，車道與車種隨章節逐步開放；勝利後是主角寫給妹妹的家書，打完第 10 章獲頒零日勳章
- 03中英雙語介面：依網址、上次選擇或瀏覽器語言切換，介面文字與規則數值分開管理
- 04手機觸控模式：直拿自動轉為橫向、全螢幕、點選車道出兵與震動回饋；視窗較小時自動放大介面文字
- 05規則驗收測試、隨機命令壓力測試與 Cloudflare Pages 發布流程
成果與技術價值
不依賴外部套件或遊戲引擎，以約 1.2 MB 的靜態檔案在電腦與手機瀏覽器執行。規則核心與畫面、控制者分離，架構上已預留遠端玩家與重播紀錄的接入點，替換控制者不需改動戰鬥規則。
實際系統畫面
零日出擊是桔果科技自行開發的二戰題材網頁遊戲，已在 zeroday.gigoo.co 上線，提供中文與英文版，電腦與手機瀏覽器都能直接遊玩。以下為遊戲實際畫面，點選圖片可放大檢視。
前往零日出擊遊玩（另開分頁）電腦版
瀏覽器視窗 1600 × 900 的畫面；以滑鼠或鍵盤選擇車種、指定車道。
主畫面：下一章的日期、地點與簡報（第 7 章「渡河之夜」） 
戰鬥畫面：盟軍與軸心國在三條車道交戰，下方為生產控制台（第 7 章） 
勝利畫面：主角艾迪寫給妹妹的家書與下一章預告 
打完第 10 章「四月二十日」後的零日勳章授勳畫面與結局 
車種說明：能力值、射程與剋制關係 
英文版主畫面，右下角可切換中文／EN
手機版
觸控裝置自動切換為觸控模式，介面文字放大；畫面為手機橫向（844 × 390）。
點選車種卡片後，可出兵的車道閃框提示（第 4 章）
技術架構與實作
以 HTML5 Canvas 與原生 JavaScript 實作完整的即時策略遊戲，戰鬥規則、AI、劇情文字、畫面與操作介面分層，讓同一套規則在電腦與手機、中文與英文版上一致執行。
陣營權限與 AI 對手
- 命令埠
- 10 級 AI
每個陣營只能透過自己的命令埠下達「生產」與「取消」兩種命令，AI 與玩家走同一條驗證路徑；AI 只看得到本方資訊與公開戰場，看不到玩家的軍費與未出廠訂單。AI 分為 10 級，對應劇情的 10 章，決策間隔、依剋制表選車的比例、兵力上限與收入倍率逐級調整，並以模擬對戰校準各級勝率。
章節劇情與中英文
- 章節劇情
- 中英雙語
第 N 章對應第 N 級 AI，從 1944 年 D 日的諾曼第打到 1945 年 4 月的紐倫堡，地點與日期依史實，部隊與人物為虛構。主畫面、開戰倒數、勝負與授勳畫面依進度顯示簡報、家書與結局，不另加過場動畫。介面與系統文字稱軸心國、盟軍，劇情對話則直呼美國、德國，增加臨場感。介面文字與劇情集中在中英文對照的字典檔，依網址參數、上次選擇或瀏覽器語言決定顯示語言；規則設定只保留數值，戰鬥核心與 AI 不讀任何名稱，切換語言不影響重播的狀態雜湊。
畫面、跨裝置與發布
- HTML5 Canvas
- Web Audio API
- PWA
- Cloudflare Pages
車輛（盟軍橄欖綠、軸心國沙黃迷彩）、戰場與各戰區背景皆以程式繪製，介面為 1600 × 900 的固定舞台，依視窗等比例縮放；音效以 Web Audio API 播放，沒有音檔時使用內建合成音效。觸控裝置自動切換觸控模式：直拿時畫面轉 90° 顯示成橫向，點擊進入全螢幕並鎖定橫向，出兵改為點選戰場上的車道。舞台縮到原尺寸九成以下時改用放大文字的版面；嵌入其他網站的頁框時不自行切換全螢幕。發布資料夾以允許清單產生，部署於 Cloudflare Pages 並使用自有網域。
系統運作流程
- 01
玩家與 AI 下達命令
生產與取消命令經各自的命令埠，在下一個更新步統一驗證。
- 02
規則核心推進戰局
以固定步長計算移動、攻擊、傷害與勝負，並記錄命令與狀態雜湊。
- 03
畫面呈現戰況
Canvas 繪製戰場，介面只顯示本方資訊，電腦與手機共用同一套規則。
本案例為桔果科技自有作品，畫面取自正式網站 zeroday.gigoo.co。劇情的地點與日期依史實，部隊與人物為虛構。