Question

I’m trying to run the following code, but get an error in the gameLoop function saying: JavaScript runtime error: Object doesn’t support property or method ‘update’.

I’m a beginning JavaScript programmer. Can you spot what is wrong with this code?

function Core(context) {
    this.context = context;
    this.fps = 500;
    this.sprite = new Sprite();
}

Core.prototype.run = function() {
    setInterval(this.gameLoop, this.fps); // <<<< PROBLEM
}

Core.prototype.gameLoop = function () {
    this.update();
    this.draw();
}

Core.prototype.update = function () {
    this.sprite.x += 50;
    this.sprite.y += 50;
}

Core.prototype.draw = function () {
    this.context.clearRect(0, 0, 300, 300);
    this.context.fillRect(this.sprite.x, this.sprite.y, 50, 50);
    this.context.fillText('x: ' + this.sprite.x + ' y: ' + this.sprite.y, 10, 250);
}

Answer 1

In JavaScript, this is defined entirely by how a function is called, not where or how it’s defined. The problem is that setInterval doesn’t call your code with the correct this value. To fix:

function Core(context) {
    var self = this;

    this.context = context;
    this.fps = 500;
    this.sprite = new Sprite();
    this.boundGameLoop = function() {
        self.gameLoop();
    };
}

Core.prototype.run = function() {
    setInterval(this.boundGameLoop, this.fps);
}

On JavaScript engines that have ES5 features (or if you’re using an ES5 “shim”), you can change Core to:

function Core(context) {
    this.context = context;
    this.fps = 500;
    this.sprite = new Sprite();
    this.boundGameLoop = this.gameLoop.bind(this);
}

More reading:

• Mythical methods
• You must remember this
• Function#bind in the ES5 spec

---

Side note: Your code relies on the horror that is Automatic Semicolon Insertion. (All of your function assignments — Core.prototype.run = function() { ... }) need semicolons after the closing }.)