Question

I am working on HTML 5 Canvas game, with a gameloop.

Here is my code so far. It doesn’t do anything and that is fine, but I am getting an error

TypeError: Object [object DOMWindow] has no method ‘Update’ [http://localhost:2516/scripts/lib/Game.js:47]

Edit: This code works, it no longer reflects the problem, it reflects the solution

  var game;
    var Game = function () {
    }


   Game.prototype.Update = function () {

}

Game.prototype.Draw = function () {

}

function GameLoop () {


    game.Update(); //this is line 47
    //context.save();
    game.Draw();
   // context.restore();
    setTimeout(GameLoop, 10);
}
function Start() {
    game = new Game();
   GameLoop();
}

Edit: I think the “this” is looking at the document instead of the Game object, which I don’t understand why or how to fix it

Answer 1

The issue is likely with this line within GameLoop:

setTimeout(this.GameLoop, 10);

You can’t pass a “method” reference; only function references. So, when this is called by setTimeout, it will be called without a set context, like you’d called it as:

GameLoop();

You have to either bind it:

setTimeout(this.GameLoop.bind(this), 10);

Or wrap it in another function similar to what bind will do (saving this as self as the function will have its own value for this):

var self = this;
// ...
setTimeout(function () {
    self.GameLoop();
}, 10);