Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/407.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 节点/套接字IO多个播放器_Javascript_Node.js_Socket.io - Fatal编程技术网

Javascript 节点/套接字IO多个播放器

Javascript 节点/套接字IO多个播放器,javascript,node.js,socket.io,Javascript,Node.js,Socket.io,我正在使用node&socketi IO创建一个简单的多人游戏。当一个新的客户端加入时,我创建了一个新的HTML元素,其ID是每个clients socket.ID 客户端是移动设备,当它们移动时,我会发送“deviceorientation”值,希望让每个客户端控制一个HTML元素。但是我做了一些不正确的事情,我不太清楚,因为所有发生的事情都是所有的客户端都在争夺对最新HTML元素的控制权,而不是用自己的套接字id控制HTML元素 在服务器上: servio.on('connection',

我正在使用node&socketi IO创建一个简单的多人游戏。当一个新的客户端加入时,我创建了一个新的HTML元素,其ID是每个clients socket.ID

客户端是移动设备,当它们移动时,我会发送“deviceorientation”值,希望让每个客户端控制一个HTML元素。但是我做了一些不正确的事情,我不太清楚,因为所有发生的事情都是所有的客户端都在争夺对最新HTML元素的控制权,而不是用自己的套接字id控制HTML元素

在服务器上:

servio.on('connection', function (socket) {

    servio.sockets.emit('newplayer',socket.id);

    socket.on('move', function(data) {
        socket.broadcast.emit('clientmove', data);
        console.log(data.myid);
    });

});
在客户机上:

iosocket.on('newplayer', function(data) {
            myid    =   data;
            $('body').append('<div class="dot _jsDot" id="'+myid+'"></div>');
        });

window.addEventListener("deviceorientation", handleOrientation, true);

        function handleOrientation(event) {
            var absolute = event.absolute;
            var alpha    = event.alpha;
            var beta     = event.beta;
            var gamma    = event.gamma;

            vals = {
                betaVal     : beta,
                gammaVal    : gamma,
                myid        : myid
            }

            iosocket.emit('move', vals);
        }

        iosocket.on('clientmove', function(data) {

            var x = Math.round(data.gammaVal)*3;
            var y = Math.round(data.betaVal)*3;

            $('#'+data.myid+'').css({'left':x + $(window).outerWidth()/2});
            $('#'+data.myid+'').css({'top':y + $(window).outerHeight()/2});

        });
iosocket.on('newplayer',函数(数据){
myid=数据;
$('body')。追加('');
});
window.addEventListener(“deviceorientation”,handleOrientation,true);
功能手柄方向(事件){
var absolute=event.absolute;
var alpha=event.alpha;
varβ=事件β;
var gamma=事件gamma;
VAL={
贝塔瓦:贝塔,
伽玛瓦尔:伽玛,
myid:myid
}
iosocket.emit('move',vals);
}
iosocket.on('clientmove',函数(数据){
var x=数学圆整(data.gammaVal)*3;
var y=数学四舍五入(data.betaVal)*3;
$('#'+data.myid+'').css({'left':x+$(window.outerWidth()/2});
$('#'+data.myid+'').css({'top':y+$(window.outerHeight()/2});
});

我希望我忽略了一些小事情,而不是一些基本的混乱。如果任何对node&socket io更有经验的人都能提供一些建议,那就太好了。

您正在将每个人的
myid
更新为新玩家的id。我建议您区分两者

在服务器上执行以下操作:

everyone.push(socket.id); // global array of all player ids
socket.emit('init',[socket.id,everyone]);
servio.sockets.emit('newplayer',socket.id);
socket.on('newplayer', function(data) {
    myid = data.id;
    create_div_with(data.id);
    create_everyone_else(data.everyone);
});
socket.on('newplayer', function(id) {
    create_div_with(id);
});
在客户端上,执行以下操作:

everyone.push(socket.id); // global array of all player ids
socket.emit('init',[socket.id,everyone]);
servio.sockets.emit('newplayer',socket.id);
socket.on('newplayer', function(data) {
    myid = data.id;
    create_div_with(data.id);
    create_everyone_else(data.everyone);
});
socket.on('newplayer', function(id) {
    create_div_with(id);
});

如果您使用Chrome/Firefox中的Dev工具查看源代码(右键单击->检查元素),那么元素是否具有正确的id,或者它们是否都具有id=“undefined”或类似的id?可能就是这么简单。myid是一个全局变量吗?因为它看起来像是您在连接新客户机时覆盖客户机id