如果我在本地声明我的变量，为什么我的动画不起作用？

Question

I'm quite new to JS so please excuse my ignorance but I can't figure out why my animation if statement doesn't work if I declare my speed variable locally in the move() function.

If I don't declare the speed variable globally, the girl gets to the windowWidth and gets stuck moving a couple of pixels back and forth. Basically staying there rather than moving the other way.

let speed = 2;
class Girl {
  constructor(x, y) {
    this.x = x,
    this.y = y
  }
  body() {
    noStroke();
    fill(239, 101, 233);
    rect(this.x, this.y, 20, 40);
    fill(249, 192, 155);
    triangle(this.x, this.y, this.x + 20, this.y, this.x + 10, this.y + 15);
  }
  move() {
    if (this.x > windowWidth + 50 || this.x < -50) {
      speed = speed * -1;
    }
    this.x = this.x + speed;
  }
}

I should mention I'm using the p5 library in case I'm using any funky functions. It works but I'm sure I could tidy this up a little bit. Any advice would be more than welcome.

Thanks in advance!

Answer 1

You should not declare it as a local variable inside the move method (as that would make it get re-initialised to 2 on every call), but you should make it a property of the instance that gets initialised in the constructor and modified in the move method (just like x and y ).

class Girl {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 2;
  }
  body() {
    noStroke();
    fill(239, 101, 233);
    rect(this.x, this.y, 20, 40);
    fill(249, 192, 155);
    triangle(this.x, this.y, this.x + 20, this.y, this.x + 10, this.y + 15);
  }
  move() {
    if (this.x > windowWidth + 50 || this.x < -50) {
      this.speed = this.speed * -1;
    }
    this.x = this.x + this.speed;
  }
}

Answer 2

Because the value of speed is shared across multiple calls to move . If you declare it inside move then it gets created for each call to move , thus any previous value of speed will be ignored.

If you don't want speed to be a global variable, then you can make it a property of the class Girl :

class Girl {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 2;        // make 'speed' a property of the class
  }

  /* ... */

  // use 'this.speed' inside 'move' instead of just 'speed'
  move() {
    if (this.x > windowWidth + 50 || this.x < -50) {
      this.speed = this.speed * -1;
    }
    this.x = this.x + this.speed;
  }
}

Answer 3

Problem here is this.x > windowWidth + 50 || this.x < -50 this.x > windowWidth + 50 || this.x < -50 . Try to log this inside move() function and you will see that it is referring to move().x instead of Girl.x . So this.x is undefined and undefined > 10 + 50 is always false.

Ps I dont know p5 so this is vanilla.

So to fix this you need to declare another variable to get Girl scope.

var Girl = function(){
    var self = this;
    //code goes here

   function move(){
      self.x = setValue;
      console.log(this.x) //undefined
   }
}