從過年靈感到可對戰的作品：CreateCombat 開發分享
一、先聊聊我自己：這款遊戲是怎麼開始的
大家好，這篇文章想用比較完整的方式，記錄我製作 CreateCombat 的歷程，也分享我在開發過程中的真實感受。
這個專案的起點，其實很生活化。
我是在 2026 年過年期間，一邊陪家人和小孩玩，一邊突然冒出「想做一款格鬥遊戲」的念頭。
我本身一直很喜歡格鬥遊戲，所以當時第一個想法是：
與其再做一款只能選固定角色的作品，不如做一款可以讓玩家自己建立角色的格鬥遊戲。
因為市面上很多格鬥遊戲，角色常常是固定的，或是需要額外購買 DLC。
如果真的想把內容收滿，對玩家來說，費用和門檻都不低。
我希望做一個更自由、也更容易接近的方向。
有了這個念頭之後，我先把腦中的玩法雛形整理成文字，再交給 Gemini 網頁版協助我整理需求設計書。
我當時輸入的內容很直接：目標是純前端的簡單網頁格鬥遊戲、雙角色、可電腦對戰與本機雙人、鍵盤分組控制、先不做連線、再補細節。
接著我開始選技術路線。
雖然我最熟的是 .NET 生態（像 ASP.NET、WPF、Blazor），但我很清楚這次要做的是「純前端、開網址就能玩」的遊戲體驗，這些框架不是最貼切的選擇。
另一方面，Unity、Unreal 雖然很強，但對這種小型 2D 格鬥作品來說，開發成本相對高。
因此我最後選了原生 Canvas。
理由很單純：我想做一個極簡小品，也想藉這次機會深度練習 JavaScript 核心能力。
在 Phaser.js、Pixi.js、Vanilla Canvas 等選項裡，我決定直接走 Canvas API。
技術方向確定後，就是開發工具。
我手上當時有 Google 的 Antigravity（官方魔改版 VS Code），內建不少 AI 輔助功能；同時我也補上 GitHub Copilot 訂閱，讓整個開發流程更順。
我對 Copilot 本來就很熟，這次也剛好可以把工具使用經驗串起來。
實際開發節奏很有感。
在 Vibe Coding 的方式下，專案很快就到達可玩程度，前期大量時間反而花在調整需求文件與指令表達，而不是手刻細節。
換句話說，真正的實作速度比我原本預期快很多。
但做完第一版後，我有一段時間其實有點空虛。
因為如果只比畫面或既有知名度，市場上早就有非常多成熟的格鬥經典。
就算我加了「讓玩家自己匯入角色素材」這個功能，我仍覺得還可以再往前一步。
後來看著家裡小朋友互動，我開始重新定義這款作品的價值：
如果它不只是一款對打遊戲，而是能讓大人小孩一起玩、一起學、一起合作，會不會更有意義？
所以我把「答題機制」拉進戰鬥流程。
設計概念是：鼓勵作答，答錯有代價，不作答代價更高，讓玩家願意參與題目互動，而不是只靠按鍵連打。
這個方向也讓遊戲從單純對戰，變成更有互動層次的體驗。
接著我又觀察到一件事：
傳統格鬥遊戲通常一定會有贏家和輸家，對大人來說是競技，對小朋友來說有時候可能是爭執的起點。
於是我加入「雙人協力打 Boss、救援人質」這個模式，讓玩家有共同目標，不再只剩互相擊敗。
在這個模式中，我刻意讓 Boss 具有壓力感。
玩家若只靠一般攻防很難輕鬆過關，必須善用答題與戰鬥系統的整合效果，才更容易突破。
也因為這樣，答題不再像附屬功能，而是核心策略之一。
最後，我也保留題庫彈性，讓玩家可用內建題庫或自訂題庫，依家庭情境調整難度。
大人可以帶難題，小孩用相對友善的題目，兩邊都能有參與感。
這是我很在意的一點：讓同一款遊戲能容納不同年齡層，並且仍然好玩。
二、CreateCombat 是什麼：一款可自訂、可對戰、可合作的 2D 格鬥遊戲
回到產品本身，CreateCombat 是一款以 TypeScript + HTML5 Canvas 製作的 2D 格鬥遊戲。
它的核心不是追求複雜 3D 規模，而是把「角色自訂、戰鬥節奏、答題互動、多人模式」整合在同一個易上手的入口裡。
1. 主要特色
- 角色可自訂：可上傳 sprite sheet 建立角色，並調整 HP、傷害、速度、尺寸與遠程攻擊參數。
- 模式完整：支援本機 PvP、CPU 對戰、PvE（單人與雙人協力）、錦標賽與線上對戰。
- 答題系統整合戰鬥：內建題庫與獎勵/懲罰邏輯，讓「學習」不脫離遊戲節奏。
- 跨平台體驗：可在瀏覽器直接遊玩，也可打包為 Windows EXE。
- 多人連線能力：透過 BattleServer（SignalR）支援 LAN 與 Internet 對戰。
2. 玩法大意
CreateCombat 的操作基礎很直覺：移動、跳躍、蹲下、輕重攻擊、遠程攻擊。
在對局中，玩家不只要判斷距離與攻防時機，也要根據模式切換策略。
如果是 PvP 或 CPU 對戰，重點是回合控制、進退節奏與角色配置。
如果是 PvE，特別是雙人合作模式，重點會轉成分工與協同：誰吸引 Boss、誰處理答題窗口、何時壓進攻節奏。
而在有題目介入的情境下，答題本身也會影響血量與戰局走向。
3. 技術亮點（用玩家聽得懂的方式）
即使這是前端作品，底層仍有不少可說的設計重點：
- 固定 60 FPS 更新迴圈：讓對戰節奏穩定一致。
- 角色狀態機：角色行為有清楚狀態流轉，攻防判定更可控。
- AABB 碰撞與投射物系統：處理近戰判定、遠程飛行、互相抵銷等互動。
- 鎖步同步（線上對戰）：以輸入同步與 checksum 校驗，降低雙方狀態漂移。
- 素材與資料彈性：角色、背景、題庫都能以匯入匯出方式擴充。
這些設計不只是工程上的「做得到」，更是為了把遊戲感維持在可持續調整、可持續擴充的狀態。
4. 體驗方式
如果你想快速試玩，最直接的方法是用瀏覽器進入遊戲，先從預設角色開始。
熟悉手感後，再進一步嘗試自訂角色、調整數值、切換題庫，會更能感受到這個專案的核心樂趣。
有夥伴一起玩時，雙人模式與協力模式會是最能體現設計初衷的入口。
目前我也把它定位成一個「可持續成長」的作品：
先讓玩家用最低門檻快速上手，再逐步加入更進階的內容。
例如更完整的角色平衡、更多合作關卡、以及更容易分享的題庫機制。
這樣不論是想輕鬆玩幾場，或是想長期投入調整玩法的人，都能找到自己的樂趣。
結語
CreateCombat 對我來說，不只是「做出一款遊戲」，而是一次把想法、家庭情境、技術實驗和 AI 協作整合起來的開發旅程。
如果你對格鬥遊戲、可自訂角色，或「邊玩邊學」這種混合玩法有興趣，歡迎實際體驗並給我回饋。
你的一句建議，可能就是下一版進化的起點。
--
👉 立即體驗