# 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 端访问