javascript - js 中的动画有不必要的轻微延迟

Question

我正在使用socket.io和node.js在html5中制作多人游戏，我有两个主要文件:app.js:服务器，Index.html:客户端。我有一个行走动画，需要一些时间才能开始行走。我尝试过在 setInterval 中减少和增加动画的帧速率，甚至编辑图像本身，但没有任何效果。

这是我的代码:

index.html:

  id="ctx"
  width="1920"
  height="1080"
  style="border:1px solid #000000;"
></canvas>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  var img = {};
  img.player = new Image();
  img.player.src = "/client/img/sprite_01_male.png";
  var sx = 0;
  var sy = 0;
  var ctx = document.getElementById("ctx").getContext("2d");
  ctx.font = "30px Arial";

  var socket = io();

  reset_sx = function() {
  if (sx > 96) {
    console.log(sx);
    sx = 0;
  }
}

  socket.on("newPositions", function(data) {
    ctx.clearRect(0, 0, 1920, 1080);
    for (var i = 0; i < data.length; i++)
      ctx.drawImage(img.player, sx, sy, 32, 48, data[i].x, data[i].y, 32, 48);

  });



  document.onkeydown = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: true });
      sx += 32;
      sy = 96;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: true });
      sx += 32;
      sy = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: true });
      sx += 32;
      sy = 48;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: true });
      sx += 32;
      sy = 144;
    }
    // w
    reset_sx();
  };
  document.onkeyup = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: false });
      sx = 0;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: false });
      sx = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: false });
      sx = 0;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: false });
      sx = 0;
    }
    // w
  };
</script>

app.js:

<canvas
  id="ctx"
  width="1920"
  height="1080"
  style="border:1px solid #000000;"
></canvas>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  var img = {};
  img.player = new Image();
  img.player.src = "/client/img/sprite_01_male.png";
  var sx = 0;
  var sy = 0;
  var ctx = document.getElementById("ctx").getContext("2d");
  ctx.font = "30px Arial";

  var socket = io();

  reset_sx = function() {
  if (sx > 96) {
    console.log(sx);
    sx = 0;
  }
}

  socket.on("newPositions", function(data) {
    ctx.clearRect(0, 0, 1920, 1080);
    for (var i = 0; i < data.length; i++)
      ctx.drawImage(img.player, sx, sy, 32, 48, data[i].x, data[i].y, 32, 48);

  });



  document.onkeydown = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: true });
      sx += 32;
      sy = 96;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: true });
      sx += 32;
      sy = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: true });
      sx += 32;
      sy = 48;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: true });
      sx += 32;
      sy = 144;
    }
    // w
    reset_sx();
  };
  document.onkeyup = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: false });
      sx = 0;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: false });
      sx = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: false });
      sx = 0;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: false });
      sx = 0;
    }
    // w
  };
</script>

Answer 1

之所以更新需要时间，主要是因为socket.io的原因。尽管 WebSocket 具有快速连接，但它们可能会出现延迟。因此，客户端将数据发送到服务器，服务器进行计算，然后发送回客户端可能需要时间。

有几种方法可以解决这个问题。一种方法是在客户端进行一些计算。这样您就可以开始行走动画，而无需等待服务器数据。然后，当服务器向客户端发送正式数据时，用该数据替换您当前的数据。

您可能遇到的只是简单的滞后。 Wikipedia有一篇关于延迟的文章，以及解决延迟的方法。

祝您游戏制作顺利。 ☺