Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏
使用 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://my.oschina.net/diamondfsd/blog/843165
Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏相关推荐
- php 游戏开发swoole,Swoole+websocket多人在线游戏示例
利用Swoole,可以使用PHP来开发Websocket服务器,实现多人在线游戏.本文通过一个最简单的摇骰子游戏来介绍Server端(由PHP+Swoole实现)和Client端(由H5+Websoc ...
- 使用websocket实现“你画我猜”
1,环境配置(nodejs) 文件结构: package.json: {"name": "websocket","version": &qu ...
- 你画我猜小游戏接入方法
近年来,越来越多的小游戏走进了大众视野,你画我猜这款小游戏以其互动性和趣味性吸引了许多年轻用户,是当中比较流行的小游戏.因此,可以选择在产品中嵌入这类小游戏来吸引用户留存和促活,带动产品的流量. 你画 ...
- canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
- 腾讯云搭建多终端《你画我猜》Socket服务器
项目概述 Java课大作业,做一个小游戏,三人Git协作,不同终端,一个分支三个文件夹互不影响.Demo地址 ,Github地址.先来目睹一下吧! 原理图 当玩家1在使用画笔在画板上进行绘图工作时,把 ...
- 基于 socket.io 实现实时你画我猜游戏
前言 一直都想好好的学习运用node,一直都不知道要做什么东西,最近Java Web老师要求做个前端的应用,既然是前端应用,那肯定得是单页应用了,而且node很适用于高并发的实时应用,所以便选择nod ...
- nodejs websocket 实现简易聊天室功能
文章目录 1. 服务端 app.js 代码 2. 客户端 app.html 代码 3. 样式代码 app.css 4. nodemon 辅助开发 首先说明,以下代码都是基于 Nodejs+webSoc ...
- webrtc+canvas+socket.io从零实现一个你画我猜 | 掘金技术征文
开场白 最近键盘坏了,刚好看到掘金有声网的技术征文,想整个键盘.于是就开始从零开始学习webrtc, 一开始看文档就是个素质三连.这么难啊,这咋整啊,这谁顶的住啊.于是就开始全网找资料,很幸运的在掘金 ...
- 上一局APP玩,你画我猜,作为灵魂画手从没服过谁
有很多闲暇的时候总想去玩游戏,因此在一局上面开始玩小游戏.还别说一玩就上瘾,这个游戏也太容易让人去接受他了,因为玩游戏的时候感受到这个游戏的过程还挺快乐,而且玩你画我猜的时候,让自己的感受特别明显.我 ...
最新文章
- 《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象
- Html引入百度富文本编辑器ueditor
- Oracle 12C R2-新特性-转换函数的增强
- Matlab去掉矩阵中的全0行或列
- dede设置当前栏目的样式
- 网络操作系统课后练习第三章
- 读书笔记之inside JVM(4)
- html5 crop,HTML5内联SVG autocrop空格
- Vue使用阿里矢量图标库
- 上传本地项目到码云仓库【图文详解】
- 超详细mac新手教程,让你离熟练操作mac只需十分钟!
- 邮件工具-MailUtil(发送邮件)
- 用python画花球_只靠一把小小剪刀!她把这些花养成了花球!
- python大神能干什么_Python这么火,能干什么?这四大主要用途是你必须得知道的!...
- Python matplotlib 通过 plt.scatter画空心圆标记出特定的点
- LC160. 相交链表
- matomo安装及使用
- CleanMyMac清理垃圾时不断重复输入密码解决方法
- 当面试官说刚入职工资不高时该怎么回答呢
- 软件设计与体系结构实验报告