Enemy x keeps equaling nan

p5.js Beginners
1

I’m trying to create a tower defense game, but atm my enemy keeps vanishing & it’s x keeps showing up nan. Can anyone tell me why?

sketch.js

var wall = [35];
var bs = 25;
var enemy;

function preload(){
  wallT = loadTable('wall.csv', 'csv');
}
function setup() {
  createCanvas(600, 600);
  for (var i = 0; i < wallT.getColumnCount(); i++){
    var tn = wallT.getNum(0,i);
    wall[i] = new Wall(tn);
  }
  enemy = new Enemy(50);
}

function draw() {
  background(0);
  for (var i = 0; i < wall.length; i++){
    wall[i].show();
  }
  enemy.show();
  enemy.move();
}

Enemy.js

class Enemy extends Block{
  
  constructor(n) {
    super(n);
    var xspd = 1;
    var yspd = 0;
  }
  
  
  show() {
    fill(0,255,0);
    rect(this.x,this.y,bs,bs);
  }
  
  move() {
    this.x += this.xspd;
    //this.y += this.yspd;
    //print(this.x);
  }
}

wall.js

class Wall extends Block{
  
  constructor(n) {
    super(n);
  }
  
  show() {
    fill(255);
    rect(this.x,this.y,bs,bs);
  }
  
}

block.js

class Block{
  
  constructor(n) {
    this.x = n;
    this.y = 0;
    while (this.x > 23){
      this.y += 1;
      this.x -= 24;
    }
    this.y *= bs;
    this.x *= bs;
  }
  
}

wall.csv

0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,47,48,71,72,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,119,120,143,144,167,168,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,215,216,239,240,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,287,288,311,312,335,336,359,360,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,407,408,431,432,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,479,480,503,504,527,528,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575
2 Likes
2

This is the statement that makes property x become NaN: this.x += this.xspd;

It is so b/c property xspd does’t exist!

Instead you declare a local variable named xspd inside Enemy’s constructor: var xspd = 1;

2 Likes
3

I tried making it above constructor it gave me an error saying it expected a module. & if creating variables in constructor make them only local why does this.x & this.y work how I want them to? I declared them the same way.

1 Like
4

Properties x & y are inherited by class Enemy from class Block: class Enemy extends Block {

Also they’re both initialized by calling super(): super(n);

Obviously if you need a property named xspd you’re gonna need to use keyword this:
var xspd = 1; → this.xspd = 1;

1 Like
5

that doesn’t answer why I made both the same way & only x y work & I alrdy knew where x y came from I made it in block constructor like I tried to declare xspd & yspd.

I got it working I switched var with this.

Enemy.js

class Enemy extends Block{
  
  constructor(n) {
    super(n);
    this.xspd = 1;
    this.yspd = 0;
  }
  
  
  show() {
    fill(0,255,0);
    rect(this.x,this.y,bs,bs);
  }
  
  move() {
    this.x += this.xspd;
    //this.y += this.yspd;
    //print(this.x);
  }
}
1 Like
6

I don’t get what you mean b/c object properties aren’t the same thing as local variables & parameters.

Declaring a variable like this var xspd = 1; or this let x = n;
isn’t the same as appending another property to an object as this.xspd = 1; or this.x = n;

2 Likes
7

earlier i meant i made both in constructor, but now I get why it didn’t work.

2 Likes