Question

我正在尝试使用Node.js和Socket.io进行拔河比赛，我对如何继续进行操作感到困惑。我的想法是，如果单击左键，则向左移动图像，如果单击右键，则向右移动图像。为了实际让图像移动，我假设我需要server.js中的一个函数。我该如何实施呢？我的socket.on('tug', function (side) { if(side == "left"){ console.log("left button clicked"); leftPos++; rightPos--; pos[0] = leftPos; pos[1] = rightPos; console.log(pos); } else if (side == "right"){ console.log("right button clicked"); leftPos--; rightPos++; pos[0] = leftPos; pos[1] = rightPos; console.log(pos); } });文件设置如下：

$(document).ready(function(){
    $("#left").on('click', function(){
        socket.emit('tug', 'left');
    });
    $("#right").on('click', function(){
        socket.emit('tug', 'right');
    });
});

然后在我的app.js中我有这个：

["1", "2"]

Answer 1

对于客户端，您应该再添加两个套接字侦听器

1）将球员分配给一方

2）听取所做的动作

类似这样的事情

$(document).ready(function(){
    socket.emit('ready');
});

socket.on('assign', function(side){
    if(side==='left') {
        $("#left").on('click', function(){
            socket.emit('tug', 'left');
        });
    } else {
        $("#right").on('click', function(){
            socket.emit('tug', 'right');
        });
    }
});
socket.on('move', function(newPos){
    $("#rope").css({left: newPos});
});

其中，#rope是你的绳索，也许是position:absolute设置

只是为了简化服务器上的内容，你可以只使用中心并移动它，并在最后定义限制，以决定胜利者

ropeCenter = 300;
socket.on('tug', function (side) {
    if(side == "left"){
        console.log("left button clicked");
        ropeCenter--;
    }
    else if (side == "right"){
        console.log("right button clicked");
        ropeCenter ++; 
    }

    //If you're planning to maintain rooms use io.sockets.in('room').emit below

    if(rope > 100 && ropeCenter<500 )     //Someone must have toppled by now, right?
        io.sockets.emit('move',ropeCenter);     
    else {
        console.log('We have a winner');
        io.sockets.emit('end');
    }
});

assignFirst = true;
socket.on('ready', function(){
   if(assignFirst){
       socket.emit('left');
       assignFirst = false;
   } else {
       socket.emit('right');
   }
});

使用单击事件移动图像

1 个答案: