draw-and-guess

介绍

你画我猜 SpringBoot Websocket

软件架构

• 后端：Java21、Maven、SpringBoot 3.2.4
• 前端：HTML + jQuery
• 通讯：HTTP + Websocket
• 工具库：Lombok、Hutool、FastJSON2

项目结构

draw-and-guess/
├── src/main/java/cn/airnan/dg/
│   ├── configs/          # 配置类（CORS、WebSocket、全局配置）
│   ├── controller/       # 控制器（玩家、房间、题目、首页）
│   ├── entity/          # 实体类（玩家、房间、画板、画笔、点、题目）
│   ├── pojo/            # 数据传输对象
│   ├── service/         # 业务逻辑层
│   └── utils/           # 工具类（WebSocket、消息封装、通用响应）
├── src/main/resources/
│   ├── static/          # 静态资源（HTML、CSS、JS、图标）
│   ├── application.yml  # 应用配置
│   └── topic.json       # 题库文件
└── pom.xml              # Maven 依赖配置

安装教程

1. 修改前端配置 打开 src/main/resources/static/index.html，修改 backendAddr 变量为实际的服务器地址：

   const backendAddr = "192.168.31.222:8080"  // 修改为你的服务器IP和端口
   

2. 编译打包

   # 使用 Maven Wrapper 编译打包
   mvnw clean package
   
   # 或使用本地 Maven
   mvn clean package
   

   打包完成后，在 target 目录下会生成 draw-and-guess-0.0.1-SNAPSHOT.jar

3. 运行应用

   # 直接运行
   java -jar target/draw-and-guess-0.0.1-SNAPSHOT.jar
   
   # 后台运行（Linux/Mac）
   nohup java -jar target/draw-and-guess-0.0.1-SNAPSHOT.jar >> ./draw.log 2>&1 &
   
   # Windows 后台运行
   start /B java -jar target/draw-and-guess-0.0.1-SNAPSHOT.jar
   

4. 访问应用 打开浏览器访问 http://IP:8080 进行游玩

使用说明

1. 创建玩家

   • 在首页输入玩家昵称
   • 点击"创建"按钮注册玩家

2. 房间管理

   • 查看房间列表，点击"刷新列表"获取最新房间
   • 点击"创建房间"创建新房间并成为房主
   • 点击"加入房间"加入已有房间

3. 游戏玩法

   • 进入房间后，玩家可以实时聊天
   • 房主或其他玩家可以在画板上绘画
   • 支持多种颜色、画笔粗细调节
   • 支持橡皮擦功能
   • 可以清空画板重新绘画

4. 题库配置

   • 题库文件位于 resources/topic.json
   • 格式为 JSON 数组，每个元素包含题目和提示
   • 可自行添加或修改题目：

   [
     {"题目名称":"提示信息"},
     {"空调":"日常物品、2个字"}
   ]
   

API 接口说明

玩家接口

• POST /api/player/create - 创建玩家
• GET /api/player/list - 获取玩家列表
• POST /api/player/isExist - 检查玩家是否存在

房间接口

• GET /api/room/list - 获取房间列表
• POST /api/room/create - 创建房间
• POST /api/room/canJoin - 检查是否可加入房间

题目接口

• GET /api/topic/random - 获取随机题目

WebSocket 连接

• 连接地址：ws://IP:8080/websocket/{playerId}/{roomId}
• 消息类型：
  • room-msg - 房间通知消息
  • room-chat - 聊天消息
  • room-draw - 绘画数据
  • room-draw-clear - 清空画板

技术特点

• 基于 Spring Boot 3.2.4 + Java 21 开发
• 使用 WebSocket 实现实时双向通信
• 支持多人在线绘画和聊天
• 前端使用 Canvas 实现绘画功能
• 支持移动端和 PC 端访问