龙与地下城：暗影冒险

一款沉浸式 D&D 5e 暗黑奇幻角色扮演 PWA 应用，可在移动设备上安装使用。

✨ 特性

🎮 游戏功能

• 完整的角色创建系统：种族、子种族、性别、姓名、属性、背景、职业、起始地点
• 属性分配：支持掷骰（4d6取高3）和点数购买两种模式
• 回合制战斗系统：攻击、施法、闪避、防御、逃跑
• 骰子系统：支持 d4/d6/d8/d10/d12/d20，优势/劣势掷骰
• 存档管理：自动存档 + 手动存档，多存档槽位

📱 PWA 特性

• 可安装：支持 Android/iOS 设备"添加到主屏幕"
• 离线运行：Service Worker 缓存所有资源
• 全屏体验：无浏览器地址栏干扰
• 启动画面：精美的暗黑奇幻风格引导页

🎨 视觉设计

• 暗黑奇幻主题：深黑/深紫背景，暗金/暗红强调色
• 精美动画：骰子滚动、暴击特效、页面切换
• 移动端优先：触控友好，大按钮设计

📂 项目结构

dnd-rpg-app/
├── index.html          # 主入口
├── manifest.json       # PWA 配置
├── sw.js              # Service Worker
├── css/
│   ├── main.css       # 主样式+暗黑主题
│   ├── character.css   # 角色创建样式
│   ├── combat.css     # 战斗面板样式
│   └── animations.css  # 动画效果
├── js/
│   ├── app.js         # 应用主逻辑和路由
│   ├── ui.js          # UI 组件和交互
│   ├── dice.js        # 骰子动画和逻辑
│   ├── character.js   # 角色数据管理 + D&D 5e 数据
│   ├── combat.js      # 战斗面板逻辑
│   ├── storage.js     # 存档管理（IndexedDB）
│   └── ai-bridge.js   # AI 后端通信接口（DeepSeek 代理版）
├── assets/
│   └── icons/         # SVG 图标
└── README.md          # 部署说明

🚀 在 Android 手机上安装

方法一：使用浏览器直接安装

1. 用 Chrome 或 Edge 打开应用

   • 在手机浏览器中打开本应用的 URL

2. 点击安装提示

   • 如果看到底部弹出"安装"提示，点击"安装"
   • 或点击浏览器菜单（三个点）→ "添加到主屏幕"

3. 确认安装

   • 输入应用名称（可选）
   • 点击"添加"
   • 应用图标将出现在主屏幕上

方法二：手动添加到主屏幕

1. 打开应用页面
2. 点击浏览器菜单（三个点）
3. 选择"添加到主屏幕"或"安装应用"
4. 点击"添加"确认

方法三：桌面快捷方式（测试用）

1. 用 Chrome 打开应用
2. 点击地址栏右侧的安装图标
3. 或点击菜单 → "安装..."

🖥️ 本地运行

方式一：直接打开（仅部分功能）

# 直接用浏览器打开 index.html
open index.html

⚠️ 注意：部分浏览器（如 Chrome）要求 HTTPS 或 localhost 才能使用 Service Worker

方式二：使用本地服务器

# Python 3
python -m http.server 8000

# Node.js (npx)
npx serve .

# PHP
php -S localhost:8000

然后访问 http://localhost:8000

方式三：VS Code Live Server

1. 安装 VS Code 的 Live Server 扩展
2. 右键点击 index.html
3. 选择 "Open with Live Server"

📱 iOS 安装

1. 用 Safari 打开应用
2. 点击 Safari 底部的"分享"按钮
3. 向下滚动，点击"添加到主屏幕"
4. 点击"添加"确认

🎮 游戏指南

创建角色

1. 选择种族：人类、精灵、矮人、半身人、龙裔、侏儒、半兽人、提夫林
2. 选择子种族（如有）
3. 选择性别
4. 输入或选择姓名
5. 分配属性：选择掷骰或点数购买模式
6. 选择背景
7. 选择职业
8. 选择起始地点
9. 确认角色

游戏操作

• 探索：随机遭遇敌人，进入战斗
• 交谈：与 NPC 对话（待实现）
• 休息：恢复生命值
• 背包：查看物品（待实现）

战斗操作

• 攻击：使用武器攻击敌人
• 施法：使用法术（施法职业）
• 闪避：专注于闪避敌人攻击
• 防御：提高防御力
• 逃跑：尝试逃离战斗

骰子系统

• 点击 🎲 按钮打开骰子选择器
• 支持 d4/d6/d8/d10/d12/d20
• 勾选"优势"或"劣势"可同时掷两颗取高/低

🧙 AI DM 集成（DeepSeek）

本应用支持通过 DeepSeek AI 作为 DM（地下城主）提供沉浸式游戏体验。

架构说明

┌─────────────────┐         ┌─────────────────┐         ┌─────────────────┐
│  手机浏览器 PWA  │  ─────► │  云电脑代理服务  │  ─────► │   DeepSeek API  │
│  (GitHub Pages) │  CORS   │   (Python)      │         │                 │
└─────────────────┘         └─────────────────┘         └─────────────────┘

由于 PWA 部署在 GitHub Pages，无法直接调用 DeepSeek API（受 CORS 限制），因此需要在云电脑上搭建代理服务。

启动代理服务

# 进入 server 目录
cd server/

# 启动代理服务
./start.sh

# 查看运行状态
cat proxy.log

# 停止代理服务
./stop.sh

代理服务默认运行在 http://0.0.0.0:8765

配置 AI DM

1. 在游戏中点击 ⚙️ 按钮打开设置面板
2. 找到「AI DM 设置」区域
3. 输入代理服务器地址（格式：http://云电脑IP:8765）
   • 需要使用云电脑的公网 IP
   • 如果在同一局域网内，可以使用局域网 IP
4. 点击「测试连接」验证连接状态
5. 选择 AI 模式：
   • 流式输出（推荐）：逐字显示 AI 回复
   • 普通模式：等待完整回复后显示
   • 离线模式：使用预设模拟数据

安全说明

• DeepSeek API Key 只存储在云电脑的代理服务中
• 代理地址由用户在设置中配置，绝不会在前端代码中出现
• 代理服务处理 CORS 请求，允许跨域访问

故障排除

问题	解决方案
连接失败	检查云电脑防火墙是否开放 8765 端口
超时	增加云电脑网络带宽或重启代理服务
回复缓慢	DeepSeek API 服务可能繁忙，稍后再试

🛠️ 技术栈

• 纯 HTML/CSS/JS：无框架依赖
• Service Worker：离线缓存
• IndexedDB：本地数据存储
• Google Fonts：Cinzel（标题）、Noto Sans SC（正文）
• CSS 变量：统一主题管理

📄 许可证

MIT License

🙏 致谢

• D&D 5e 规则参考 D&D 5e SRD
• 图标设计灵感来自经典奇幻 RPG 游戏

---

愿骰子与你同在，冒险者！ 🎲⚔️