摘要：使用即可完成一个很有意思的在线游戏作品。你画我猜，相信大家对这个游戏都很熟悉。我用实现了你画我猜这个游戏。可以修改画笔颜色，粗细，进行撤销，恢复，清空等操作。第一个猜完后，游戏时间缩短为秒。
使用 websocket + vue2 即可完成一个很有意思的在线游戏作品。
你画我猜，相信大家对这个游戏都很熟悉。
我用Vue2 + mint-ui + nodejs + websocket 实现了你画我猜这个游戏。
建议移动端打开效果更佳(可扫下方二维码)，PC端需要使用谷歌开发者模式，然后使用移动调试工具，才可以正常使用（主要是一些touch事件，pc不支持）。
大家可以拉上一两个人，来开个房间试试看，体验体验效果。
http://yd.diamondfsd.com
主要实现了以下这些功能
大厅功能个人信息显示
顶部显示个人昵称，可以修改
暂时不支持上传头像，头像用昵称第一个字母代替
暂时使用 localStorage 储存基本基本个人信息（昵称,token等）
实施更新房间列表，在线人数等信息
创建游戏房间
房间名称:
房间类型：公开（可以在游戏大厅被看到），私有（可以通过游戏大厅左上角查找房间号进入）
加入房间
公开房间加入： 直接在首页游戏大厅的房间列表里面点击加入即可
私密房间加入： 扫秒二维码或者输入房间号 （二维码由客户端使用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-guess
WebSocket 服务端: github-ydig-websocket
在线演示地址: http://yd.diamondfsd.com
在线演示二维码:
个人博客: https://diamondfsd.com
总结从整个项目来说，前端，后端，UI，业务逻辑，都是我苦思冥想做出来的。刚开始是想做微信版的，使用微信登录来储存用户数据，可是后来发现必须要企业服务号才能申请到相关接口。然后项目就停了一段时间。
这段时间比较空闲了，就想了一个简单的办法，既然是一个开放式的游戏，就根本不需要登录呀。所以变成了人人进入就可以玩的一个项目。 可以从微信打开，qq打开，微博打开，只要支持h5的浏览器都可以打开。
欢迎大家对项目的各方面做出的评价。 能改的地方尽量会改，也希望大家贡献自己的代码。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81673.html
摘要：选择技术类型微信小程序使用功能不多就不是使用了后台用写，使用选来做。这里使用做画布是有问题的，它不支持。游戏同步问题，这里用状态同步的方法。最后使用的还是挺爽的 选择技术类型 微信小程序使用Taro（功能不多就不是使用Redux了）,后台用php写，websocket使用选workman来做。 这里使用Taro做画布是有问题的，它不支持h5。 选型的问题 taro 不支持画布的H5...
摘要：选择技术类型微信小程序使用功能不多就不是使用了后台用写，使用选来做。这里使用做画布是有问题的，它不支持。游戏同步问题，这里用状态同步的方法。最后使用的还是挺爽的 选择技术类型 微信小程序使用Taro（功能不多就不是使用Redux了）,后台用php写，websocket使用选workman来做。 这里使用Taro做画布是有问题的，它不支持h5。 选型的问题 taro 不支持画布的H5...
摘要：演示地址实时画板聊天室你画我猜聊天室图片抢先看解释关于是基于实现的套接字前端后端数据交互的库，通过它的封装，使用者可以很方便的开发，而且支持长轮询等方法，兼容低版本浏览器。最后推荐一个实时的更加优秀的游戏。 前言 一直都想好好的学习运用node，一直都不知道要做什么东西，最近Java Web老师要求做个前端的应用，既然是前端应用，那肯定得是单页应用了，而且node很适用于高并发的实时应...
摘要：聊一聊端的即时通讯端实现即时通讯的方法有哪些短轮询长轮询流轮询客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接。介绍是开始提供的一种在单个连接上进行全双工通讯的协议。 聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询 长轮询 iframe流 Flash Socket 轮询 客户端定时向服务器发送Ajax请求，服务器接到请求后马上返...
阅读 1718·2021-11-18 10:02
阅读 3496·2021-11-16 11:45
阅读 1747·2021-09-10 10:51
阅读 2041·2019-08-30 15:43
阅读 1345·2019-08-30 11:23
阅读 1445·2019-08-29 11:07
阅读 1860·2019-08-23 17:05
阅读 1314·2019-08-23 16:14
