Question

I’d like to create a game in html5 with canvas.

But I have a performance question before

Is it better to create a variable each time I need one

var game = ...
var car = ...
var monster = ...

or is it better to instantiate only one var at the beginning of the script and do:

var game = {}
game.car = ...
game.monster = {}
game.monster.attack = function(){...}

Thanks for your help

Answer 1

As seen in the comments you will not really need to wonder about this too much. The biggest thing that comes with doing javascript game programming is that you will have different computer that will have different hardware. Therefore framerates will be different for all of them if you dont interpolate you engine. An example of this would be

// Updated drawing code for our objects
Rect.prototype.draw = function(context, interpolation) {
  context.fillRect(this.x, this.y + this.velocity * interpolation, 30, 30);
};

Game.draw = function(interpolation) {
  this.context.clearRect(0, 0, 640, 480);

  for (var i=0; i < this.entities.length; i++) {
    this.entities[i].draw(this.context, interpolation);
  }
};

Game.run = (function() {
  var loops = 0, skipTicks = 1000 / Game.fps,
      maxFrameSkip = 10,
      nextGameTick = (new Date).getTime(),
      lastGameTick;

  return function() {
    loops = 0;

    while ((new Date).getTime() > nextGameTick) {
      Game.update();
      nextGameTick += skipTicks;
      loops++;
    }

    if (!loops) {
      Game.draw((nextGameTick - (new Date).getTime()) / skipTicks);
    } else {
      Game.draw(0);
    }
  };
})();

This will keep the game logic at your Game.fps. Another thing that you maybe want to avoid is using jQuery in your drawing logic. This is due to the fact that jQuery’s animation queue is very slow and you end up having animations stack to the infinite giving you a larger delay with every frame.