使用点击事件移动图像

Question

我正在尝试使用 Node.js 和 Socket.io 进行拔河比赛，但我对应该如何进行感到困惑。我的想法是如果单击左键则向左移动图像，如果单击右键则向右移动。为了真正让图像移动，我假设我需要app.js 中的一个函数。我应该如何实施呢？我的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);
    }
});

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

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

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');
   }
});