# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Google Gemma (@googlegemma) · 平台：X (Twitter) · 日期：2026-05-27

> 原始來源：https://x.com/googlegemma/status/2059343174112522532

## 中文摘要

AIventure 開源遊戲助開發者學習 AI Agent。

**核心概念與目標**
「AIventure」不僅是一款採用 [Phaser 3](https://phaser.io/) 與 [Angular](https://angular.io/) 開發的頂視角探索遊戲，更是一個教學專案。它展示了如何將 AI 整合至遊戲流程中，讓開發者能實作 Agent 程式開發工作流，例如透過提示詞（Prompt）引導 NPC 即時生成網頁應用程式，體驗所謂的「vibe-coding」開發模式。

**技術架構與整合**
該專案強調架構的解耦，將核心遊戲邏輯與渲染層分離，確保系統具備高度擴充性：
- 渲染與邏輯分離：核心邏輯（如實體、網格、物理運算）位於 `` `src/game/core/` ``，與渲染程式碼完全脫鉤。
- 框架互動：透過 Angular 組件無縫嵌入 Phaser 遊戲場景，並由 Angular 負責 UI 介面（包含聊天視窗、程式碼檢視與日誌）。
- 資料驅動：遊戲關卡、類別與行為均透過外部 JSON 檔案（`WorldData`）載入，實現靈活的關卡設計。
- AI 驅動：整合 Google Gemini 與 Gemma，用於驅動 NPC 對話及動態解謎邏輯。

**開發與部署指南**
開發者可透過以下步驟進行環境建置與模型配置：
1. 安裝依賴：
   ```bash
   npm install
   ```
2. 設定模型後端：
   - 若使用本地端 Gemma 4，請在 `` `src/app/app.config.ts` `` 中取消 `LmStudioService` 的註解，並執行 Python 服務：
     ```bash
     cd python-llm-service
     python -m python_llm_service
     ```
   - 若使用 Gemini，請在 `` `src/app/app.config.ts` `` 中啟用 `GeminiService`，並設定環境變數：
     ```bash
     export GEMINI_API_KEY="your-api-key"
     ```
3. 啟動開發伺服器：
   ```bash
   npm run dev
   ```
   完成後即可透過 [http://localhost:4200/](http://localhost:4200/) 存取遊戲。

**專案結構說明**
專案主要分為兩個核心目錄：
- `` `src/app/` ``：包含 Angular 應用程式邏輯，如 UI 組件與遊戲視窗包裝器（`` `phaser-game.component.ts` ``）。
- `` `src/game/` ``：包含遊戲引擎核心，分為 `` `core/` ``（與渲染無關的邏輯）與 `` `phaser/` ``（Phaser 3 具體實作）。其中，`` `core/trigger/` `` 目錄下的 `` `TriggerSystem.ts` `` 與 `` `PuzzleRules.ts` `` 構成了規則驅動的觸發系統。

**授權與注意事項**
本專案部分素材採用 [Oryx Design Lab](https://www.oryxdesignlab.com/products/p/wee-fantasy) 的 Wee Fantasy 資源包，並遵循其授權規範。需特別留意的是，此應用程式並非 Google 官方支援的產品。詳細的開發解決方案與程式碼庫可參閱 [AIventure GitHub 儲存庫](https://github.com/bebechien/AIventure)。

## 標籤

Agent, 開源專案, 教學資源, AIventure, Phaser, Angular