# webgame-back

**Repository Path**: wangruikangwork_admin/webgame-back

## Basic Information

- **Project Name**: webgame-back
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-25
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 回合制网络游戏框架

一个基于前后端分离架构的回合制网络游戏框架，支持角色创建、角色管理和PVE战斗系统。

## 技术栈

### 前端
- **Vue 3** - 渐进式JavaScript框架
- **Vite** - 下一代前端构建工具
- **Pinia** - Vue 3的状态管理库
- **Element Plus** - 基于Vue 3的UI组件库
- **Axios** - 用于HTTP请求的库
- **Socket.io-client** - 实时通信客户端

### 后端
- **Node.js** - JavaScript运行时
- **Express** - Web应用框架
- **MongoDB** - 文档数据库
- **Redis** - 内存数据库，用于缓存
- **Socket.io** - 实时通信服务器
- **Mongoose** - MongoDB对象建模工具
- **dotenv** - 环境变量管理

## 安装和运行

### 方式一：传统方式运行

#### 前置要求
- Node.js 16+ 
- npm 8+ 
- MongoDB 4+ 
- Redis 6+ 

#### 安装步骤

1. 克隆仓库
```bash
git clone <repository-url>
cd <project-directory>
```

2. 安装前端依赖
```bash
npm install
```

3. 安装后端依赖
```bash
cd backend
npm install
cd ..
```

4. 配置环境变量

前端创建 `.env.development` 和 `.env.production` 文件
```
VITE_API_BASE_URL=http://localhost:3000/api
```

后端创建 `.env` 文件
```
PORT=3000
MONGO_URI=mongodb://localhost:27017/game_db
REDIS_URL=redis://localhost:6379
```

#### 运行项目

1. 启动后端服务器
```bash
cd backend
node index.js
```

2. 启动前端开发服务器
```bash
npm run dev
```

3. 访问应用
```
http://localhost:5173
```

### 方式二：Docker方式运行（推荐）

#### 前置要求
- Docker 20+ 
- Docker Compose 2+ 

#### 开发环境

1. 启动开发环境
```bash
# 启动开发环境服务（前端+后端+数据库+Redis）
docker-compose --profile dev up -d
```

2. 访问应用
```
# 前端访问地址
http://localhost:5173

# 后端API地址
http://localhost:3000/api
```

3. 查看日志
```bash
# 查看所有服务日志
docker-compose logs -f

# 查看特定服务日志
docker-compose logs -f frontend-dev
docker-compose logs -f backend-dev
```

4. 停止开发环境
```bash
docker-compose down
```

#### 生产环境

1. 构建并启动生产环境
```bash
# 构建并启动生产环境服务
docker-compose --profile prod up -d --build
```

2. 访问应用
```
# 生产环境只暴露前端服务的80端口
http://localhost
```

3. 停止生产环境
```bash
docker-compose down
```

#### Docker相关命令

```bash
# 查看运行中的容器
docker-compose ps

# 进入容器内部
docker-compose exec frontend-dev sh
docker-compose exec backend-dev sh

# 重启特定服务
docker-compose restart frontend-dev
docker-compose restart backend-dev

# 移除所有容器、网络和卷
docker-compose down -v
```

## 构建和部署

### 前端构建

```bash
# 开发环境构建
npm run build

# 生产环境构建
npm run build -- --mode production
```

### 后端构建

```bash
cd backend
npm run build
```

### Docker生产打包

```bash
# 构建前端和后端镜像
docker-compose --profile prod build

# 导出镜像（可选，用于部署到其他服务器）
docker save -o game-frontend.tar game-frontend
docker save -o game-backend.tar game-backend

# 导入镜像（在目标服务器上）
docker load -i game-frontend.tar
docker load -i game-backend.tar
```

### CI/CD集成

项目支持CI/CD集成，可通过以下步骤配置：

1. 在CI平台（如GitHub Actions、GitLab CI）上配置Docker环境
2. 添加构建步骤：
   ```bash
   docker-compose --profile prod build
   ```
3. 添加部署步骤：
   ```bash
   docker-compose --profile prod up -d
   ```

## Docker环境变量说明

