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

一点说明:这是一个简单的棋盘游戏。首先将 Canvas 设置为棋盘尺寸本身，以便正确获取坐标 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);
}