bebechien/AIventure

# AIventure 一款基于 [Phaser 3](https://phaser.io/) 和 [Angular](https://angular.io/) 构建的 2D 网格冒险游戏。 ## 概述 AIventure 是一款俯视角探索游戏，玩家在其中探索网格世界，与各种物体互动，并探索不同的房间。该项目演示了如何将 Phaser 游戏实例集成到 Angular 应用中，并处理框架之间的通信。 ## 功能 * **Angular 集成：** 将游戏场景无缝嵌入到 Angular 组件中。 * **Phaser 3 渲染器：** 优化的 2D 像素风艺术渲染。 * **解耦架构：** 核心游戏逻辑（实体、网格、物理）与渲染代码完全分离，位于 `src/game/core/` 目录下。 * **数据驱动的世界：** 游戏关卡、类别和行为均从外部 JSON 数据（`WorldData`）中加载。 * **基于网格的移动：** 精确的基于图块的玩家移动和碰撞检测。 * **Zelda 风格相机：** 摄像机在屏幕大小的房间之间切换。 * **互动对象：** 支持阻挡物、聊天互动以及外部链接。 * **智能 NPC：** 能够自主巡逻、跟随玩家或执行 AI 驱动命令的自主导航角色。 * **双重 AI 集成：** 由 **Google Gemini** 和 **Gemma** 强力驱动，实现复杂的 NPC 对话和动态解谜逻辑。 ## Angular 中的 UI UI 分为 3 个主要部分： * **左侧面板：** 包含 "AIventure" 标题和一个用于显示游戏消息的聊天界面。 * **中间面板：** 页面居中的容器，用于承载当前活跃的游戏实例（Phaser）。 * **右侧面板：** 提供带有评论、代码、iFrame 和日志选项卡的标签界面。 ## 项目结构 * `src/app/`：包含 Angular 应用逻辑。 * `components/`：UI 组件（聊天、面板、弹窗）。 * `phaser-game.component.ts`：游戏视图的主要包装组件。 * `app.component.ts`：主应用调度器。 * `src/game/`：包含游戏引擎代码。 * `core/`：**与渲染无关的逻辑**。 * `WorldData.ts`：处理游戏配置的加载与解析。 * `GridManager.ts`：管理游戏网格和碰撞。 * `Player.ts`、`NPC.ts`、`MovableObject.ts`：纯逻辑实体。 * `BaseWorldBuilder.ts`、`BaseLevelManager.ts`：用于世界生成和关卡管理的基类。 * `InteractionSystem.ts`：处理高层级的游戏交互。 * `trigger/`：**基于规则的触发系统**。 * `TriggerSystem.ts`：核心处理引擎。 * `PuzzleRules.ts`：游戏规则配置。 * `actions/`：动作实现。 * `EventBus.ts`：中央通信枢纽。 * `phaser/`：**Phaser 3 实现**。 * `scenes/`：Phaser 场景（Boot、Preloader、Game）。 * `WorldBuilder.ts`、`LevelManager.ts`：继承自核心基类的 Phaser 特定实现。 ## 开发 ### 前置条件 * 已安装 Node.js 和 npm。 ### 配置 Python LLM 服务 请按照 Python LLM 服务文件夹中的 README 说明进行操作： `python-llm-service/README.md` ### 安装 ``` npm install ``` ### 配置模型后端 #### 本地托管的 Gemma 4 在 `src/app/app.config.ts` 中，取消注释 `LmStudioService` 并注释掉所有其他服务。 确保你的 `python-llm-service` 本地服务器正在运行： ``` cd python-llm-service python -m python_llm_service ``` #### Gemini 在 `src/app/app.config.ts` 中，取消注释 `GeminiService` 并注释掉所有其他服务。 确保你的 API key 已在环境变量中设置： ``` export GEMINI_API_KEY="your-api-key" ``` ### 运行开发服务器 运行 `ng serve` 启动开发服务器。在浏览器中访问 `http://localhost:4200/`。如果你更改了任何源文件，应用程序将自动重新加载。 ``` npm run dev ``` ### 构建 运行 `ng build` 来构建项目。构建产物将存储在 `dist/` 目录中。 ``` npm run build ``` ### 雪碧图包版权 / 致谢 本项目中的部分雪碧图获得了 Oryx Design Lab 的 Wee Fantasy 雪碧图包的许可：https://www.oryxdesignlab.com/products/p/wee-fantasy 以下雪碧图来自 Oryx Design Lab，未作任何修改： - public/asssets/gamedata/8b7184c09a3cb22e00aa0bcd7ec8d4f3 - public/asssets/gamedata/11d3f592d3ff0991b0e4d3db7a8adebe - public/asssets/gamedata/b0873eff9ce99b80e42e5a20c402e089 - public/asssets/gamedata/a951de827675a34a0009b6e49022a51c - public/asssets/gamedata/187559f92ec289ff41b415a3e1ef400a - public/asssets/gamedata/d7d88f56f462752fb26411f92b04b3f0 - public/asssets/gamedata/d80ea02d00d191411567c3016f946145 - public/asssets/gamedata/f275e398f417046bf856d20c5715172d - public/asssets/gamedata/f5f6093ff99e272b1164c3b1e31e3563 以下雪碧图基于 Oryx Design Lab 的雪碧图进行了修改，其修改内容的版权归 Google LLC 所有： - public/favicon.png - public/assets/player-1.png - public/assets/player-2.png 所有其他雪碧图均归 Google LLC 所有。 雪碧图包的完整许可详情：https://www.oryxdesignlab.com/license ## 附加信息 此应用并非官方支持的 Google 产品。

标签：2D游戏, AI NPC, Angular, Gemini, Gemma, Grype, Phaser 3, 自动化攻击, 逆向工具