| 服务 | 环境变量 | 说明 | 默认值 |
|------|----------|------|--------|
| 后端 | PORT | 后端服务端口 | 3000 |
| 后端 | MONGO_URI | MongoDB连接地址 | mongodb://mongodb:27017/game |
| 后端 | REDIS_URL | Redis连接地址 | redis://redis:6379 |
| 后端 | JWT_SECRET | JWT密钥 | your-secret-key |
| 后端 | JWT_EXPIRES_IN | JWT过期时间 | 24h |
| 前端 | NODE_ENV | 运行环境 | development/production |
| 前端 | VITE_API_BASE_URL | API基础URL | http://localhost:3000/api |

## 项目结构

### 前端结构
```
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # Vue组件
│   │   ├── RoleCreate.vue      # 角色创建组件
│   │   ├── RoleInfo.vue        # 角色信息组件
│   │   └── BattleSystem.vue    # 战斗系统组件
│   ├── stores/          # Pinia状态管理
│   │   ├── roleStore.js        # 角色状态管理
│   │   └── battleStore.js      # 战斗状态管理
│   ├── utils/           # 工具函数
│   │   └── axiosConfig.js      # Axios配置
│   ├── App.vue          # 根组件
│   ├── main.js          # 入口文件
│   └── style.css        # 全局样式
├── public/              # 公共资源
├── index.html           # HTML模板
├── vite.config.js       # Vite配置
└── package.json         # 项目依赖
```

### 后端结构
```
├── backend/
│   ├── models/          # Mongoose模型
│   │   ├── Role.js             # 角色模型
│   │   ├── Monster.js          # 怪物模型
│   │   └── Battle.js           # 战斗模型
│   ├── routes/          # Express路由
│   │   ├── roleRoutes.js       # 角色系统路由
│   │   ├── monsterRoutes.js    # 怪物系统路由
│   │   └── battleRoutes.js     # 战斗系统路由
│   ├── index.js         # 后端入口文件
│   └── package.json     # 后端依赖
```

## 核心功能

### 1. 角色系统
- 角色创建（支持不同职业）
- 角色信息管理
- 角色升级机制
- 角色属性动态计算

### 2. 战斗系统
- 回合制战斗机制
- PVE战斗模式（玩家 vs 怪物）
- 自动战斗AI
- 战斗日志记录
- 战斗结果处理和奖励发放

### 3. 怪物系统
- 怪物群设计
- 不同类型怪物（普通、精英、BOSS）
- 怪物属性平衡

## 开发指南

### 前端开发

1. **组件开发**
   - 使用Vue 3的Composition API和`<script setup>`语法
   - 组件命名采用PascalCase
   - 状态管理使用Pinia

2. **状态管理**
   - 角色相关状态在`roleStore.js`中管理
   - 战斗相关状态在`battleStore.js`中管理
   - 状态更新使用异步actions

3. **API调用**
   - 使用axios进行HTTP请求
   - 所有API请求都经过`axiosConfig.js`配置
   - 统一的错误处理机制

### 后端开发

1. **路由设计**
   - RESTful API设计
   - 路由模块化管理
   - 权限控制（后续扩展）

2. **数据模型**
   - 使用Mongoose进行数据建模
   - 模型之间的关联设计
   - 数据验证和默认值

3. **战斗逻辑**
   - 回合制战斗核心算法
   - 伤害计算机制
   - 战斗状态管理

## 战斗系统详解

### 战斗流程
1. 玩家选择怪物群
2. 创建战斗实例
3. 进入战斗界面
4. 玩家回合：选择攻击目标和技能
5. 怪物回合：自动选择目标和技能
6. 重复步骤4-5，直到一方全部被击败
7. 计算战斗结果和奖励

### 战斗核心算法

1. **伤害计算**
   ```javascript
damage = Math.max(1, 攻击者攻击力 - 目标防御力)
   ```

2. **回合切换**
   - 按参与者顺序轮流行动
   - 每轮结束后回合数+1
   - 死亡角色跳过行动

3. **战斗结束判定**
   - PVE模式：所有玩家死亡或所有怪物死亡
   - PVP模式：一方全部死亡

### 怪物AI
- 自动选择目标：优先攻击生命值最低的玩家
- 自动使用技能：当前仅支持普通攻击
- 智能跳过死亡角色

## 未来扩展方向

1. **PVP战斗系统**
2. **技能系统**
3. **装备系统**
4. **任务系统**
5. **社交系统**
6. **排行榜系统**
7. **公会系统**

## 贡献指南

1. Fork仓库
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 提交Pull Request

## 许可证

MIT License

## 联系方式

如有问题或建议，请通过以下方式联系：
- 项目负责人：<contact-email>
- 项目地址：<repository-url>