錢財冒險：理財智慧挑戰(會產生繪圖版本)

日期：

遊戲說明

  • 遊戲名稱：錢財冒險：理財智慧挑戰

  • 遊戲背景：
    玩家進入一個充滿奇幻與挑戰的理財世界，透過與不同的「魔王」對戰（預算魔王、儲蓄魔王、投資魔王），回答理財知識題目以獲取經驗值、金幣與升級。遊戲以答題與戰鬥相結合，透過回答正確，玩家對魔王造成傷害；回答錯誤則會受到魔王反擊，體現出學習理財知識的重要性。

  • 核心流程：

    1. 標題畫面與玩家名稱輸入：玩家輸入名字後開始冒險。
    2. 城鎮畫面：顯示玩家狀態（等級、生命、攻擊、防禦、金幣、經驗）及可進行的活動（挑戰魔王、進入商店、休息）。
    3. 敵人選擇與戰鬥：玩家選擇要挑戰的魔王，進入戰鬥畫面。
    4. 提問理財問題：在戰鬥過程中，魔王會隨機提出題目，並搭配生成的插圖（透過 pollinations.ai API）。
    5. 回答與反饋：回答正確時，玩家造成傷害；回答錯誤則受損，並會顯示正確答案與解釋。
    6. 戰鬥結果與城鎮切換：若擊敗魔王，玩家獲得金幣與經驗；若被打敗則返回城鎮並以部分生命值復活。
    7. 商店與休息功能：玩家可用金幣購買道具提升能力，或支付金幣休息恢復生命值。

  • 插圖功能：
    每次進入理財問題畫面時，系統會根據題目描述自動生成一幅插圖，讓學習氛圍更加生動有趣。

程式設計重點

  1. 模組化設計

    • 角色類別（Character）：作為基礎類別，定義攻擊、生命值恢復等共通方法。
    • 玩家類別（Player）：繼承自角色，新增升級、購買物品、獲得經驗和金幣等功能。
    • 敵人類別（Enemy）：同樣繼承自角色，並加入題庫管理（questions、remainingQuestions、answeredQuestions），以便在對戰時隨機抽題並記錄已回答的題目。
    • 物品類別（Item）：定義商店中可購買的道具，並根據不同屬性影響玩家能力。

  2. 遊戲控制器（GameController）

    • 集中管理遊戲狀態、場景切換與互動流程。
    • 包含初始化敵人與物品、開始戰鬥、提問與回答問題、檢查戰鬥結果、更新戰鬥日誌等功能。
    • 設計邏輯上分離各個功能區段，方便維護與擴充。

  3. 題庫管理與狀態記錄

    • 每位魔王擁有自己的題庫，並透過 remainingQuestions 與 answeredQuestions 管理題目狀態。
    • 當所有題目均回答過後，系統自動重設題庫，確保遊戲持續運作。

  4. 插圖生成功能

    • 在 showQuestionScreen() 中，根據題目內容產生一個圖片生成描述（prompt），並使用 pollinations.ai API（改用 image.pollinations.ai 並加入 ?nologo=true 參數）取得圖片 URL。
    • 將生成的圖片直接嵌入題目畫面，增加互動性與視覺效果。

  5. 使用者介面與事件處理

    • 利用 JavaScript 操作 DOM，根據遊戲狀態動態更新畫面（例如：標題畫面、城鎮畫面、敵人選擇、戰鬥畫面、提問畫面、結果畫面與商店畫面）。
    • 為各個互動元素（按鈕、選項）添加事件監聽，實現點擊後相應的邏輯流程切換。

  6. 視覺設計與響應式布局

    • CSS 部分針對各畫面元件設計了統一風格與版面排版，並使用媒體查詢確保手機版呈現良好。


錢財冒險：理財智慧挑戰
載入中...
魔王正在進食，很快就會出來...

錢財冒險：理財智慧挑戰