javascript - 通过点击事件移动图像

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)聆听所做的 Action

类似这样的事情

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