# DrawAndGuess

**Repository Path**: bychang/draw-and-guess

## Basic Information

- **Project Name**: DrawAndGuess
- **Description**: "你画我猜"（Draw and Guess）是一种基于图画和猜测的游戏，通常由多名玩家一起参与。游戏的主要目标是根据其他玩家所画的图画来猜测对应的词语或短语。"你画我猜"游戏提供了一种轻松愉快的社交互动方式，通过绘画和猜测的过程，玩家们可以更加自由地交流和沟通。这种互动不仅可以增进玩家之间的感情，还能够帮助他们更好地了解彼此的思维方式和创造力。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-12
- **Last Updated**: 2025-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DAG：新时代年轻人呼唤的纯净社交体验

## 摘要

"你画我猜"（Draw and Guess）是一种基于图画和猜测的游戏，通常由多名玩家一起参与。游戏的主要目标是根据其他玩家所画的图画来猜测对应的词语或短语。"你画我猜"游戏提供了一种轻松愉快的社交互动方式，通过绘画和猜测的过程，玩家们可以更加自由地交流和沟通。这种互动不仅可以增进玩家之间的感情，还能够帮助他们更好地了解彼此的思维方式和创造力。

作为一种轻社交方式，你画我猜往往利用手机小程序进行。然而，现有你画我猜小程序主要面临两个挑战。（1）难以在房间人数与网络延迟间取得平衡，游戏性能低；（2）出题角度刁钻，玩家体验差。为了解决这两个问题，本项目提出一种基于双工通讯的低延迟你画我猜实现方案，提高了游戏性能；并基于用户群体画像与统计决算数据及时调整出题难度，优化玩家体验。

## 引言

游戏规则通常如下：

1. 准备阶段：游戏开始前，确定参与游戏的玩家人数和游戏流程。每个玩家需要准备纸笔或在电子设备上打开绘图工具。
2. 词语选择：从一个词库中随机选择一个词语或短语作为绘画的主题，可以是一般的物体、地点、动作、名词、形容词等等。这个词语只有绘画者知道，其他玩家需要通过观察绘画来猜测这个词语。
3. 绘画阶段：游戏的一名玩家（绘画者）开始绘画，尽可能用简单的线条或图形来表达所选词语的意思。绘画者在规定的时间内画出与所选词语相关的图画，但不能直接写出词语本身或者相关的提示。
4. 猜测阶段：其他玩家观察绘画者的绘画，并尝试猜测绘画所代表的词语。他们可以通过口头或书面的方式提出猜测。通常在规定的时间内，每位玩家只能提出一次猜测。
5. 答案揭晓：当所有玩家都完成了猜测之后，绘画者揭示所选词语，并公布正确答案。如果有玩家猜对了，他们会获得相应的奖励或分数。
6. 轮换角色：游戏结束后，轮换下一位玩家成为绘画者，并重复以上流程。

"你画我猜"游戏通常能够培养玩家的创造力、想象力和沟通能力，同时也提供了一种有趣的互动方式，适合家庭聚会、团队建设和社交活动等场合。

[Wscats等人](https://github.com/Wscats/socket.io)与[jrainlau等人](https://github.com/jrainlau/draw-something)的工作利用socket.io实现多端的你画我猜游戏，但是项目结构简单，所用库落后。两者代码相似度很高，都实现了基础的websocket显示功能，但距离现实可用的你画我猜游戏之间仍存在无房间区分、无法聊天、无法更改画笔颜色等多种问题。

## 设计

项目流程图可见[此处](https://www.processon.com/v/65c9e13d818fec548cbdf054)。

## 代码实现

首先下载相关依赖

```sh
npm install
```

后端需要启动服务器，为游戏提供正常功能，默认8090端口。可以在screen里启动

```sh
node server.cjs
```

编译前端页面，在本地调试时，使用

```sh
npm run dev
```

部署到生产环境中时，使用

```sh
npm run build
```

部署到公网，可以先docker pull一个nginx镜像，然后把项目目录的dist挂载到nginx的目录里，比如以下方式部署后，访问公网4000端口就是访问游戏了。

```sh
run -itd --name=you_draw_we_guess -p 4000:80 -v /root/you_draw_we_guess/dist:/usr/share/nginx/html nginx
```

## 不足

1. 画布大小随屏幕改变，不同设备之间存在显示问题。比如电脑端画布大，超出部分不显示在较小的手机屏幕上。考虑通过缩放的方式进行绘制。
2. 直接从词典里选词，太难
3. 选词时间也计入猜题时间，导致纯粹猜题时间比较短
4. 用户手滑退出房间后默认观战，而手机上极易退出

## CHANGELOG

* 2024-02-15：开放给群友，并修复了一些bug，新增词典 [https://github.com/CNMan/XDHYCD7th](https://github.com/CNMan/XDHYCD7th)
* 2024-02-14：基本完成简易实现。
* 2024-02-12：新建工程，复现Github已有项目代码。