用点击事件移动图像

我正在尝试一个使用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'); } });