HTML5 Canvas 游戏优化

Question

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

https://jsfiddle.net/qk7ayx7n/25/

<canvas id = "canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

JS：

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);
}

一点解释：这是一个简单的棋盘游戏。首先，画布本身设置为棋盘尺寸，以便正确获取坐标 X Y（这在这里没有用，但在我的实际游戏中是的）。

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

在某些浏览器和设备（例如在 Cordova 应用程序上）中，我无法让圆圈的运动在没有中断/滞后的情况下移动，尽管它通常可以正常工作。我知道滞后是由我处理事情的方式造成的，但为什么呢？ 另外，我无法保持移动速度恒定 - +3 在每个浏览器中的移动似乎都不一样。

Answer 1

在大多数情况下，您应该为基于 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);
}