I am confused how to define and call JavaScript object methods. I'm attempt to create a game in JavaScript and want to create objects with functions to control each element. Currently, the game.update function calls an error when it tries to call player.update. It can't find the method. How should I go about defining and calling methods. I come from using java.
//INIT
var game;
var paper;
var key = [0, 0, 0, 0, 0]; // left, right, up, down
window.onload = function () {
paper = Raphael("canvas", 640, 480);
game = new Game();
game.init();
};
//GAME
function Game() {
this.player = new Player();
this.score = 0;
this.drawCanvas = function () {
paper.clear();
paper.rect(0, 0, 640, 480, 10).attr({
fill: "#fff",
stroke: "none"
});
paper.text(40, 10, "Score " + this.score);
paper.ellipse(this.player.positionX, this.player.positionY, 10, 10);
}
this.update = function () {
this.player.update.call();
this.drawCanvas.call()();
}
this.init = function () {
this.drawCanvas();
setInterval(this.update, 35);
}
}
//UNITS
//PLAYER
function Player() {
this.positionX = 100;
this.positionY = 100;
this.update = function () {
if (key[0]) { //left
this.positionX -= 3;
game.score += 3;
}
if (key[1]) { //right
this.positionX += 3;
game.score += 3;
}
if (key[2]) { //up
this.positionY -= 3;
game.score += 3;
}
if (key[3]) { //down
this.positionY += 3;
game.score += 3;
}
if (key[4]) { //space
}
if (this.positionX > 640) {
this.positionX = 640;
} else if (this.positionX < 0) {
this.positionX = 0;
} else if (this.positionY > 480) {
this.positionY = 480;
} else if (this.positionY < 0) {
this.positionY = 0;
}
}
}
function changeKey(which, to) {
switch (which) {
case 65:
case 37:
key[0] = to;
break; // left
case 87:
case 38:
key[2] = to;
break; // up
case 68:
case 39:
key[1] = to;
break; // right
case 83:
case 40:
key[3] = to;
break; // down
case 32:
key[4] = to;
break; // space bar;
case 17:
key[5] = to;
break; // ctrl
}
}
document.onkeydown = function (e) {
changeKey((e || window.event).keyCode, 1);
};
document.onkeyup = function (e) {
changeKey((e || window.event).keyCode, 0);
};
I get the following error:
Uncaught TypeError: Cannot read property 'update' of undefined main.js:25
cookie monster
11k4 gold badges34 silver badges45 bronze badges
asked Jan 23, 2014 at 18:43
Eric Sauer
8704 gold badges14 silver badges27 bronze badges
2 Answers 2
This is invalid syntax:
this.update : function(){
you want just this
this.update = function(){
answered Jan 23, 2014 at 18:45
Adam Rackis
83.5k57 gold badges281 silver badges402 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
cookie monster
But that would be a SyntaxError, not a TypeError.
Eric Sauer
I actually forgot to change that back. It was actually and = sign. I was just playing around
The issue is here where you've detached the update method from this.
this.init = function () {
this.drawCanvas();
setInterval(this.update, 35); // <-------- passing `update` without `this`
}
So when you get to this line in update()
this.player.update.call();
The value of this is the global object, which has no player property, so you're trying to access .update.call() on undefined.
You need to keep them bound:
this.init = function () {
this.drawCanvas();
var self = this;
setInterval(function() {
self.update();
}, 35);
}
Or use Function.prototype.bind to create a new function with this bound permanently to the function.
this.init = function () {
this.drawCanvas();
setInterval(this.update.bind(this), 35);
}
answered Jan 23, 2014 at 18:54
cookie monster
11k4 gold badges34 silver badges45 bronze badges
3 Comments
Eric Sauer
Thank you, that fixed it. However now I get "Uncaught TypeError: Cannot read property 'positionX' of undefined" on line 21. But I'll take a look at that.
cookie monster
Probably because you're not passing a
this value to .call(). The first argument you give it needs to be whatever you want to set as its this value. If you don't need a special this value, then just do this.player.update();cookie monster
...and this is certainly wrong too ;-)
this.drawCanvas.call()();lang-js