Why does this Javascript Prototype code fail?

Question

I'm a little bit new to javascript and I came across this error while writing a game. It stumps me since this function seems the same as all of the other functions, yet, it doesn't work.

function Game() {}
Game.prototype.loadGame = function(x) {
  this.cvs=document.getElementById(x);
  this.cvs.height=480;
  this.cvs.width=640;
  this.sprites=[];
  this.ctx=cvs.getContext("2d");
};
Game.prototype.update = function() {
  console.log("u");
};
Game.prototype.draw = function() {
  this.drawCircle(320, 240, 10, "green")
};
Game.prototype.drawCircle = function(centerX, centerY, radius, color) {
  this.ctx.beginPath();
  this.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  this.ctx.fillStyle = color;
  this.ctx.fill();
};
Game.prototype.tick = function() {
  this.update();
  this.draw();
};
Game.prototype.Init = function() {
  fps=60
  this.loadGame("cvs");
  setInterval(this.tick, (1/fps)*1000);
};
g = new Game();
g.Init();

I get the error: Uncaught TypeError: Object [object global] has no method 'update'

Any idea as to how to fix this?

In the future, when asking questions, I highly recommend providing some context as to what your code is supposed to do. — user1131435
– user1131435, Commented Aug 4, 2013 at 0:57

SaganRitual · Accepted Answer · 2013-08-04 00:50:35Z

2

It's because you're using setInterval(), so your tick function isn't getting the 'this' that you expect. You need to do this instead:

Game.prototype.Init = function() {
    var that = this;
    fps=60
    this.loadGame("cvs");
    setInterval(function() { that.tick.call(that); }, 1);
}

Google for "javascript this" or "javascript call" or "javascript apply" to get more info.

answered Aug 4, 2013 at 0:50

SaganRitual

3,2232 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bfavaretto Over a year ago

call is not required here, that.tick() would be enough.

SaganRitual Over a year ago

@bfavaretto Thanks, I didn't realize that. I learned something about this/that just now.

bfavaretto Over a year ago

I'm glad to hear that, and I know this can be really tricky!

bfavaretto · Accepted Answer · 2013-08-04 01:22:19Z

1

In JavaScript, the value of this is dynamic, and depends on how the function is called. Since you're using the canvas, we can assume bind is available, so this should work:

setInterval(this.tick.bind(this), (1/fps)*1000);

Note: you might also want to use requestAnimationFrame for a better frame rate.

edited Aug 4, 2013 at 1:22

answered Aug 4, 2013 at 1:11

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Collectives™ on Stack Overflow

Why does this Javascript Prototype code fail?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related