# 轻量级实时协作应用-2班2组 **Repository Path**: grade-23-full-stack-class-2/lightweight-realtime-collab-app-class2-group2 ## Basic Information - **Project Name**: 轻量级实时协作应用-2班2组 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-08-13 - **Last Updated**: 2025-09-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 鼠标大作战游戏 ## 项目概述 这是一个基于Vue3和.NET 8的多人实时涂色抢地盘游戏，玩家通过涂色来占领画布区域获得分值，同时添加了有趣的玩法供玩家额外提高分值，最后分最高者得胜。 ### � 游戏特色 - **� 简单规则**: 涂色抢地盘，分值最大者获胜 - **⚡ 快节奏**: 每局3-5分钟，节奏紧凑刺激 - **👥 多人对战**: 支持2-10人实时竞技 - **🎯 公平竞技**: 防作弊机制，公平的游戏环境 - **📱 响应式**: 支持PC和移动端游戏 ### 🎯 核心玩法 1. **房间匹配**: 创建或加入游戏房间 2. **颜色分配**: 系统自动为每位玩家分配专属颜色 3. **实时涂色**: 在画布上涂色占领区域，不能覆盖他人颜色 4. **面积统计**: 实时显示各玩家占领面积排名 5. **胜负判定**: 时间结束后，分值最大的玩家获胜 6. **玩法说明**： - 移动：W/S 前后，A/D 左右旋转；J 键发射炮弹。 - 炮弹：带飞行动画，命中墙体或玩家时在命中点产生实心爆炸并涂色。 - 击杀与复活：被命中将死亡 5 秒，期间角色隐藏，仅显示黑色倒计时，时间到随机空地复活。 - 击杀奖励：被击杀玩家有 25% 概率给予击杀者一个随机道具，结果会显示在右侧“击杀信息”。 - 道具与背包：拾取的道具进入上方背包栏，按 K/L/U/I/O 使用，对应库存 -1；同类型持续效果可叠加延长（K 为即时生效不叠加）。 - 道具刷新：系统周期刷新（约每 10 秒），地图会定期出现新的可拾取道具。 - 隐身区域：地图上淡蓝色圆形范围内处于隐身状态。 ## 技术架构 - **前端**: Vue 3 + Vite + Pinia + @microsoft/signalr - **后端**: ASP.NET Core 8 + SignalR + Entity Framework Core - **架构模式**: 简洁DDD + CQRS（轻量级） - **数据库**: PostgreSQL + Redis (游戏会话缓存) - **Canvas**: 原生Canvas API（轻量高效） - **部署**: Docker + Docker Compose ### 🏗️ DDD架构特点 - **领域驱动**: 以游戏业务逻辑为核心设计 - **CQRS模式**: 命令查询职责分离，提升性能 - **事件驱动**: 领域事件实现松耦合通信 - **分层清晰**: Domain → Application → Infrastructure → API ## 项目结构 ``` 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 # 开发文档 ``` ## 🚀 快速开始 ### 环境要求 - .NET 8 SDK - PostgreSQL 16 - Node.js 18+ - Docker & Docker Compose (可选) ### 本地开发环境运行 #### 1. 克隆项目 ```bash git clone https://gitee.com/grade-23-full-stack-class-2/lightweight-realtime-collab-app-class2-group2.git cd lightweight-realtime-collab-app-class2-group2 ``` #### 2. 数据库设置 ```bash "ConnectionStrings": { "DefaultConnection": "Server=localhost;Port=5432;Database=TerritoryGame;UserName=postgres;Password=123456;", "Redis": "localhost" } ``` # 启动后端服务 cd .\backend\src\ dotnet restore dotnet ef database update -p TerritoryGame.Infrastructure -s TerritoryGame.API 运行数据库迁移 dotnet run --project TerritoryGame.API # API服务将在 http://localhost:5115 启动 # 启动前端项目 cd .\frontend pnpm install pnpm run dev # 访问 http://localhost:5173 ## 关键技术难点解决方案 ### 1. 实时同步性能优化 - 使用节流（throttle）限制绘图事件发送频率 - 实现差量同步，只传输变化的部分 - 使用二进制数据格式减少传输量 ### 2. 冲突处理机制 - 实现操作时间戳排序 - 使用乐观锁机制处理并发修改 - 添加操作重试机制 ### 3. 移动端适配 - 添加触摸事件支持 - 实现手势操作（缩放、平移） - 优化移动端UI布局 ## 扩展功能建议 1. **图层管理**：支持多图层绘图 2. **图形库**：预设图形模板 3. **协作历史**：操作历史回放 4. **权限管理**：房间管理员权限 5. **语音协作**：集成WebRTC语音通话 ## 🎯 学习目标达成 通过本项目，学生将掌握： ### 前端技术栈 - **Vue 3 Composition API** 和现代前端开发模式 - **Canvas API** 和图形绘制技术 - **实时通信** Microsoft和SignalR的使用 - **状态管理** Pinia的状态管理最佳实践 ### 后端架构设计 - **DDD领域驱动设计** 的核心思想和实践 - **CQRS模式** 命令查询职责分离的应用 - **事件驱动架构** 领域事件的设计和使用 - **.NET 8** 和 SignalR实时通信技术 - **分层架构** Domain → Application → Infrastructure → API ### DDD核心概念实践 - **聚合根设计**：Game作为聚合根管理游戏状态 - **实体和值对象**：Player实体和Position、Color值对象 - **领域服务**：复杂业务逻辑的封装（GameLogicService） - **仓储模式**：数据访问层的抽象和实现 - **领域事件**：GameStarted、AreaCaptured等事件驱动通信 ### 工程实践 - **Docker容器化** 部署和DevOps - **团队协作** Git工作流和版本控制 - **代码质量** 单元测试和代码规范 - **性能优化** 缓存策略和并发处理 ## 🎨 项目截图 ### 注册 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/注册页.png) ### 登录 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/登录页.png) ### 创建房间 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/创建房间.png) ### 加入房间 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/进入房间.png) ### 玩家踢出房间 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/踢出房间.gif) ### 开始游戏 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/游戏开始.gif) ### 游戏结束 ![](https://lusiyi-picgo.oss-cn-beijing.aliyuncs.com/images/游戏结束.png) ## 🌐 在线演示 - 项目演示录屏可下载：[项目演示视频](暑期集训/04项目演示视频/8月21日.mp4) ### 成员部署地址 | | |-----------------------------| | | | | | | | | ## 🤝 贡献指南 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/新功能`) 3. 提交更改 (`git commit -am '添加新功能'`) 4. 推送到分支 (`git push origin feature/新功能`) 5. 创建 Pull Request ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 📞 联系方式 - 项目负责人：[胡富文] - 邮箱：[myhfw003@github.com] - 技术支持：[技术交流群] --- **开发时间**: 1周 (2025年8月15日 - 2025年8月20日) **文档更新**: 2025年8月21日