# draw-guess-game

**Repository Path**: thqqqqp/draw-guess-game

## Basic Information

- **Project Name**: draw-guess-game
- **Description**: 基于Vue3、NodeJs、WebSocket实现的多人在线你画我猜游戏，适配多端UI
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-17
- **Last Updated**: 2025-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Pinia, node-js, vue-router, Tailwind-CSS

## README

# 你画我猜游戏

一个基于 Vue3 + Node.js + WebSocket 的实时多人在线绘画猜词游戏。

## 功能特性

- 🎨 **实时绘画同步** - 支持多人实时绘画，画笔轨迹实时同步
- 📱 **响应式设计** - 完美适配手机和电脑端，不同设备间可以互相游戏
- 🏠 **房间系统** - 支持创建和加入房间，最多8人同时游戏
- 📚 **自定义题库** - 内置6个分类题库，支持创建自定义题库
- 💬 **实时聊天** - 游戏内置聊天系统，支持猜词和交流
- 🏆 **计分系统** - 实时计分，猜对加分，绘画者也有奖励
- ⏰ **倒计时** - 每轮60秒限时，增加游戏紧张感

## 技术栈

### 前端
- Vue 3 + TypeScript
- Vite 构建工具
- TailwindCSS 样式框架
- Pinia 状态管理
- Vue Router 路由管理
- Socket.IO Client WebSocket客户端

### 后端
- Node.js + Express
- Socket.IO WebSocket服务
- 内存数据存储
- RESTful API

## 快速开始

### 环境要求
- Node.js 16+
- pnpm 包管理器

### 安装依赖
\`\`\`bash
pnpm install
\`\`\`

### 启动后端服务
\`\`\`bash
pnpm run server
\`\`\`
后端服务将在 http://localhost:3001 启动

### 启动前端开发服务器
\`\`\`bash
pnpm run dev
\`\`\`
前端服务将在 http://localhost:3000 启动

## 游戏规则

1. **创建或加入房间** - 至少需要2个玩家才能开始游戏
2. **轮流绘画** - 每轮随机选择一个玩家作为绘画者
3. **猜词得分** - 其他玩家根据画作猜测词汇
4. **计分规则**：
   - 猜对者：+10分
   - 绘画者：每有人猜对 +5分
5. **游戏结束** - 进行5轮后游戏结束，分数最高者获胜

## 项目结构

\`\`\`
├── src/                    # 前端源码
│   ├── components/         # Vue组件
│   ├── views/             # 页面组件
│   ├── stores/            # Pinia状态管理
│   ├── services/          # API服务
│   ├── types/             # TypeScript类型定义
│   └── router/            # 路由配置
├── server/                # 后端源码
│   ├── index.js           # 服务器入口
│   ├── gameManager.js     # 游戏逻辑管理
│   └── wordBankManager.js # 题库管理
└── public/                # 静态资源
\`\`\`

## 开发说明

### 添加新题库
1. 访问 `/wordbanks` 页面
2. 点击"创建题库"
3. 输入题库名称和词汇列表
4. 支持单个添加或批量导入

### 自定义游戏设置
- 修改 `server/gameManager.js` 中的 `maxRounds` 调整游戏轮数
- 修改倒计时时间在 `startRoundTimer` 函数中
- 调整房间最大人数在 `joinRoom` 方法中

## 部署

### 生产环境构建
\`\`\`bash
pnpm run build
\`\`\`

### 环境变量
- `PORT` - 服务器端口（默认3001）

## 贡献

欢迎提交 Issue 和 Pull Request！

## 许可证

MIT License