# 轻量级实时协作应用-2班7组 **Repository Path**: hyo-ja/lightweight-realtime-collab-app-class2-group7 ## Basic Information - **Project Name**: 轻量级实时协作应用-2班7组 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2025-08-25 - **Last Updated**: 2025-08-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # � 涂色抢地盘游戏 - 开发指南 ## 项目概述 这是一个基于Vue3和.NET 8的多人实时涂色抢地盘游戏，玩家通过涂色来占领画布区域，最终占领面积最大的玩家获胜。项目设计简单有趣，适合学生在4天时间内完成。 ### � 游戏特色 - **实时多人竞技**: 支持2-6名玩家同时在线游戏 - **实时同步**: 使用SignalR实现涂色动作的实时同步 - **多种工具**: 支持画笔、橡皮擦、填充等涂色工具 - **公平竞争**: 基于面积计算的胜负判定系统 - **房间系统**: 支持创建和加入游戏房间 ## 🎯 游戏规则 1. **游戏目标**: 在限定时间内，通过涂色占领画布上的区域 2. **游戏时间**: 可设置为3分钟、5分钟或10分钟 3. **涂色规则**: - 每位玩家使用系统分配的唯一颜色 - 不能覆盖其他玩家已涂色的区域 - 每次涂色动作都会增加占领面积 4. **胜负判定**: 时间结束后，占领面积最大的玩家获胜 5. **玩家数量**: 支持2-6名玩家，至少需要2名玩家才能开始 ## 🚀 技术架构 ### 前端 (Vue3) - **框架**: Vue 3 + Composition API - **状态管理**: Pinia - **路由**: Vue Router 4 - **实时通信**: Socket.IO Client - **构建工具**: Vite - **样式**: CSS3 + 响应式设计 ### 后端 (.NET 8) - **框架**: .NET 8 Web API - **实时通信**: SignalR - **架构模式**: Clean Architecture - **依赖注入**: Microsoft.Extensions.DependencyInjection - **日志**: Serilog ### 🏗️ DDD架构特点 - **领域驱动**: 以游戏业务逻辑为核心设计 - **CQRS模式**: 命令查询职责分离，提升性能 - **事件驱动**: 领域事件实现松耦合通信 - **分层清晰**: Domain → Application → Infrastructure → API ### 游戏界面参考 ![20250814233619](https://oss.9ihub.com/test/20250814233619.png) ## 项目结构 ``` lightweight-realtime-collab-app-class2-group7/ ├── frontend/ # Vue3前端项目 │ ├── src/ │ │ ├── components/ # Vue组件 │ │ │ ├── audio/ # 音频控制组件 │ │ │ ├── debug/ # 调试工具组件 │ │ │ ├── game/ # 游戏相关组件 │ │ │ ├── icons/ # 图标组件 │ │ │ ├── layout/ # 布局组件 │ │ │ ├── rooms/ # 房间相关组件 │ │ │ └── user/ # 用户相关组件 │ │ ├── views/ # 页面视图 │ │ │ ├── ForgotPasswordView.vue │ │ │ ├── GameDetailView.vue │ │ │ ├── GameView.vue │ │ │ ├── HomeView.vue │ │ │ ├── JoinRoomView.vue │ │ │ ├── LoginView.vue │ │ │ ├── ProfileView.vue │ │ │ ├── RegisterView.vue │ │ │ └── TitlesView.vue │ │ ├── stores/ # Pinia状态管理 │ │ │ ├── audio.js # 音频状态管理 │ │ │ ├── game.js # 游戏状态管理 │ │ │ ├── room.js # 房间状态管理 │ │ │ ├── socket.js # Socket通信管理 │ │ │ └── user.js # 用户状态管理 │ │ ├── api/ # API接口 │ │ │ ├── auth.js # 认证相关API │ │ │ ├── game.js # 游戏相关API │ │ │ ├── room.js # 房间相关API │ │ │ ├── stats.js # 统计相关API │ │ │ ├── user.js # 用户相关API │ │ │ └── userlevel.js # 用户等级API │ │ ├── assets/ # 静态资源 │ │ │ ├── audio/ # 音频文件 │ │ │ ├── images/ # 图片资源 │ │ │ ├── base.css # 基础样式 │ │ │ └── main.css # 主样式 │ │ ├── utils/ # 工具函数 │ │ │ ├── request.js # 请求工具 │ │ │ ├── socket.js # Socket工具 │ │ │ └── storage.js # 存储工具 │ │ ├── router/ # 路由配置 │ │ ├── App.vue # 根组件 │ │ └── main.js # 入口文件 │ ├── public/ # 公共资源 │ ├── package.json # 项目配置 │ ├── vite.config.js # Vite配置 │ └── README.md # 前端说明文档 ├── backend/ # .NET 8后端项目 │ ├── src/ │ │ ├── TerritoryGame.Api/ # Web API项目 │ │ │ ├── Controllers/ # 控制器 │ │ │ ├── Hubs/ # SignalR Hub │ │ │ ├── Middleware/ # 中间件 │ │ │ ├── wwwroot/ # 静态文件 │ │ │ ├── Program.cs # 程序入口 │ │ │ └── appsettings.json # 配置文件 │ │ ├── TerritoryGame.Application/ # 应用层 │ │ │ ├── Commands/ # 命令 │ │ │ ├── Dtos/ # 数据传输对象 │ │ │ ├── Interfaces/ # 服务接口 │ │ │ └── Services/ # 服务实现 │ │ ├── TerritoryGame.Domain/ # 领域层 │ │ │ ├── DomainEvents/ # 领域事件 │ │ │ ├── Entities/ # 实体 │ │ │ ├── Interfaces/ # 领域接口 │ │ │ ├── Repositories/ # 仓储接口 │ │ │ └── ValueObjects/ # 值对象 │ │ └── TerritoryGame.Infrastructure/ # 基础设施层 │ │ ├── Data/ # 数据访问 │ │ ├── Migrations/ # 数据库迁移 │ │ └── Repositories/ # 仓储实现 │ ├── LEVEL_SYSTEM_README.md # 等级系统说明 │ └── TerritoryGame.sln # 解决方案文件 ├── .gitignore # Git忽略文件 └── README.md # 项目说明文档 └── docs/ # 文档目录 ├── REQUIREMENTS.md # 需求文档 ├── API.md # API文档 ├── DEPLOYMENT.md # 部署文档 └── DEVELOPMENT.md # 开发文档 ``` ## 🛠️ 安装和运行 ### 前端 1. 进入前端目录 ```bash cd frontend ``` 2. 安装依赖 ```bash npm install # 或 pnpm install ``` 3. 启动开发服务器 ```bash npm run dev # 或 pnpm dev ``` 4. 访问应用 ``` http://territory-game.monkeymeerkat.cn/ ``` ### 后端 1. 进入后端目录 ```bash cd backend ``` 2. 恢复NuGet包 ```bash dotnet restore ``` 3. 启动API服务 ```bash dotnet run --project src/TerritoryGame.Api ``` 4. 访问API ``` https://localhost:7001 http://localhost:5001 ``` ## 项目演示效果 登录页 ![20250821141707](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141707.png) 注册页 ![20250821141731](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141731.png) 大厅 ![20250821141757](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141757.png) 创建房间 ![20250821141814](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141814.png) 加入房间 ![20250821141827](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141827.png) 个人信息 ![20250821141845](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141845.png) 游戏称号 ![20250821141856](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141856.png) 编辑资料 ![20250821141909](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141909.png) 修改密码 ![20250821141922](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821141922.png) 房间准备 ![20250821142009](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821142009.png) 游戏界面 ![20250821142200](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821142200.png) 结算界面 ![20250821142349](https://lemik.oss-cn-shenzhen.aliyuncs.com/20250821142349.png) ## 🎮 游戏玩法 ### 1. 创建房间 - 在首页点击"开始游戏" - 设置房间名称、最大玩家数和游戏时长 - 输入你的用户名 - 点击"创建房间" ### 2. 加入房间 - 在房间大厅输入房间ID - 输入你的用户名 - 点击"加入房间" ### 3. 开始游戏 - 房间创建者点击"开始游戏" - 所有玩家进入游戏界面 - 使用画笔工具在画布上涂色 ### 4. 游戏结束 - 时间结束后自动计算结果 - 显示所有玩家排名 - 获胜者显示在排行榜顶部 ## 📅 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实践评分重点 - **领域模型设计**：聚合根、实体、值对象的合理设计 - **业务逻辑封装**：复杂游戏规则在领域服务中的实现 - **事件驱动通信**：领域事件的正确使用和处理 - **分层架构遵循**：各层职责清晰，依赖关系正确 这个项目既实用又有挑战性，非常适合作为高职学生的综合实训项目！