# 轻量级实时协作应用-1班3组 **Repository Path**: grade-23-full-stack-class-1/lightweight-realtime-collab-app-class1-group3 ## Basic Information - **Project Name**: 轻量级实时协作应用-1班3组 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-13 - **Last Updated**: 2025-08-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # � 涂色抢地盘游戏 - 开发指南 ## 项目概述 这是一个基于Vue3和.NET 8的多人实时涂色抢地盘游戏，玩家通过涂色来占领画布区域，最终占领面积最大的玩家获胜。项目设计简单有趣，适合学生在4天时间内完成。 ### � 游戏特色 - **� 简单规则**: 涂色抢地盘，面积最大者获胜 - **⚡ 快节奏**: 每局3-5分钟，节奏紧凑刺激 - **👥 多人对战**: 支持2-6人实时竞技 - **🎯 公平竞技**: 防作弊机制，公平的游戏环境 - **📱 响应式**: 支持PC和移动端游戏 ### 🎯 核心玩法 1. **房间匹配**: 创建或加入游戏房间 2. **颜色分配**: 系统自动为每位玩家分配专属颜色 3. **实时涂色**: 在画布上涂色占领区域，不能覆盖他人颜色 4. **面积统计**: 实时显示各玩家占领面积排名 5. **胜负判定**: 时间结束后，占领面积最大的玩家获胜 ## 技术架构 - **前端**: Vue 3 + Vite + Pinia + Socket.io-client - **后端**: ASP.NET Core 8 + SignalR + Entity Framework Core - **架构模式**: 简洁DDD + CQRS（轻量级） - **数据库**: PostgreSQL + Redis (游戏会话缓存) - **Canvas**: 原生Canvas API（轻量高效） - **部署**: Docker + Docker Compose ### 🏗️ DDD架构特点 - **领域驱动**: 以游戏业务逻辑为核心设计 - **CQRS模式**: 命令查询职责分离，提升性能 - **事件驱动**: 领域事件实现松耦合通信 - **分层清晰**: Domain → Application → Infrastructure → API ### 游戏界面参考 ![20250814233619](https://oss.9ihub.com/test/20250814233619.png) ## 项目结构 ``` territory-paint-game/ ├── frontend/ # Vue3前端项目 │ ├── src/ │ │ ├── components/ # 组件 │ │ │ ├── GameCanvas.vue # 游戏画布组件 │ │ │ ├── PlayerList.vue # 玩家列表组件 │ │ │ ├── GameTimer.vue # 游戏计时器 │ │ │ ├── AreaStats.vue # 面积统计组件 │ │ │ └── RoomLobby.vue # 房间大厅 │ │ ├── stores/ # Pinia状态管理 │ │ │ ├── game.js # 游戏状态 │ │ │ ├── player.js # 玩家状态 │ │ │ └── room.js # 房间状态 │ │ ├── services/ # 服务层 │ │ │ ├── gameService.js # 游戏服务 │ │ │ └── socketService.js # Socket通信 │ │ ├── utils/ # 工具函数 │ │ │ ├── canvas.js # Canvas工具 │ │ │ ├── areaCalculator.js # 面积计算 │ │ │ └── gameLogic.js # 游戏逻辑 │ │ ├── App.vue │ │ └── main.js │ ├── package.json │ └── vite.config.js ├── backend/ # .NET 8后端项目 (DDD架构) │ ├── src/ │ │ ├── TerritoryGame.API/ # 接口层 │ │ │ ├── Controllers/ # RESTful API控制器 │ │ │ │ ├── CommandController.cs # 命令处理 (CQRS) │ │ │ │ └── QueryController.cs # 查询处理 (CQRS) │ │ │ ├── Hubs/ # SignalR实时通信 │ │ │ │ └── GameHub.cs │ │ │ ├── Program.cs # 启动配置 │ │ │ └── appsettings.json │ │ ├── TerritoryGame.Domain/ # 领域层 (核心业务逻辑) │ │ │ ├── Entities/ # 实体 │ │ │ │ ├── Game.cs # 游戏聚合根 │ │ │ │ ├── Player.cs # 玩家实体 │ │ │ │ └── GameRoom.cs # 房间实体 │ │ │ ├── ValueObjects/ # 值对象 │ │ │ │ ├── Position.cs # 位置坐标 │ │ │ │ ├── Color.cs # 玩家颜色 │ │ │ │ └── GameScore.cs # 游戏分数 │ │ │ ├── Events/ # 领域事件 │ │ │ │ ├── GameStartedEvent.cs │ │ │ │ ├── AreaCapturedEvent.cs │ │ │ │ └── GameEndedEvent.cs │ │ │ ├── Services/ # 领域服务 │ │ │ │ ├── IGameLogicService.cs │ │ │ │ └── GameLogicService.cs # 游戏规则引擎 │ │ │ └── Repositories/ # 仓储接口 │ │ │ ├── IGameRepository.cs │ │ │ └── IPlayerRepository.cs │ │ ├── TerritoryGame.Application/ # 应用层 (用例编排) │ │ │ ├── Commands/ # 命令模式 │ │ │ │ ├── CreateRoomCommand.cs │ │ │ │ ├── JoinRoomCommand.cs │ │ │ │ └── PaintActionCommand.cs │ │ │ ├── Queries/ # 查询模式 │ │ │ │ ├── GetRoomQuery.cs │ │ │ │ └── GetLeaderboardQuery.cs │ │ │ ├── Handlers/ # CQRS处理器 │ │ │ │ ├── CommandHandlers/ │ │ │ │ └── QueryHandlers/ │ │ │ └── Services/ # 应用服务 │ │ │ └── GameOrchestrator.cs # 游戏编排服务 │ │ ├── TerritoryGame.Infrastructure/ # 基础设施层 │ │ │ ├── Persistence/ # 数据持久化 │ │ │ │ ├── GameContext.cs # EF Core上下文 │ │ │ │ └── Repositories/ # 仓储实现 │ │ │ │ ├── GameRepository.cs │ │ │ │ └── PlayerRepository.cs │ │ │ ├── Redis/ # 缓存服务 │ │ │ │ └── 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 ├── paint-demo.html # 游戏演示页面 ├── docker-compose.yml # Docker编排文件 ├── README.md └── docs/ # 文档目录 ├── REQUIREMENTS.md # 需求文档 ├── API.md # API文档 ├── DEPLOYMENT.md # 部署文档 └── 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实践评分重点 - **领域模型设计**：聚合根、实体、值对象的合理设计 - **业务逻辑封装**：复杂游戏规则在领域服务中的实现 - **事件驱动通信**：领域事件的正确使用和处理 - **分层架构遵循**：各层职责清晰，依赖关系正确 这个项目既实用又有挑战性，非常适合作为高职学生的综合实训项目！