get a smooth animation for a canvas game

Question

How to get a better animation, dinamically, even when browser is busy or idle, for different devices which have different hardware capacity.

I have tried many ways a

Answer 1

You should use requestAnimationFrame instead of setInterval.

Read this article or this one.

The latter one is in fact exactly discussing your approach (with the delta time), and then introduces the animation frame as a more reliable alternative.

The first article is really a great resource. For starters, with your interval of 18 ms you're apparently aiming for something close to 60 fps. This is in fact the default for requestAnimationFrame, so you don't need to write anything special:

function gamedraw() {
  requestAnimationFrame(gamedraw); //self-reference
  game_update(); //your update logic, propably needs to handle time intervals internally
}

gamedraw(); //this starts the animation

If you want to set the update interval explicitly, you can do so by wrapping the requestAnimationFrame inside a setInterval, like this:

var interval = 18;
function gamedraw() {
  setTimeout(function() {
    requestAnimationFrame(gamedraw);
    game_update(); //must handle time difference internally
  }, interval);
}
gamedraw();

Note that the game_update() function must keep track of when it was last called in order to e.g. move everything twice as far as normal in case a frame had to be skipped.

Actually, this means you could (and probably should) refactor your game_update() function to take the time that has actually passed as an argument instead of determining that internally. (There's no functional difference, it just is better, clearer code IMO because it doesn't hide the timing magic.)

var time;
function gamedraw() {
  requestAnimationFrame(gamedraw);
  var now = new Date().getTime(),
      dt = now - (time || now);
  time = now; //reset the timer
  game_update(dt); //update with explicit and variable time step
}
gamedraw();

(Here I dropped the explicit frames again.)

Still, I urge you to read the first article because it also deals with cross-browser issues that I haven't gotten into here.