基于 socket.io 实现实时你画我猜游戏

jsummer 发布于2019-08-21 10:53 / 3094人阅读

摘要：演示地址实时画板聊天室你画我猜聊天室图片抢先看解释关于是基于实现的套接字前端后端数据交互的库，通过它的封装，使用者可以很方便的开发，而且支持长轮询等方法，兼容低版本浏览器。最后推荐一个实时的更加优秀的游戏。

前言

一直都想好好的学习运用node，一直都不知道要做什么东西，最近Java Web老师要求做个前端的应用，既然是前端应用，那肯定得是单页应用了，而且node很适用于高并发的实时应用，所以便选择node以及基于node的socket.io。

演示地址

实时画板+聊天室（GitHub）

你画我猜+聊天室（Demo | GitHub）

图片抢先看

解释关于Socket.IO

Socket.IO 是基于node实现的套接字前端后端数据交互的库，通过它的封装，使用者可以很方便的开发，而且支持websocket/ajax 长轮询等方法，兼容低版本浏览器。

基本使用如下：

服务器端

var httpd = require("http").createServer(handler);
var io = require("socket.io").listen(httpd);
function handler(req,res) {
    
}
io.sockets.on("connection",function(socket){
    //新的客户端连接
    socket.on("login",(name,age)=>{
        socket.emit("message",name+","+age);//触发客户端message事件
    })
});

客户端

引入js文件

进行交互

var socket = io.connect();      //触发服务器端connection事件
socket.emit("login","moyu",20); //触发服务器端login事件
socket.on("message",function(msg){
    alert(msg);
})

关于排行榜

利用了js的匿名立即执行函数进行模块化包装

var tops = (function () {
    /*
     * _tops : 存放所有id,按照回答正确数倒序排列
     * idmap : 一个hash map结构，key为id，value为名字与回答正确数
     * n : 前n个，在toJSON调用
     */
    var _tops = [],idmap={},n=10;
    return {
        set : function (id,name,v) {
            if(this.isExists(id))//如果id已经存在则删除，防止出现重复id
                this.remove(id);
            // 找到按照v从大到小所对应的位置
            var i = _tops.findIndex(x=>{return idmap[x].v{
                if(i>=n) return false;
                arr.push({id:x,v:idmap[x].v,name:idmap[x].name});
                return true;
            });
            return arr;
        }
    }
}());

关于Bootstrap栅格

.container{
    margin-right: auto;
    margin-left: auto;
    //防止最外层的.row元素左右扩展15px
    padding-left: 15px;
    padding-right: 15px;
}

.col-3{
    width: 30%;
}
.col-4{
    width: 40%;
}
.col-9{
    width: 90%;
}

/.../

.row{
    /* 向外左右延伸15px */
    margin-right: -15px;
    margin-left: -15px;
}
/* 防止子元素为float,父元素的高度为0 */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9{
    padding-left: 15px;
    padding-right: 15px;
    float:left;
}

HTML结构

关于一栏（多栏）宽度固定，一栏自适应

圣杯布局

双飞翼

感受

...做单页应用真的需要挺大的心脏，而且需要较好的整体的架构，好在socket.io对websocket封装的不错，变成了面向消息的方式，代码结构相对更加清晰了些。

...不敢想象用Java做这种实时单页应用后端会有多么的「拗口」。最后推荐一个实时的更加优秀的游戏：slithe。

GPU云服务器云服务器你画我猜 webrtc php你画我猜源码你画我猜服务器你画我猜怎么调服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86362.html

聊一聊Web端的即时通讯

摘要：聊一聊端的即时通讯端实现即时通讯的方法有哪些短轮询长轮询流轮询客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接。介绍是开始提供的一种在单个连接上进行全双工通讯的协议。聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询长轮询 iframe流 Flash Socket 轮询客户端定时向服务器发送Ajax请求，服务器接到请求后马上返...

KevinYan 2019-08-22 18:00 评论0 收藏0
Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏

摘要：使用即可完成一个很有意思的在线游戏作品。你画我猜，相信大家对这个游戏都很熟悉。我用实现了你画我猜这个游戏。可以修改画笔颜色，粗细，进行撤销，恢复，清空等操作。第一个猜完后，游戏时间缩短为秒。使用 websocket + vue2 即可完成一个很有意思的在线游戏作品。你画我猜，相信大家对这个游戏都很熟悉。我用Vue2 + mint-ui + nodejs + websocket ...

XanaHopper 2019-08-20 14:29 评论0 收藏0
使用 Taro 写一个你画我猜的小程序

摘要：选择技术类型微信小程序使用功能不多就不是使用了后台用写，使用选来做。这里使用做画布是有问题的，它不支持。游戏同步问题，这里用状态同步的方法。最后使用的还是挺爽的选择技术类型微信小程序使用Taro（功能不多就不是使用Redux了）,后台用php写，websocket使用选workman来做。这里使用Taro做画布是有问题的，它不支持h5。选型的问题 taro 不支持画布的H5...

jkyin 2019-08-23 16:47 评论0 收藏0
使用 Taro 写一个你画我猜的小程序

摘要：选择技术类型微信小程序使用功能不多就不是使用了后台用写，使用选来做。这里使用做画布是有问题的，它不支持。游戏同步问题，这里用状态同步的方法。最后使用的还是挺爽的选择技术类型微信小程序使用Taro（功能不多就不是使用Redux了）,后台用php写，websocket使用选workman来做。这里使用Taro做画布是有问题的，它不支持h5。选型的问题 taro 不支持画布的H5...

TANKING 2019-07-01 12:39 评论0 收藏0