用點擊事件移動圖像

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