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

Question

我正在 html5 使用 socket.io 和 node.js 制作多人游戏，我有两个主要文件：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。尽管 WebSockets 具有快速连接，但它们可能会变得迟缓。所以客户端将数据发送到服务器，服务器进行计算并返回给客户端可能需要时间。

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

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

祝你游戏制作顺利。 ☺

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

Animation in js has unwanted slight delay

html

javascript

animation

frame-rate

delay