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.

new Vector(x, y) || new Vector(50, 50); probably doesn't do what you want it to. I'd expect you to want new Vector(x || 50, y || 50) — Eric
– Eric, Commented Feb 16, 2013 at 20:30
More fun: new Vector(1, 1).theta() == new Vector(-1, -1).theta() — Eric
– Eric, Commented Feb 16, 2013 at 20:47

Community · Accepted Answer · 2017-05-23 12:34:48Z

2

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

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Feb 16, 2013 at 18:56

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

2 Comments

Jack TC Over a year ago

Thanks, but this hasn't fixed it. The version with this fix is currently online.

Bergi Over a year ago

Ah, I see Eric had a solution. I only looked at the code you posted here.

Eric · Accepted Answer · 2013-02-16 20:42:37Z

1

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.

edited Feb 16, 2013 at 20:42

answered Feb 16, 2013 at 20:33

Eric

98.1k54 gold badges257 silver badges389 bronze badges

2 Comments

Jack TC Over a year ago

Thanks, this did the job. I had used get and set in object notation before and missed these when I changed it.

Eric Over a year ago

That was what I'd assumed. Although the thing @Bergi pointed out is a real issue that would have bitten you when you created a second Collidable.

Travis J · Accepted Answer · 2013-02-16 18:48:09Z

0

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/

answered Feb 16, 2013 at 18:48

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

2 Comments

Bergi Over a year ago

No, that's not the reason.

Jack TC Over a year ago

I'm pretty sure this isn't it. If you go to the console on my page and type in "current" it will show you the player object, with a pos member for the vector position.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related