歡迎來到第十天！在前幾天完成了整體架構規劃與大廳介面建置後，今天我們要正式進入第一款小遊戲「青花瓷靈獸探尋」的核心程式碼實作！

這款遊戲最吸引人的地方，莫過於在藍白青花瓷的水墨世界中與「豆花怪」遭遇、進行回合制交鋒，並在關鍵時刻拋出道具進行抓捕。

1. 戰鬥狀態機（Battle State Machine）腳本架構

在 Cocos Creator 中，我們建立了 BattleManager.ts 腳本來掌管整個戰鬥流程。回合制遊戲最適合用**狀態機（State Machine）**來維護，我們定義了四個核心狀態：

• INIT：遭遇豆花怪、登場動畫與載入怪物屬性。
• PLAYER_TURN：玩家選擇行動（普通攻擊、使用特殊糖漿道具、進行抓捕）。
• MONSTER_TURN：豆花怪進行反擊或觸發特殊技能。
• RESULT：判斷抓捕成功、戰敗或逃跑結算。

透過 Vibe Coding，我向 Cursor 下達指令：

「請幫我在 Cocos Creator TypeScript 中建立一個 BattleManager 類別，使用 Enum 管理戰鬥狀態，並提供 changeState 狀態轉移與事件發射（EventTarget）機制。」

AI 在幾秒鐘內就生成出了乾淨、模組化的 TypeScript 程式碼，完全不需要我自己從頭寫複雜的事件傳遞邏輯。

2. 抓捕機率演算法（Capture Probability Algorithm）

抓捕體驗是遊戲好玩與否的靈魂。如果隨手就能抓到會缺乏成就感，但如果太難抓又會讓玩家產生挫折感。我們設計的動態機率公式如下：

\[\text{抓捕成功率} = \frac{\text{基礎抓捕率} \times \text{道具加成係數}}{\left( \frac{\text{豆花怪當前血量}}{\text{豆花怪最大血量}} \right)}\]

這意味著豆花怪的血量越低（如殘血 10%），抓捕成功率就會呈倍數暴增！

在寫碼實作時，我讓 AI 生成對應的判斷函式：

public tryCapture(monster: DouhuaMonster, item: CaptureItem): boolean {
    const hpRatio = Math.max(monster.currentHp / monster.maxHp, 0.05); // 避免除以零，最低設定5%血量比例
    const captureChance = (item.baseRate * item.multiplier) / hpRatio;
    const roll = Math.random(); // 產生 0.0 ~ 1.0 的隨機數
    
    return roll <= captureChance;
}

AI 不僅寫出了精準的浮點數演算法，還貼心加上了 Math.max 防呆，防止怪物血量為 0 時發生除以零的例外錯誤。

3. Tween 動畫與抓捕回饋銜接

當玩家點擊抓捕時，畫面回饋至關重要。我們運用 Cocos Creator 的 tween 動畫系統：

• 抓捕中：青花瓷蓋子降下，將豆花怪罩住並進行三次搖晃。
• 抓捕成功：跳出亮藍色的青花瓷蓋印章動畫，顯示「成功捕獲！已加入圖鑑」，並調用 API 回傳後端。
• 抓捕失敗：蓋子炸開，豆花怪跳出並進入震動逃跑狀態。

這些繁瑣的 UI 動畫序列（Sequence），在過去手寫需要算時間軸與 callback，如今透過 Cursor 輔助，只要描述「先縮放、搖晃三次、再判斷結果」，幾行 cc.tween(this.node) 就輕鬆搞定。

小結

今天我們成功在 Cocos Creator 中實現了豆花怪戰鬥與抓捕的核心邏輯！從數學公式到狀態機，Vibe Coding 讓原本需要耗費一兩天調效的回合制戰鬥，在短短一小時內就落地成流暢的可玩原型。

明天（Day 11），我們將繼續進行第二款小遊戲——「雪花冰機甜點時間挑戰」的寫碼實戰與極速計時器實作！