121 lines
3.5 KiB
Markdown
121 lines
3.5 KiB
Markdown
# 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` 变量为实际的服务器地址：
|
||
```javascript
|
||
const backendAddr = "192.168.31.222:8080" // 修改为你的服务器IP和端口
|
||
```
|
||
|
||
2. **编译打包**
|
||
```bash
|
||
# 使用 Maven Wrapper 编译打包
|
||
mvnw clean package
|
||
|
||
# 或使用本地 Maven
|
||
mvn clean package
|
||
```
|
||
打包完成后，在 `target` 目录下会生成 `draw-and-guess-0.0.1-SNAPSHOT.jar`
|
||
|
||
3. **运行应用**
|
||
```bash
|
||
# 直接运行
|
||
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 数组，每个元素包含题目和提示
|
||
- 可自行添加或修改题目：
|
||
```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 端访问
|
||
|