你画我猜游戏

一个基于 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