---
name: rpg_quiz_battle_game
description: 當使用者說出「製作RPG答題遊戲」、「回合制RPG戰鬥」、「答題對決遊戲」、「RPG遊戲學習網頁」、「RPG戰鬥」、「答題對決」、「RPG遊戲」、「教材RPG化」、「題庫變RPG遊戲」、「做答題對決網頁」或相關關鍵字時觸發。此 Skill 指引 AI 將任何學科教材或題庫，製作成具備專屬主題生圖（主角、NPC、戰場背景）、雙人對峙戰場、Sprite 幀動畫（待機/衝刺/受傷）、打擊感跳字、蓄力大絕招與養成數值系統的原生單一 HTML 網頁遊戲。
---

# 回合制 RPG 答題戰鬥遊戲製作指南 (Turn-based RPG Quiz Battle Generator)

本 Skill 為**全域專屬 Skill**（安裝於 `~/.gemini/config/skills/rpg_quiz_battle_game/`），適用於所有工作區與任何學科專案。當老師提供教材、題庫、或者給定特定教學主題，並說出「製作RPG答題遊戲」、「回合制RPG戰鬥」、「答題對決遊戲」等關鍵字時，AI 應扮演專屬遊戲引擎，自動為該主題**生成原創主角、NPC 怪獸與戰場背景圖片**，並產出具備**真實網頁遊戲感（雙人對峙擂台、精靈圖幀動作、受擊抖動突進、浮動跳字、大招釋放、大廳養成）**的原生互動網頁。

---

## 1. 觸發關鍵字與風格選擇機制

### 觸發關鍵字清單
只要使用者的提示詞中包含以下任何詞彙（或組合），即自動啟動本工作流：
- **完整組合詞**：「製作RPG答題遊戲」、「回合制RPG戰鬥」、「答題對決遊戲」、「RPG遊戲學習網頁」
- **簡短口語型**：「RPG戰鬥」、「答題對決」、「RPG遊戲」
- **教學情境型**：「教材RPG化」、「題庫變RPG遊戲」、「做答題對決網頁」

### 主動確認風格選項
當觸發動工前，若使用者未指定特定美術世界觀，AI 應先提供包含但不限於以下風格選項供老師挑選：
1. **靈活適應（推薦預設）**：根據教材主題自動匹配（如：國語文/文史配東方修仙水墨、英文/數學配奇幻勇者冒險）。
2. **新中式修仙玄幻**：深墨藍夜色、修仙水墨金光、靈台洞府、文魄、內力蓄力、境界稱號（練氣/築基/金丹/元嬰）。
3. **經典日系像素／奇幻勇者**：冒險者公會、勇者鬥惡龍、劍與魔法、金幣、魔力值（MP）、城堡與地牢。
4. **未來科技／賽博龐克 (Cyberpunk)**：霓虹電路、終端機解碼、駭客對決、超頻蓄能、晶片強化。
5. **使用者自訂主題**：由老師自由指定世界觀與角色設定。

---

## 2. 核心生圖工作流（主角、NPC、戰場背景自動生成）

為確保每一款遊戲都有專屬、精美且符合學科情境的視覺呈現，AI 在製作遊戲時**必須調用 `generate_image` 工具生成對應主題的原創圖像素材**，並妥善安置於工作區的 `output/assets/images/` 目錄：

### 🎨 必備生成圖片清單

| 角色／素材 | 用途 | 推薦比例 (AspectRatio) | 命名建議 (ImageName) | 提示詞設計要點 |
| :--- | :--- | :--- | :--- | :--- |
| 🧑 **主角 (Hero)** | 戰場左側戰士、洞府立繪 | `1:1` | `hero_battle_sprite` | 全身或七分身戰鬥立繪、純白/透明乾淨背景、動態持武姿勢、契合主題服飾（如墨色修仙道袍手持毛筆、或勇者戰甲手持巨劍），強調無多餘雜物背景便於網頁呈現。 |
| 👹 **NPC／怪物 (NPC / Boss)** | 戰場右側敵方魔物、守關者 | `1:1` | `monster_boss_sprite` | 契合教材題旨的怪獸或對手（如錯音蝙蝠妖、幾何維度怪獸、文法失序龍），兇悍或具辨識度，面朝左方或正面，純淨背景。 |
| 🌄 **戰鬥背景 (Battle Arena)** | 戰鬥擂台頂部橫幅、對決場景 | `16:9` | `battle_arena_bg` | 橫向開闊對決擂台、深邃氛圍（如仙山雲海石台、古代竹林書院、魔幻地牢遺跡、賽博光影競技場），**畫面中不包含任何人物**，僅保留宏偉景深。 |
| 🏯 **大廳／基地背景 (Hub / Home)** | 首頁總覽、修煉悟道背景 | `16:9`（可選） | `hub_home_bg` | 靈台洞府、冒險者酒館或太空艦橋等修整場所，溫暖、安寧或具修煉靜謐感。 |

