你画我猜笔记

一、目标

vue + node 实现你画我猜
先做个手机网页版功能，后续目标是迁移到微信小程序上

二、技术方案

前端主要用到了webSocket + vuex + vuerouter + webpack
后端用 koa2框架 + ws库

三、主要功能

1. 创建私有房间
2. 创建公共房间
3. 邀请好友
4. 匹配功能
5. 排位功能
6. 注册登录
7. 用户分数排名
8. 修改头像名称
9. 选画笔颜色和大小
10. 清除画板
11. 返回上一步操作和进入下一步操作
12. 聊天功能

四、难点

1. canvas 画图
2. webSocket 通信
3. vuex + vuerouter 的应用
4. 数据库的设计

五、本周主要实现的功能

1. 用vue搭建了前端项目和用koa搭建了后端项目
2. 登陆
3. 创建房间
4. 画笔颜色大小
5. 画图通信
6. 目前设计了三张表
   
   

   image.png
   draw_userinfo 保存用户信息
   
   

   image.png
   draw_room 保存房间名 创建时间 状态
   
   

   image.png
   draw_roomuser 保存房间跟用户之间的信息
   
   

   image.png