🌿從過年靈感到可對戰的作品：CreateCombat 開發心得
📝 這篇文章比較像我寫給未來自己的開發備忘錄。它保留了我當時最原始的興奮、懷疑、轉念與重新定義，讓 CreateCombat 不只是功能列表，而是一段真的走過的創作過程。
前言
這篇文章想比較完整地記錄我製作 CreateCombat 的過程，也保留當時開發時最真實的感受。現在作品集裡的 CreateCombat 頁面，比較像是對外介紹產品的版本；而這篇文章，則比較像我把創作途中那些沒有被磨平的想法、猶豫與轉折，重新整理後留下來。
對我來說，CreateCombat 不只是「我做了一款遊戲」，而是一次把生活觀察、家庭情境、技術選擇與 AI 協作工具全部揉在一起的實驗。它最後長成的樣子，和我一開始腦中那個單純的格鬥遊戲念頭，已經不太一樣了。也正因為它後來長歪過、懷疑過、又被重新拉回來，我才覺得這篇心得應該被保留下來。
靈感是怎麼來的
這個專案的起點其實很生活化。
我是在 2026 年過年期間，一邊陪家人和小孩玩，一邊突然冒出「想做一款格鬥遊戲」的念頭。那種感覺不是很嚴肅的產品規劃，而是很直覺地覺得：我想做一個自己也會想玩的東西。
我本來就一直很喜歡格鬥遊戲，所以最初的想法很直接：與其再做一款只能選固定角色的作品，不如做一款可以讓玩家自己建立角色的格鬥遊戲。
這個想法背後其實也有一點我自己的不滿。現在很多格鬥遊戲角色固定，而且常常要靠 DLC 才能補齊內容；如果真的想把角色收滿，對玩家來說，成本和門檻都不低。我想做一個更自由、也更容易接近的方向。
從概念到第一份需求
有了這個念頭之後，我先把腦中的玩法雛形整理成文字，再交給 Gemini 網頁版幫我整理需求設計書。當時我輸入的方向非常明確：
- 先做純前端的簡單網頁格鬥遊戲
- 支援雙角色
- 可以打電腦，也可以本機雙人
- 使用分組鍵盤操作
- 一開始先不做連線，之後再補
回頭看，這其實是一個很典型的「先把骨架講清楚，再慢慢加細節」的起手式。它沒有很華麗，但很實用，因為它讓我在還沒真正寫很多程式之前，就先把遊戲要長成什麼樣子說清楚了。
為什麼最後選了 Canvas
接著就是技術路線的選擇。
雖然我最熟的是 .NET 生態，像 ASP.NET、WPF、Blazor 這些我都很習慣，但我很清楚這次想做的是「開網址就能玩」的體驗。這種情境下，我熟悉的工具不一定是最貼切的工具。
另一方面，Unity、Unreal 雖然都很強，但對這種小型 2D 格鬥作品來說，開發成本相對高，也容易讓整體專案變得太重。
所以我最後選了 原生 Canvas。原因其實很單純：
- 我想做一個極簡但能玩的作品
- 我想藉這個專案深度練習 JavaScript / TypeScript 核心能力
- 我希望整個遊戲入口盡可能輕量，瀏覽器打開就能跑
在 Phaser.js、Pixi.js、Vanilla Canvas 等選項裡，我最後決定直接走 Canvas API。這個選擇的代價是很多東西都要自己處理，但反過來說，也讓我真的把對戰、碰撞、角色狀態與畫面流程都摸得更清楚。
AI 協作怎麼改變了開發節奏
技術方向確定後，就是實際的開發工具。
我當時手上有 Google 的 Antigravity，也補了 GitHub Copilot 訂閱，讓整個流程能更順地跑起來。這次很明顯感受到的是，在所謂的 Vibe Coding 節奏下，專案很快就能到達「可玩」的狀態。
前期大量時間其實不是花在逐字逐行刻細節，而是花在調整需求文件、整理規格、修正提示與釐清我要的效果。換句話說，真正慢的往往不是程式本身，而是你能不能把自己想做的東西講清楚。
這也讓我更確定一件事：AI 工具不是直接取代開發，而是放大你的判斷力。如果方向模糊，它只會跟著你一起模糊；但如果方向清楚，它能讓作品非常快進入可互動、可驗證的狀態。
第一版完成後，我反而有點空虛
老實說，當第一版做出來之後，我有一段時間其實有點空虛。
因為如果只比畫面或既有知名度，市場上早就有很多成熟的格鬥經典。即使我已經做了「讓玩家自己匯入角色素材」這件事，我還是會覺得：只有這樣，好像還不夠。
這不是技術上做不到，而是我開始懷疑，這個作品真正有價值的地方到底在哪裡。如果它最後只是又一款可以互打的小遊戲，那我為什麼要花那麼多時間把它做出來？
我重新理解這款遊戲價值的時刻
後來我看著家裡小朋友互動，開始重新思考這個作品的方向。
如果它不只是一款對打遊戲，而是能讓大人小孩一起玩、一起學、一起合作，會不會更有意義？
這個問題改變了後面的設計。
首先，我把答題機制拉進戰鬥流程裡。設計想法是：鼓勵作答，答錯有代價，不作答代價更高，讓玩家願意真正參與題目互動，而不是只是把它當背景裝飾。這讓遊戲從單純對戰，變成更有互動層次的體驗。
接著，我又觀察到另一件事：傳統格鬥遊戲一定會有贏家和輸家，對大人來說那是競技，但對小朋友來說，有時候反而可能是爭執的起點。於是我加入了雙人協力打 Boss、救援人質這樣的模式，讓玩家有共同目標，而不只是互相擊敗。
在這個模式裡，我刻意讓 Boss 具有壓力感，逼玩家不能只靠一般攻防，而必須把答題與戰鬥系統一起用起來。也因為這樣，答題不再像附屬功能，而變成一種真正會影響戰局的策略。
我在意的，最後其實是「同一款遊戲能不能容納不同年齡層」
最後，我也保留了題庫彈性，讓玩家可以使用內建題庫，或匯入自訂題庫來調整難度。
這件事對我很重要，因為它讓同一款遊戲可以容納不同年齡層的使用情境：
- 大人可以放比較有挑戰性的題目
- 小孩可以用相對友善的題目
- 家庭、教學、互動活動都能依場景調整
我很在意這點，因為我不想把 CreateCombat 做成只有少數人看得懂的技術玩具。我更想讓它成為一個真的能被拿來一起玩、一起笑、一起學的作品。
回頭看，CreateCombat 最後變成了什麼
如果從結果來看，CreateCombat 最後變成了一款以 TypeScript + HTML5 Canvas 打造的 2D 格鬥遊戲，並逐步延伸出以下能力：
- 可自訂角色與素材
- 本機 PvP、CPU 對戰、PvE、錦標賽與線上對戰
- 題庫整合戰鬥機制
- 雙語介面
- BattleServer 線上同步能力
- 可往 Windows EXE 與手機版本延伸
但如果從創作角度來看，它更像是一個讓我練習如何把「一個很直覺的想法」，逐步變成「有自己的設計立場與使用情境」的專案。
這也是為什麼我想把這篇文章保留下來。產品頁會告訴你它有什麼功能，但這篇文章記錄的是：我為什麼會做它、我怎麼選擇它的方向，以及我在過程中真正開始在意的是什麼。
結語
CreateCombat 對我來說，不只是「做出一款遊戲」，而是一次把靈感、家庭情境、技術實驗與 AI 協作整合起來的開發旅程。
如果你對格鬥遊戲、可自訂角色，或「邊玩邊學」這種混合玩法有興趣，歡迎你繼續往作品頁看下去。那一頁會更完整地整理模式、功能與整體定位；而這一篇，比較像是我把當時的心情與思路，誠實地留給之後的自己，也留給同樣在做東西的人。