### 🛠️ 生圖操作 SOP 與注意事項
1. **呼叫工具**：使用 `generate_image` 分別產出主角、怪獸與戰鬥背景。
2. **檔案存檔**：生圖完成後，一律使用工具將產出圖片複製或移動至當前工作區的 `output/assets/images/`。
3. **網頁整合**：在 HTML/CSS 中以相對路徑引用（例如 `./assets/images/hero_battle_sprite.png`），或以高質感圓形/剪影卡片封裝。
4. **破圖防禦機制（Graceful Fallback）**：
   - 在圖片加載中或若離線無法存取時，CSS 必須備有兜底漸層色彩與 Emoji/SVG 圖標，確保任何情況下頁面皆保持美觀且不破版。

---

## 3. 開發規範與檔案交付原則

依據奕鈞老師專屬開發規則，必須嚴格遵守：
1. **直接建立實體檔案**：一律使用寫入工具產出實體單一檔案（如 `output/index.html`），**嚴禁只在對話框輸出大段程式碼讓老師自己複製**。
2. **檔案集中於 `output/`**：新產出的 HTML 或相關靜態資源統一置於工作區的 `output` 資料夾（如 `output/index.html`、`output/assets/images/`）。
3. **零外部框架依賴（雙擊即玩）**：
   - 採用最乾淨的原生 HTML5 + CSS3 + Vanilla JavaScript。
   - 避免使用 React/Vue 等需要 Node.js 或 Vite 編譯的依賴，確保產出的檔案在任何電腦、平板的瀏覽器**點兩下就能直接順暢遊玩**。
4. **全響應式設計（RWD）**：優先支援手機直式單手操作，同時在平板與桌上型電腦皆能置中並維持極佳的視覺比例。

---

## 4. 遊戲架構 5 大核心模組

### 模組一：雙人對峙真實戰鬥擂台 (Battle Arena)
- **視覺配置**：
  - 頂部背景圖（採用自動生成的 `battle_arena_bg`）。
  - **左側玩家戰士** vs **右側敵方怪獸**，雙方腳底具備橢圓半透明陰影（`shadow-dock`）。
  - 雙方頭頂均有懸浮狀態氣泡（角色名、立體 HP 血條、即時數值百分比）。
  - 中間上方常駐關卡名稱與當前波次。

### 模組二：Sprite Sheet 精靈圖幀動畫引擎 (Animation Controller)
遊戲具備靈魂的關鍵在於角色**不是靜態死板的圖片**，而是具備連續幀動畫：
- **4×4 動作矩陣規範**：
  - **Row 0（待機 Idle）**：角色呼吸、起伏微動，定時器每 160~180ms 自動輪播 Col 0~3。
  - **Row 1（普攻 Attack）**：向前揮擊或法術前搖。
  - **Row 2（技能 Skill）**：蓄力爆發大絕招動作。
  - **Row 3（受傷 Hurt）**：受擊硬直、痛楚與劇烈後退。
- **輕量 CSS 視窗偏移切圖**：
  ```css
  .sprite-sheet {
    position: relative;
    overflow: hidden;
    image-rendering: pixelated;
  }
  .sprite-sheet > img {
    position: absolute;
    top: calc(-100% * var(--sprite-row, 0));
    left: calc(-100% * var(--sprite-col, 0));
    width: calc(100% * 4);
    height: calc(100% * 4);
  }
  ```

### 模組三：戰鬥打擊回饋與動態演出 (Game Feel)
- **答對時**：
  1. 玩家容器加上 `.dash` 向右突進衝刺（`transform: translateX(45px)`），切換為攻擊動作（Row 1）。
  2. 命中瞬間播放音效，怪獸加上 `.hurt` 產生劇烈左右震動（`hitShake`）與泛紅高光，切換為受傷動作（Row 3）。
  3. 怪獸頭頂彈出**浮動傷害跳字**（如 `-85`），累積 Combo 連擊數。
  4. 玩家內力／能量條蓄積（每題 +35%）。
- **答錯時**：
  1. 怪獸向左撲擊突進，玩家受傷震動並扣除 HP，彈出反噬傷害跳字。
  2. 連擊數中斷歸零。
  3. 下方立即展開**【名師解題秘笈】**詳細解析，輔助學生即時訂正觀念。
- **施放滿能量大招（Ultimate Skill）**：
  - 當內力累積達 100%，大絕招按鈕發光呼吸跳動。
  - 點擊後玩家切換為施法動作（Row 2），觸發大招合成音效，對怪獸造成 2.5~3 倍毀滅性傷害，並回復玩家部分氣血。

