使用websocket+vue2完成一个非常有趣的在线游戏作品。你画我猜，相信大家对这个游戏都不陌生。我用Vue2+mint-ui+nodejs+websocket实现了你画我猜的游戏。建议移动端打开效果更好（可以扫描下方二维码），PC端需要使用谷歌开发者模式，然后使用移动端调试工具即可正常使用（主要是一些touchPC不支持的事件）。可以带一两个人一起开个房间试一试，体验一下效果。http://yd.diamondfsd.com主要实现以下功能。大厅功能顶部显示个人信息，显示个人昵称，可以修改。暂时不支持上传头像，头像替换为昵称首字母。暂时使用localStorage存储基本的个人基本信息（昵称，token等）实现更新房间列表，在线人数等信息创建游戏房间房间名称：房间类型：public（可以在游戏大厅看到），private（可通过游戏大厅左上角输入房间号）加入房间公共房间加入：直接在首页游戏大厅房间列表中点击加入私密加入：扫描二维码或输入房间号（二维码由客户端用js生成，暂未实现）房间满后无法加入游戏开始后无法加入房间。您可以稍后加入旁观者功能。当游戏中的玩家人数大于等于2人以上时，即可开始游戏。你可以在房间里聊天。默认第一个进入房间的是主人，主人可以开始游戏。游戏主要功能使用canvas作为画布，通过websocket发送实时动作，使用整张图片数据实现动态手写，与最终图片保持一致。可以修改笔刷颜色、粗细、撤销、还原、清空等操作。每一轮游戏结束后，公布答案，并恢复预设一些快捷短语。游戏过程中，画师不能发短信聊天，其他玩家可以通过发短信猜答案。第一次猜对得3分，第二次猜对得2分。猜对还剩1分。第一次猜测后，游戏时间缩短为30秒。大家猜对后，画家将获得+1分。项目结构本游戏由两个项目组成，一个是前端，一个是服务器前端。github-you-draw-i-guess前端项目由Vue2+mint-ui+vuex+vue-router完成的一个单页app。使用websocket与服务器通信，所有接口均由websocket完成。WebSocket服务器github-ydig-websocket服务器主要使用ws库和babel来支持一些es6语法。服务器托管所有与游戏相关的逻辑和一些数据。但是因为还没有经过足够的测试，肯定还是有很多bug的。另外，没有数据存储，所有的数据都存储在当前运行的服务内存中，所以重启服务后，所有数据都会清空，哈哈，主要是我比较懒，所以没有存储数据。这也是对这个项目的简单介绍，并开源代码供大家参考和研究。那台服务器的负载能力并不大，所以不要想当然。另外，如果有什么bug，可以在github上提issue。更重要的是，欢迎大家贡献代码。虽然真正的工程也是我写的，但还是希望有人看得懂。:)项目源码前端：github-you-draw-i-guessWebSocket服务器：github-ydig-websocket在线演示地址：http://yd.diamondfsd.com在线演示二维码：个人博客：https:///diamondfsd.com总结从整个项目来看，前端、后端、UI、业务逻辑都是我做的。一开始想做一个微信版，用微信登录存储用户数据，后来发现需要企业服务号申请相关接口。然后这个项目暂时停止了。这段时间比较空闲，所以想到了一个简单的解决办法。由于是开放式游戏，完全不需要登录。于是就成了大家一进去就可以玩的项目。微信、QQ、微博都可以打开，只要浏览器支持h5即可。欢迎对项目的各个方面发表评论。能改的地方尽量改，希望大家贡献自己的代码。
