Javascript 高效地跟踪客户端和服务器上的坐标

我正在尝试使用WebSocket、node和JavaScript创建一个多人游戏。更新客户端和跟踪服务器上客户端坐标的最佳方法是什么。我目前的方法可行，但效率很低。（我能听到我的笔记本电脑风扇旋转了很多lol！）

那么发生了什么： 服务器正在等待客户端发送一条消息“startmove”，该消息也包含方向。一旦服务器收到此消息，它将开始移动播放机并广播其位置。如果服务器收到消息“stopmoving”，该消息还包含一个方向。。。它停止向那个方向移动

我的问题: 我可以使用任何调整来提高性能吗

服务器代码段 客户端代码片段 在浏览器中：

---

使用时间戳跟踪玩家在服务器上移动的时间

以下是我在服务器端的工作方式：

var player =  {     x: 100, 
                    y: 200,
            direction: -1,
         moving_since: 0
              }
var count = 0;

io.sockets.on('connection', function(client){
    ++count;
    io.sockets.emit('player_count', count);
    io.sockets.emit('connect', { "x" : player.x, "y" : player.y });

    client.on('disconnect', function () {  
      --count;
      io.sockets.emit('player_count', count);
    });


    client.on('startmove', function(d){
      player.direction = d.d;
      player.moving_since = Date.now();   
    });    

    function adjustCoord(){
      player.direction = -1;
      var now = Date.now();
      if( player.direction == 0){
          player.x = player.x - ((now - player.moving_since) / 33);
      }
      else if( player.direction == 1){
          player.y = player.y + ((now - player.moving_since) / 33);
      }
      else if( player.direction == 2){
          player.x = player.x + ((now - player.moving_since) / 33);
      }
      else if( player.direction == 3){
          player.y = player.y - ((now - player.moving_since) / 33);
      }
    }

    client.on('stopmove', adjustCoord);

    setInterval(loop, 15); // 33 milliseconds = ~ 30 frames per sec

    function loop() {
      if ( player.direction != -1){
          var prevDir = player.direction;
          adjustCoord();
          player.direction = prevDir;
      }

      io.sockets.emit('position', {"x" : player.x, "y" : player.y });
    }    
});

---

您意识到

startmove

和

stopmove

不会自行修复延迟。因此，每个客户都看到了完全不同的东西inputs@Raynos，我不知道你所说的自我修复是什么意思，但目前这个游戏基本上是单人游戏。我正试图找出一种有效更新我在屏幕上绘制的对象位置的方法，我将上传一张图片到我的问题中。看起来你是对的，但显然Date.now（）确实有效。我已经尝试了这段代码，并修复了一些小的语法问题。但是，它似乎不会移动客户端对象。将方向更改为player.direction，将日期更改为new date（）。您是否检查了服务器是否正在更新坐标并发送它们？尝试并隔离未更新的段。

$(document).ready(function(){
  var canvas = document.getElementById('game'),
      ctx    = canvas.getContext('2d'),
      socket = io.connect('http://localhost'); 

  //Only start the game upon receiving the connect message
  socket.on('connect', function(data){      
    var y = data.y;
    var x = data.x;

        //Constants
    var GAME_WIDTH = $('canvas').width(),
        GAME_HEIGHT = $('canvas').height();

    var Player = function(x,y,w,h){
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
    };  

    var Game = new function(){

      var player   = new Player(x, y, 100, 100),   
          left     = false,
          right    = false,
          up       = false,
          down     = false;

      /* Gather player input */      
      $(document).keydown(function(event) 
      {
        if ( event.keyCode == 37) //Left
        { 
          socket.emit('startmove', {"d" : 0});
          return false;
        } 
        else if (event.keyCode == 38) //Up
        { 
          socket.emit('startmove', {"d" : 1});
          return false;
        } 
        else if (event.keyCode == 39) //Right
        {
          socket.emit('startmove', {"d" : 2});
          return false;
        } 
        else if (event.keyCode == 40) //Down
        {
          socket.emit('startmove', {"d" : 3});
          return false;
        }   
      });

      $(document).keyup(function(event)
      {
        if ( event.keyCode == 37)  //Left
        { 
          socket.emit('stopmove', {"d" : 0});
          return false;
        } 
        else if (event.keyCode == 38) //Up
        {
          socket.emit('stopmove', {"d" : 1});
          return false;
        } 
        else if (event.keyCode == 39) //Right
        {
          socket.emit('stopmove', {"d" : 2});
          return false;
        } 
        else if (event.keyCode == 40) //Down
        {
          socket.emit('stopmove', {"d" : 3});
          return false;
        }
      });

      socket.on('position', function(data){
        console.log("x: " + data.x + "\ny: " + data.y);
        player.x = data.x;
        player.y = data.y;
        clear();
        draw();
      });

      /* Clear the canvas */
      function clear(){
        ctx.clearRect(0,0,GAME_WIDTH, GAME_HEIGHT);
      }

      /* Draw to the canvas */
      function draw(){
        ctx.fillRect(player.x, player.y, player.w, player.h);
      }
    }();
  });
});

var player =  {     x: 100, 
                    y: 200,
            direction: -1,
         moving_since: 0
              }
var count = 0;

io.sockets.on('connection', function(client){
    ++count;
    io.sockets.emit('player_count', count);
    io.sockets.emit('connect', { "x" : player.x, "y" : player.y });

    client.on('disconnect', function () {  
      --count;
      io.sockets.emit('player_count', count);
    });


    client.on('startmove', function(d){
      player.direction = d.d;
      player.moving_since = Date.now();   
    });    

    function adjustCoord(){
      player.direction = -1;
      var now = Date.now();
      if( player.direction == 0){
          player.x = player.x - ((now - player.moving_since) / 33);
      }
      else if( player.direction == 1){
          player.y = player.y + ((now - player.moving_since) / 33);
      }
      else if( player.direction == 2){
          player.x = player.x + ((now - player.moving_since) / 33);
      }
      else if( player.direction == 3){
          player.y = player.y - ((now - player.moving_since) / 33);
      }
    }

    client.on('stopmove', adjustCoord);

    setInterval(loop, 15); // 33 milliseconds = ~ 30 frames per sec

    function loop() {
      if ( player.direction != -1){
          var prevDir = player.direction;
          adjustCoord();
          player.direction = prevDir;
      }

      io.sockets.emit('position', {"x" : player.x, "y" : player.y });
    }    
});