### 模組四：原生免外部音檔音效 (Web Audio API)
為避免因外連 MP3/OGG 檔案失效或 CORS 跨域失敗導致遊戲無聲，一律使用瀏覽器原生 `AudioContext` 動態合成音頻：
```javascript
const AudioFX = {
  ctx: null,
  init() {
    if (!this.ctx) this.ctx = new (window.AudioContext || window.webkitAudioContext)();
    if (this.ctx.state === 'suspended') this.ctx.resume();
  },
  hit() {
    this.init();
    const t = this.ctx.currentTime, osc = this.ctx.createOscillator(), g = this.ctx.createGain();
    osc.type = 'triangle';
    osc.frequency.setValueAtTime(160, t);
    osc.frequency.exponentialRampToValueAtTime(30, t + 0.15);
    g.gain.setValueAtTime(0.4, t);
    g.gain.linearRampToValueAtTime(0.01, t + 0.15);
    osc.connect(g); g.connect(this.ctx.destination);
    osc.start(); osc.stop(t + 0.16);
  },
  correct() {
    this.init();
    const t = this.ctx.currentTime;
    [523.25, 659.25, 783.99].forEach((f, i) => {
      const osc = this.ctx.createOscillator(), g = this.ctx.createGain();
      osc.type = 'sine';
      osc.frequency.setValueAtTime(f, t + i * 0.06);
      g.gain.setValueAtTime(0.2, t + i * 0.06);
      g.gain.exponentialRampToValueAtTime(0.001, t + i * 0.06 + 0.2);
      osc.connect(g); g.connect(this.ctx.destination);
      osc.start(t + i * 0.06); osc.stop(t + i * 0.06 + 0.22);
    });
  },
  wrong() {
    this.init();
    const t = this.ctx.currentTime, osc = this.ctx.createOscillator(), g = this.ctx.createGain();
    osc.type = 'sawtooth';
    osc.frequency.setValueAtTime(140, t);
    osc.frequency.linearRampToValueAtTime(80, t + 0.25);
    g.gain.setValueAtTime(0.3, t);
    g.gain.linearRampToValueAtTime(0.01, t + 0.25);
    osc.connect(g); g.connect(this.ctx.destination);
    osc.start(); osc.stop(t + 0.26);
  },
  burst() {
    this.init();
    const t = this.ctx.currentTime, osc = this.ctx.createOscillator(), g = this.ctx.createGain();
    osc.type = 'square';
    osc.frequency.setValueAtTime(220, t);
    osc.frequency.exponentialRampToValueAtTime(880, t + 0.35);
    g.gain.setValueAtTime(0.35, t);
    g.gain.linearRampToValueAtTime(0.01, t + 0.4);
    osc.connect(g); g.connect(this.ctx.destination);
    osc.start(); osc.stop(t + 0.42);
  }
};
```

### 模組五：養成數值與本機存檔 (RPG Progression)
- **資源獎勵**：每次討伐成功獲得資源貨幣（如：文魄、金幣）。
- **基地／洞府修煉**：可消耗資源強化「氣血上限 (HP)」、「基礎攻擊力 (ATK)」或「護體防禦 (DEF)」。
- **境界升級**：隨通關數升等，稱號晉級（例如：練氣 → 築基 → 金丹 → 元嬰）。
- **進度保存**：使用 `localStorage` 自動保存玩家四維數值與關卡進度，並提供「重置存檔」按鈕。

---

## 5. 題庫格式規範 (Question Bank Schema)

每次製作時，將教學內容整合為標準化結構：
```javascript
const QUESTION_BANK = [
  {
    category: "分類標籤",        // 例如：注音辨析、形近字、單字文法、電路概念
    prompt: "題目題幹內容？",     // 支援引號標註
    options: ["選項A", "選項B", "選項C", "選項D"],
    answerIndex: 0,              // 正確答案索引 (0~3)
    explanation: "詳細的觀念解析指引，說明為何正確，以及其他干擾項的謬誤。"
  }
];
```

---

## 6. 執行標準檢核表 (Checklist)

產出網頁前，AI 必須自我檢查是否符合以下全部條件：
- [ ] 是否已調用 `generate_image` 為該主題生成**主角 (Hero)**、**怪獸 (NPC/Boss)** 與 **戰鬥背景 (Battle Arena)**？
- [ ] 產出的圖片是否已妥善儲存至工作區 `output/assets/images/`？
- [ ] 檔案是否已直接寫入 `output/index.html`（或指定路徑）？
- [ ] 是否完全不需要 `npm install` 或 build 工具，雙擊直接能在瀏覽器運作？
- [ ] 戰鬥畫面是否為「雙人對峙擂台」，具備站位、影子、角色與怪獸？
- [ ] 角色與怪物是否具備待機呼吸（Idle）連續幀動畫？
- [ ] 答對/答錯時是否有向前衝刺（dash）、受傷抖動（hurt）、傷害跳字等完整打擊演出？
- [ ] 答錯時是否會展開「名師解題秘笈」詳細解析？
- [ ] 是否具備能量蓄積大招按鈕（達到 100% 亮起釋放爆發傷害）？
- [ ] 是否具備通關獲得貨幣、在基地/洞府強化屬性升等的完整 RPG 循環？
- [ ] 是否具備 Web Audio API 原生音效合成？
- [ ] 是否支援手機與電腦全響應式（RWD）？