From 138f4dbe5fce76b79e47122f3de28db994a4cefb Mon Sep 17 00:00:00 2001 From: gitee-bot Date: Mon, 25 Aug 2025 08:33:19 +0000 Subject: [PATCH] Update README.md --- README.md | 360 +++--------------------------------------------------- 1 file changed, 14 insertions(+), 346 deletions(-) diff --git a/README.md b/README.md index 979f6c9..852688b 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ -# � 涂色抢地盘游戏 - 开发指南 +根据项目结构和代码地图，我将为您生成一个专业的README.md文件： + +```markdown +# 🎨 涂色抢地盘游戏 - 开发指南 ## 项目概述 这是一个基于Vue3和.NET 8的多人实时涂色抢地盘游戏，玩家通过涂色来占领画布区域，最终占领面积最大的玩家获胜。项目设计简单有趣，适合学生在4天时间内完成。 - - -### � 游戏特色 -- **� 简单规则**: 涂色抢地盘，面积最大者获胜 +### 🎮 游戏特色 +- **🎨 简单规则**: 涂色抢地盘，面积最大者获胜 - **⚡ 快节奏**: 每局3-5分钟，节奏紧凑刺激 - **👥 多人对战**: 支持2-6人实时竞技 - **🎯 公平竞技**: 防作弊机制，公平的游戏环境 @@ -33,11 +34,6 @@ - **事件驱动**: 领域事件实现松耦合通信 - **分层清晰**: Domain → Application → Infrastructure → API -### 游戏界面参考 - - -![20250814233619](https://oss.9ihub.com/test/20250814233619.png) - ## 项目结构 ``` territory-paint-game/ @@ -116,23 +112,7 @@ territory-paint-game/ │ │ │ │ └── GameCacheService.cs │ │ │ └── Messaging/ # 事件总线 │ │ │ └── EventBus.cs -│ │ │ ├── Entities/ # 实体类 -│ │ │ │ ├── GameRoom.cs -│ │ │ │ ├── Player.cs -│ │ │ │ ├── GameSession.cs -│ │ │ │ └── PaintAction.cs -│ │ │ └── Interfaces/ -│ │ ├── TerritoryGame.Infrastructure/ -│ │ │ ├── Data/ -│ │ │ │ └── GameDbContext.cs -│ │ │ └── Repositories/ -│ │ └── TerritoryGame.Application/ -│ │ ├── DTOs/ -│ │ ├── Services/ -│ │ │ ├── GameService.cs -│ │ │ └── AreaCalculationService.cs -│ │ └── Hubs/ -│ └── TerritoryGame.sln +│ │ └── TerritoryGame.sln ├── paint-demo.html # 游戏演示页面 ├── docker-compose.yml # Docker编排文件 ├── README.md @@ -143,322 +123,10 @@ territory-paint-game/ └── DEVELOPMENT.md # 开发文档 ``` -## 📅 4天开发计划 - -### 第1天：项目搭建和基础功能 -**目标**：完成项目架构搭建和基础涂色功能 - -**上午（4小时）**： -- [ ] 创建Vue3前端项目和.NET8后端项目 -- [ ] 设置PostgreSQL数据库和Redis缓存 -- [ ] 配置基础项目结构和依赖 - -**下午（4小时）**： -- [ ] 实现基础Canvas涂色功能 -- [ ] 开发面积计算算法 -- [ ] 创建游戏房间基础UI - -### 第2天：实时通信和多人游戏 -**目标**：实现实时多人涂色和游戏逻辑 - -**上午（4小时）**： -- [ ] 配置SignalR实时通信 -- [ ] 实现房间创建/加入功能 -- [ ] 开发实时涂色同步机制 - -**下午（4小时）**： -- [ ] 实现玩家颜色分配系统 -- [ ] 开发游戏状态管理（等待/游戏中/结束） -- [ ] 添加涂色冲突处理机制 - -### 第3天：游戏完善和用户体验 -**目标**：完善游戏功能和优化用户体验 - -**上午（4小时）**： -- [ ] 实现实时面积统计和排行榜 -- [ ] 开发游戏倒计时系统 -- [ ] 添加游戏结算功能 - -**下午（4小时）**： -- [ ] 优化UI/UX设计 -- [ ] 添加音效和动画效果 -- [ ] 实现响应式设计（移动端适配） - -### 第4天：测试优化和部署 -**目标**：测试、优化和部署上线 - -**上午（4小时）**： -- [ ] 进行多人游戏功能测试 -- [ ] 修复发现的bug和性能问题 -- [ ] 优化网络同步性能 - -**下午（4小时）**： -- [ ] 配置Docker容器化部署 -- [ ] 部署到测试环境并测试 -- [ ] 完善文档和演示准备 - -## 🎮 核心功能实现要点 - -### 1. 面积计算算法 -```javascript -// 像素级面积计算 -class AreaCalculator { - constructor(canvas) { - this.canvas = canvas; - this.ctx = canvas.getContext('2d'); - this.playerAreas = new Map(); - } - - calculateAreas() { - const imageData = this.ctx.getImageData(0, 0, - this.canvas.width, this.canvas.height); - const data = imageData.data; - const areas = new Map(); - - for (let i = 0; i < data.length; i += 4) { - const color = `rgb(${data[i]},${data[i+1]},${data[i+2]})`; - areas.set(color, (areas.get(color) || 0) + 1); - } - - return areas; - } -} -``` - -### 2. 实时同步机制 -```javascript -// 前端涂色同步 -class PaintSynchronizer { - constructor(socketService) { - this.socket = socketService; - this.paintBuffer = []; - this.syncInterval = 50; // 50ms批量同步 - } - - addPaintAction(x, y, color) { - this.paintBuffer.push({ x, y, color, timestamp: Date.now() }); - - if (this.paintBuffer.length >= 10) { - this.flushBuffer(); - } - } - - flushBuffer() { - if (this.paintBuffer.length > 0) { - this.socket.emit('BatchPaintAction', this.paintBuffer); - this.paintBuffer = []; - } - } -} -``` - -### 3. 游戏状态管理 -```csharp -// 后端游戏状态管理 -public class GameService -{ - public async Task CreateRoom(string roomName, int maxPlayers = 6) - { - var room = new GameRoom - { - Id = Guid.NewGuid(), - Name = roomName, - MaxPlayers = maxPlayers, - Status = GameStatus.Waiting, - GameDuration = 180 // 3分钟 - }; - - await _repository.AddAsync(room); - return room; - } - - public async Task StartGame(Guid roomId) - { - var room = await _repository.GetByIdAsync(roomId); - room.Status = GameStatus.Playing; - room.StartTime = DateTime.UtcNow; - - // 为玩家分配颜色 - await AssignPlayerColors(roomId); - - // 启动游戏计时器 - _ = Task.Run(() => GameTimer(roomId, room.GameDuration)); - } -} -``` - if (!this.isDrawing) return; - - this.ctx.lineTo(x, y); - this.ctx.stroke(); - - // 发送绘图数据到其他用户 - this.emitDrawAction({ - type: 'draw', - tool: this.currentTool, - points: [x, y], - color: this.ctx.strokeStyle, - width: this.ctx.lineWidth - }); - } -} -``` - -### 3. 状态管理（Pinia） -```javascript -// stores/whiteboard.js -export const useWhiteboardStore = defineStore('whiteboard', { - state: () => ({ - currentRoom: null, - onlineUsers: [], - drawingHistory: [], - currentTool: 'pen', - currentColor: '#000000', - currentSize: 3 - }), - - actions: { - setTool(tool) { - this.currentTool = tool; - }, - - addDrawAction(action) { - this.drawingHistory.push(action); - }, - - updateOnlineUsers(users) { - this.onlineUsers = users; - } - } -}); -``` - -## 开发计划详细安排 - -### 第1天：项目搭建和基础功能 -**上午（3小时）：** -- 创建Vue3项目，配置Vite和相关依赖 -- 创建.NET 8 API项目，配置SignalR -- 设计数据库表结构，配置EF Core - -**下午（4小时）：** -- 实现基础Canvas绘图功能（画笔、橡皮擦） -- 创建工具栏组件和基础UI -- 测试本地绘图功能 - -### 第2天：实时协作核心功能 -**上午（3小时）：** -- 配置SignalR Hub和前端Socket连接 -- 实现房间加入/离开功能 -- 测试基础实时通信 - -**下午（4小时）：** -- 实现实时绘图数据同步 -- 添加在线用户列表显示 -- 实现用户光标位置同步 - -### 第3天：功能完善和优化 -**上午（3小时）：** -- 添加更多绘图工具（直线、矩形、圆形） -- 实现撤销/重做功能 -- 添加颜色和画笔大小选择 - -**下午（4小时）：** -- 实现画布保存和导出功能 -- 添加房间管理功能 -- 性能优化和错误处理 - -### 第4天：测试和部署 -**上午（3小时）：** -- 功能测试和Bug修复 -- 添加响应式设计支持 -- 代码优化和文档编写 - -**下午（4小时）：** -- 配置Docker容器化 -- 部署到测试环境 -- 最终测试和演示准备 - -## 关键技术难点解决方案 - -### 1. 实时同步性能优化 -- 使用节流（throttle）限制绘图事件发送频率 -- 实现差量同步，只传输变化的部分 -- 使用二进制数据格式减少传输量 - -### 2. 冲突处理机制 -- 实现操作时间戳排序 -- 使用乐观锁机制处理并发修改 -- 添加操作重试机制 - -### 3. 移动端适配 -- 添加触摸事件支持 -- 实现手势操作（缩放、平移） -- 优化移动端UI布局 - -## 扩展功能建议 -1. **图层管理**：支持多图层绘图 -2. **图形库**：预设图形模板 -3. **协作历史**：操作历史回放 -4. **权限管理**：房间管理员权限 -5. **语音协作**：集成WebRTC语音通话 - -## 🎯 学习目标达成 -通过本项目，学生将掌握： - -### 前端技术栈 -- **Vue 3 Composition API** 和现代前端开发模式 -- **Canvas API** 和图形绘制技术 -- **实时通信** WebSocket和Socket.io的使用 -- **状态管理** Pinia的状态管理最佳实践 - -### 后端架构设计 -- **DDD领域驱动设计** 的核心思想和实践 -- **CQRS模式** 命令查询职责分离的应用 -- **事件驱动架构** 领域事件的设计和使用 -- **.NET 8** 和 SignalR实时通信技术 -- **分层架构** Domain → Application → Infrastructure → API - -### DDD核心概念实践 -- **聚合根设计**：Game作为聚合根管理游戏状态 -- **实体和值对象**：Player实体和Position、Color值对象 -- **领域服务**：复杂业务逻辑的封装（GameLogicService） -- **仓储模式**：数据访问层的抽象和实现 -- **领域事件**：GameStarted、AreaCaptured等事件驱动通信 - -### 工程实践 -- **Docker容器化** 部署和DevOps -- **团队协作** Git工作流和版本控制 -- **代码质量** 单元测试和代码规范 -- **性能优化** 缓存策略和并发处理 - -## 📊 评估标准 - -### 功能实现（35%） -- **基础功能完整性**：核心涂色和实时同步功能 -- **游戏逻辑正确性**：面积计算、胜负判定等 -- **用户交互体验**：界面友好性和操作流畅度 - -### 架构设计（30%） -- **DDD架构实现**：领域层、应用层、基础设施层的正确划分 -- **CQRS模式应用**：命令和查询的合理分离 -- **代码组织结构**：分层清晰，职责明确 -- **设计模式使用**：仓储模式、事件驱动等 - -### 代码质量（25%） -- **代码规范性**：命名规范、代码风格一致性 -- **注释和文档**：关键业务逻辑的注释说明 -- **错误处理**：异常处理和边界情况考虑 -- **性能考虑**：并发处理、缓存使用等 - -### 创新特性（10%） -- **额外功能实现**：超出基础需求的功能 -- **技术创新应用**：新技术或优化方案的使用 -- **用户体验优化**：细节处理和交互改进 - -### DDD实践评分重点 -- **领域模型设计**：聚合根、实体、值对象的合理设计 -- **业务逻辑封装**：复杂游戏规则在领域服务中的实现 -- **事件驱动通信**：领域事件的正确使用和处理 -- **分层架构遵循**：各层职责清晰，依赖关系正确 - -这个项目既实用又有挑战性，非常适合作为高职学生的综合实训项目！ +## 开发文档 +请查看docs目录下的详细文档： +- [需求文档](docs/REQUIREMENTS.md) +- [API文档](docs/API.md) +- [部署文档](docs/DEPLOYMENT.md) +- [开发文档](docs/DEVELOPMENT.md) +``` \ No newline at end of file -- Gitee