HTML5 Canvas游戏优化 [英] HTML5 Canvas game optimization

问题描述

以下是我编写的示例代码，目的只是为了演示我如何处理游戏中的某些事情：

The following is an example code I wrote just to show I handle certain things on my game:

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

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

A little explanation: This is a simple board game. first the canvas is set to the board dimensions themselves in order to get the coordinates X Y correctly(this is not useful here but in my actual game yes).

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

then it is resized according to the window of the player, with regards to the actual ratio of the original board image. keeping the ratio is important for the quality of the image. Now the movement is done with a simple timer in a function, once it gets to a certain X and Y the movement is stopped.

我很难获得在某些浏览器和设备（例如在cordova应用程序中）上，圆圈的运动不会出现中断/滞后的现象，尽管通常可以正常工作。我知道延迟是由我处理事情的方式造成的，但是为什么呢？
，我也无法保持移动速度恒定-+3似乎在每个浏览器中的移动速度都不相同。

I have trouble getting the movement of the circle to move without breaks/lags in some browsers and devices (like on an cordova app), though it works fine usually. I know that the lags are caused by the way I handle things, but why? also, I have trouble keeping the speed of the movement constant - +3 doesn't seem to move the same in every browser.

推荐答案

在大多数情况下，对于基于JavaScript的动画，应该使用 requestAnimationFrame 以避免断断续续。使用此技术，位置是时间的函数，而不是发生多少执行帧。这样一来，快速的计算机将比慢速的计算机具有更多的动画帧，但是您仍然可以感知到相同的动画速度。例如：

In most cases, you should use requestAnimationFrame for JavaScript-based animations to avoid choppiness. With this technique, the position is a function of time not how many execution frames take place. This way, fast computers will have more animation frames than slow computers, but you'll still perceive the same animation velocity. For example:

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

这篇关于HTML5 Canvas游戏优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！