Can't get Javascript object to construct (within object) after inheritance

Question

I've created a Javascript object for a Player class for a game I've been working on which "inherits" from a Collidable class using the follow line:

Player.prototype = new Collidable(50, 50, 70);

This Collidable class has an instance of a Vector class, which is instantiated in my code like:

this.pos = new Vector(x, y) || new Vector(50, 50);

My problem is that I can create a new Collidable object just fine, and the vector inside will have the values for x and y given in the first two arguments of the new Collidable(x, y, diameter) part. However, when a new Player is created (current = new Player();) the vector's values for x and y become NaN.

Below I have included the code for the Collidable constructor and Player constructor.

Collidable:

Collidable = function Collidable(x, y, d){
    this.pos = new Vector(x, y) || new Vector(50, 50); // Position of centre
    this.diam = d || 50; // Diameter
    this.col = new Color().randomRGB(); // For debug
}
// More functions below

Player:

Player = function Player(){
    this.health = 100;
    this.facing = 0;
    this.sprites = new Image();
    this.sprites.src = "./npc-oldman1.png";
    this.spriteNo = 0;
    this.moveSpeed = 2;
}

Player.prototype = new Collidable(50, 50, 70);
// More functions below

I suspect this is related to this question, but haven't been able to work out what is going wrong.

My full code is availabe here. What it should do is display an image of an old man that moves to where the mouse clicks (it does flash at (50, 50) (where the Player is created) right at the beginning, or when you manually change the pos value). I have had the code working before I added the Collisions class.

Thanks in advance.

Answer 1

The problem seems to be a mix between Inheritance issues with nested objects and reason [not] to use the new keyword/shared properties from constructor inheritance. The solution will be

function Player(){
    Collidable.call(this, 50, 50, 70); // give *this* instance an *own* Vector
    this.health = 100;
    this.facing = 0;
    this.sprites = new Image();
    this.sprites.src = "./npc-oldman1.png";
    this.spriteNo = 0;
    this.moveSpeed = 2;
}

Player.prototype = Object.create(Collidable.prototype); // without creating instance

Answer 2

Your vector.js code does this check:

if (typeof x === 'NaN' || typeof y === 'NaN')

However, typeof NaN == 'number'. You want isNaN(x), or more cryptically, x != x

---

Fixing that, it becomes obvious that your problem is elsewhere. This line:

var diff = new Vector(this.getCentre.x - x, this.getCentre.y - y);

Should be one of:

var diff = new Vector(this.getCentre().x - x, this.getCentre().y - y);
var diff = this.getCentre().diff(new Vector(x, y))

There are quite a few sets of missing parentheses.

Answer 3

Perhaps there is a different issue with your code than what you have shown. Perhaps it is out of order? I was unable to reproduce NaN, here is what I used:

html

<div>Vector</div>
<div><span>X: </span><span id="x"></span><div>
<div><span>Y: </span><span id="y"></span></div>

js

var Vector = function(x,y){
 this.x = x;
 this.y = y;
}
var Collidable = function Collidable(x, y, d){
    this.pos = new Vector(x, y) || new Vector(50, 50);
}
var Player = function Player(){
    this.health = 100;
}
Player.prototype = new Collidable(50, 50, 70);

var current = new Player();

console.log(current);
console.log(current.pos);

document.getElementById("x").innerHTML = current.pos.x;
document.getElementById("y").innerHTML = current.pos.y;

demo: http://jsfiddle.net/MuRNx/