一个类似 Skribbl.io 的网页版「你画我猜」游戏。玩家通过房间码加入同一个房间，轮流当画手作画，其他人在聊天框打字猜词，根据速度计分，多轮后决出胜负。支持手机和电脑浏览器，可部署到公网让朋友通过链接加入。
- 🎮 完整游戏循环：大厅 → 选词 → 作画猜词 → 轮次结算 → 排行榜，3 轮分胜负
- 🖌️ 实时绘画同步：画手的笔画实时广播给所有玩家，支持鼠标和触屏
- 🌈 绘画工具：12 色调色板、3 档笔刷、橡皮擦、一键清空
- 💬 聊天 + 猜词：所有人可聊天；猜对自动识别并加分，不透露答案
- ⏱️ 倒计时 & 提示：作画限时 80 秒；半程后给猜词者显示首字提示
- 🏆 动态计分：越早猜对得分越高；画手每有人猜对也得分
- 🔗 房间码邀请：4 位房间码，点击复制分享链接
- 📱 移动端适配：响应式布局，手机也能玩
- 🔌 断线自动重连：基于 Socket.io，刷新/掉线可重新加入并恢复画布
- 📦 零数据库：数据全在内存，单进程即可运行，部署极简
- Node.js ≥ 18（推荐 20 LTS 或更新）—— 下载地址
# 1. 安装依赖
npm install
# 2. 启动服务器
npm start
# 3. 打开浏览器访问
# http://localhost:3000打开多个浏览器标签页（或让朋友用同一局域网的设备访问 http://<你的IP>:3000），创建房间后把房间码分享出去即可开玩。
npm run dev- 创建房间：输入昵称 → 创建房间 → 获得 4 位房间码
- 邀请朋友：点击房间码复制邀请链接，朋友打开链接输入昵称即可加入（2-8 人）
- 开始游戏：房主点击「开始游戏」
- 轮流作画：
- 被选中的画手从 3 个词中选一个，限时 15 秒
- 画手用工具栏作画，限时 80 秒
- 其他人在右侧输入框打字猜词
- 计分：越早猜对分越高（基础 50 + 剩余秒数×2）；画手每有一人猜对加 40 分
- 决出胜负：所有人各画 3 轮（默认）后，按总分排名
| 层 | 技术 | 说明 |
|---|---|---|
| 运行时 | Node.js | 服务端 JavaScript |
| HTTP 服务 | Express | 托管静态资源 |
| 实时通信 | Socket.io | 房间/广播/断线重连 |
| 前端 | 原生 HTML/CSS/JS | 零构建，Canvas API 绘画 |
| 数据 | 内存 | 无数据库，进程重启即清空 |
tyagame/
├── server.js # 入口
├── src/
│ ├── server.js # Express + Socket.io 配置
│ ├── socketHandler.js # 实时事件处理（timer 管理在此）
│ ├── rooms.js # 房间管理器
│ └── game/
│ ├── Game.js # 房间游戏状态机（纯状态转换）
│ ├── Player.js # 玩家模型
│ └── words.js # 中文词库
├── public/ # 前端（浏览器加载）
│ ├── index.html # 首页（创建/加入房间）
│ ├── room.html # 游戏房间页
│ ├── css/
│ │ ├── common.css # 全局样式
│ │ └── game.css # 游戏页样式
│ └── js/
│ ├── landing.js # 首页逻辑
│ ├── game.js # 房间主逻辑（UI 状态协调）
│ ├── canvas.js # 画布绘制 + 网络同步
│ └── chat.js # 聊天/猜词面板
├── test/
│ └── e2e.js # 端到端冒烟测试
└── package.json
本项目是单进程 Node 应用，任何支持 Node 的平台都能部署。
- 把代码推到 GitHub 仓库
- 在 render.com 新建 Web Service，连接仓库
- 配置：
- Build Command:
npm install - Start Command:
npm start
- Build Command:
- 部署完成后获得
https://你的应用.onrender.com，分享给朋友即可
流程类似，参考各平台 Node.js 部署文档。
# 服务器上
git clone <你的仓库>
cd tyagame
npm install --production
PORT=80 npm start建议配合 nginx 反向代理 + pm2 守护进程 + HTTPS 证书。
| 变量 | 默认值 | 说明 |
|---|---|---|
PORT |
3000 |
服务监听端口（部署平台通常会自动注入） |
# 先启动服务器
npm start
# 另开终端运行端到端测试（模拟 2 个玩家走完整局）
node test/e2e.js测试会验证：创建/加入房间、选词、作画、绘画同步、猜对、计分、游戏结束等核心环节。
修改 src/game/Game.js 顶部的常量：
const TIMING = {
SELECTING: 15, // 选词限时（秒）
DRAWING: 80, // 作画限时（秒）
ROUND_END: 5, // 轮次结算展示（秒）
};
const SCORE = {
GUESSER_BASE: 50, // 猜对基础分
GUESSER_TIME: 2, // 每剩余 1 秒额外加分
DRAWER_PER: 40, // 画手每有人猜对得分
};
this.maxRounds = 3; // 在 Game 构造函数里改轮数修改词库：编辑 src/game/words.js，按 easy / medium / hard 分类添加。
Q: 朋友无法加入？
- 确认房间码正确（4 位，不区分大小写）
- 本地开发时，朋友需和你在同一局域网，且用你的内网 IP（不是 localhost）
- 公网部署后，直接分享邀请链接最方便
Q: 画的东西别人看不到？
- 只有当前画手能画；确认你是画手（玩家列表里有「画」标记）
- 检查网络连接，Socket.io 会自动重连
Q: 能多少人玩？
- 建议 2-8 人。代码限制单房间最多 8 人。
- 自定义词库 / 玩家上传词包
- 自定义回合数、时长的房间设置
- 头像上传
- 排行榜持久化（加数据库）
- TypeScript 重构
- Redis adapter 支持多实例横向扩展
MIT