Javascript HTML5画布游戏优化

以下是我编写的示例代码，旨在说明我在游戏中处理某些事情：

一点说明：这是一个简单的棋盘游戏。首先，画布被设置为棋盘尺寸本身，以便正确获得坐标xy（这在这里不有用，但在我的实际游戏中是的）

然后根据播放器的窗口，根据原始板图像的实际比例调整大小。保持比率对于图像质量很重要。 现在，移动是通过函数中的一个简单计时器完成的，一旦到达某个X和Y，移动就会停止

在某些浏览器和设备（比如cordova应用程序）中，我很难让圆圈的移动不间断/滞后，尽管它通常工作正常。我知道滞后是由我处理事情的方式造成的，但为什么呢？

---

另外，我很难保持移动速度恒定-+3在每个浏览器中的移动速度似乎都不一样。

在大多数情况下，基于JavaScript的动画应该使用

requestAnimationFrame

，以避免不稳定。使用这种技术，位置是时间的函数，而不是发生多少执行帧。这样，速度快的计算机将比速度慢的计算机拥有更多的动画帧，但您仍然可以感知相同的动画速度。例如：

var x = 10, y = 10;

var startPos = 10;
var destPos = 310;
var startTime = Date.now();
var velocity = 0.1; // pixels per millisecond
var distance = destPos - startPos;
var duration = Math.abs(distance) / velocity;

requestAnimationFrame(startMoving);

function startMoving(now) {
  var elapsedTime = Math.min(now - startTime, duration);
  y = startPos + (elapsedTime * velocity);
  ctx.clearRect(0,0,750,587);
  ctx.drawImage(board, 0, 0);
  ctx.drawImage(circle, x, y);

  if (elapsedTime < duration)
    requestAnimationFrame(startMoving);
}

var x=10，y=10；
var startPos=10；
var=310；
var startTime=Date.now（）；
var速度=0.1；//每毫秒像素数
var距离=destPos-startPos；
var持续时间=数学abs（距离）/速度；
请求动画帧（开始移动）；
功能启动移动（现在）{
var elapsedTime=Math.min（现在-开始时间，持续时间）；
y=开始时间+（延迟时间*速度）；
ctx.clearRect（0,0750587）；
ctx.drawImage（板，0,0）；
ctx.drawImage（圆形，x，y）；
如果（elapsedTime<持续时间）
请求动画帧（开始移动）；
}

也许可以看看requestAnimationFrame（），在不使用setTimeout（）的情况下，看看我如何使用我的示例集成它？看看这里，看看如何节流（每秒60帧是一个好目标）：我发现了一个随机的非节流JSFIDLE，它使用画布，但当然要使用您的代码：与您的问题无关，但是，在对图像进行任何操作之前，不要忘记预加载图像。也许我错了，但是如果我需要图像移动一定距离，并且持续时间已经结束，因为浏览器速度慢，图像将只是传送到那里，而不是完成其路线，不？是的，没错。换句话说，可以设置动画的长度或速度。如果计算机的速度只够制作一个动画帧，那么您将看到的就是这些。但这不太可能。这可能是个问题，因为我需要玩家看到他在新位置的移动。不过我不介意他有更大的跳跃，每次跳跃都会移动x像素，速度慢的浏览器会有更少的跳跃。可能吗？这正是代码的作用。远程传送只是一个非常慢的浏览器，只需一次跳转。我不会因为边缘条件而挂断电话。因为我太累了，无法尝试将它与我的真实代码集成（它太大了），我只想明天让你知道，谢谢！

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width = 750; //keeping ratio
canvas.height = 587; //keeping ratio

$('#canvas').css("height", window.innerHeight);
$('#canvas').css("width",  window.innerHeight * 1.277); //keeping the ratio
//and also resizing according to the window(not to overflow)

var board = new Image();
board.src = "https://s21.postimg.org/ko999yaaf/circ.png";
var circle = new Image();
circle.src = "https://s21.postimg.org/4zigxdh7r/circ.png";
ctx.drawImage(board, 0, 0);

var x = 10, y = 10;
ctx.drawImage(circle, x, y);
startMoving();

function startMoving(){
      if(y > 310) return;
    y+=3;
    ctx.clearRect(0,0,750,587);
    ctx.drawImage(board, 0, 0);
      ctx.drawImage(circle, x, y);
    setTimeout(function(){startMoving()}, 30);
}

var x = 10, y = 10;

var startPos = 10;
var destPos = 310;
var startTime = Date.now();
var velocity = 0.1; // pixels per millisecond
var distance = destPos - startPos;
var duration = Math.abs(distance) / velocity;

requestAnimationFrame(startMoving);

function startMoving(now) {
  var elapsedTime = Math.min(now - startTime, duration);
  y = startPos + (elapsedTime * velocity);
  ctx.clearRect(0,0,750,587);
  ctx.drawImage(board, 0, 0);
  ctx.drawImage(circle, x, y);

  if (elapsedTime < duration)
    requestAnimationFrame(startMoving);
}