生化危机 · 基于 LLM 的交互式叙述游戏（H5）

以生化危机为背景的 H5 互动叙事游戏，故事走向由 AI 根据你的选择推进，支持固定选项与自定义输入、章节制、回溯与存档。

功能概览

• 玩法：支持经典生化危机模式，也支持输入任意世界背景后直接开局的自定义模式。AI 叙述剧情并给出选项，可点击选项或输入自定义行动；章节模式（约 10 分钟/章），章节间通过摘要传递状态；单章内可回溯到任意回合；支持存档与读档（本地）。
• 体验：生化危机风格界面、数值展示（生命/弹药/物品）、区域地图与当前/可见区域高亮、多风格 BGM 随剧情切换。
• 场景生图：玩家可按需让 AI 从当前叙事提炼英文生图 Prompt，并调用 xAI Grok Imagine 生成当前场景画面。

技术栈

• 前端：Vue 3 + Vite，响应式布局，适配移动端与桌面。
• 后端：Node.js + Express，代理调用 OpenAI 兼容 API，解析为结构化 JSON 返回。

环境要求

• Node.js 18+
• 可用的 OpenAI 或兼容接口的 API Key（如 OpenAI、Azure、国内中转等）

快速开始

1. 安装依赖

# 根目录
npm install

# 后端
cd backend && npm install

# 前端
cd frontend && npm install

2. 配置后端 API Key

在 backend 目录下复制环境变量示例并填写：

cd backend
cp .env.example .env

编辑 backend/.env。使用 DeepSeek API 时配置示例：

OPENAI_API_KEY=你的DeepSeek_API_Key
OPENAI_BASE_URL=https://api.deepseek.com/v1
OPENAI_MODEL=deepseek-chat

# 场景生图使用你的第三方 OpenAI 兼容 Grok 接口
GROK_API_KEY=你的第三方_Grok_API_Key
GROK_BASE_URL=https://你的第三方接口地址/v1
GROK_IMAGE_MODEL=第三方提供的生图模型_ID

（DeepSeek 兼容 OpenAI 接口，无需改代码；可选模型还有 deepseek-reasoner。本后端已启用 DeepSeek 的 JSON Output（response_format: { type: 'json_object' }），若使用其他厂商 API 且不支持该参数，需在代码中移除 response_format。）

使用 OpenAI 官方或其它兼容接口时，修改 OPENAI_BASE_URL 和 OPENAI_MODEL 即可。

若出现连接超时（ETIMEDOUT）：直连 api.openai.com 在国内往往不可用，请务必在 .env 中设置 OPENAI_BASE_URL 为可用的代理或国内兼容接口（例如各类 OpenAI API 中转服务），并确保该地址可在本机访问。可选增加 REQUEST_TIMEOUT_MS=60000 调整请求超时时间（毫秒）。

3. 启动开发环境

在项目根目录执行（会同时启动后端与前端）：

npm run dev

或分别启动：

# 终端 1：后端 http://localhost:3000
cd backend && npm run dev

# 终端 2：前端 http://localhost:5173（已代理 /api 到后端）
cd frontend && npm run dev

浏览器访问 **http://localhost:5173**。选择「经典模式」可进入原有故事；选择「自定义模式」，输入至少 20 个字的世界背景即可由 AI 创建开场。进入游戏后可点击「生成当前场景」调用 Grok 生图。

4. 生产构建与运行

# 构建前端
npm run build

# 将 frontend/dist 部署到任意静态服务器；后端单独部署并配置 CORS 与前端域名
cd backend && npm run start

前端需能访问到后端的 /api/chat 与 /api/generate-scene-image。若前后端同域，无需改代码；若跨域，需在后端配置 CORS 允许前端域名。

5. 部署到 Zeabur

本项目可按单服务部署到 Zeabur：构建前端后由后端托管静态资源，API 与页面同域。

1. 推送代码到 GitHub，确保仓库包含根目录的 zbpack.json、package.json 以及 backend/、frontend/。
2. 在 Zeabur 中：新建项目 → 从 GitHub 导入该仓库 → 选择根目录作为服务目录，Zeabur 会读取 zbpack.json 的构建/启动命令。
3. 环境变量：在 Zeabur 服务设置里添加：
   • OPENAI_API_KEY：你的 API Key（必填）
   • OPENAI_BASE_URL：如 DeepSeek 填 https://api.deepseek.com/v1
   • OPENAI_MODEL：如 deepseek-chat
   • GROK_API_KEY：第三方 Grok 接口 Key；若与剧情接口共用 Key，也可省略并复用 OPENAI_API_KEY
   • GROK_BASE_URL：第三方 OpenAI 兼容 base URL，通常以 /v1 结尾
   • GROK_IMAGE_MODEL：第三方实际提供的生图模型 ID
   • GROK_IMAGE_RESPONSE_FORMAT：默认 url；若网关只支持 Base64，可设为 b64_json
   • GROK_IMAGE_SIZE / GROK_IMAGE_ASPECT_RATIO：仅在第三方文档明确支持时配置，默认不会发送
   • NODE_ENV：填 production（用于开启静态托管）
4. 部署：构建会执行 npm run build:zeabur（安装依赖并构建前端），启动为 npm run start:zeabur（运行后端并托管前端）。部署完成后用 Zeabur 提供的域名访问即可。

注意：Zeabur 上不要提交 backend/.env，敏感信息一律用 Zeabur 控制台的环境变量配置。

项目结构

LLM_story/
├── backend/           # 后端服务
│   ├── index.js       # Express + LLM 代理 + 系统提示词
│   ├── .env.example
│   └── package.json
├── frontend/          # 前端 H5 应用
│   ├── src/
│   │   ├── App.vue    # 主逻辑：对话、存档、回溯、章节
│   │   ├── components/
│   │   │   ├── GameNarrative.vue  # 叙述框 + 选项 + 自定义输入
│   │   │   ├── GameStats.vue      # 生命/弹药/物品
│   │   │   ├── GameMap.vue        # 区域与当前/可见高亮
│   │   │   └── GameBgm.vue        # BGM 按情绪标签切换
│   │   ├── main.js
│   │   └── style.css
│   ├── index.html
│   ├── vite.config.js # 开发时 /api 代理到后端
│   └── package.json
├── 需求文档.md
├── package.json       # 根脚本：npm run dev 同时起前后端
└── README.md

说明与限制

• 存档：仅保存在浏览器本地（localStorage），不支持跨设备同步；清除站点数据会丢失存档。
• 回溯：仅限当前章节内；回溯后再次推进会基于该回合上下文重新请求 AI。
• 地图：当前为占位区域列表，与 AI 返回的 area_id / visible_areas 对应；如需真实地图图，可在 GameMap.vue 中替换为预置图片或 SVG，并按区域 ID 高亮。
• BGM：将 MP3/OGG 放入 frontend/public/audio/，文件名对应情绪：calm.mp3、tense.mp3、mystery.mp3、action.mp3、sad.mp3。详见 frontend/public/audio/README.md；开关在页面左上角。

更多设计细节见 需求文档.md。