Почему моя анимация не будет работать, если я объявлю свою переменную локально?

Question

Я довольно новичок в JS, поэтому, пожалуйста, извините за мое незнание, но я не могу понять, почему моя анимация, если оператор не работает, если я объявляю свою переменную скорости локально в функции move ().

Если я не объявляю переменную скорости глобально, девушка попадает в windowWidth и застревает, перемещая пару пикселей назад и вперед.По сути, оставаясь там, а не двигаясь в другую сторону.

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;
  }
}

Я должен отметить, что я использую библиотеку p5 на случай, если я использую какие-нибудь прикольные функции.Это работает, но я уверен, что смогу немного привести в порядок это.Любой совет будет более чем приветствоваться.

Заранее спасибо!

Answer 1

Вы не должны объявлять его как локальную переменную внутри метода move (так как это приведет к его повторной инициализации до 2 при каждом вызове), но вы должны сделать это свойством экземпляра, который инициализируетсяв конструкторе и модифицируется в методе move (так же, как x и 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

Проблема здесь this.x > windowWidth + 50 || this.x < -50.Попробуйте войти в this внутри move() функции, и вы увидите, что она ссылается на move().x вместо Girl.x.Таким образом, this.x равно undefined, а undefined > 10 + 50 всегда ложно.

Ps Я не знаю p5, так что это ваниль.

Так что, чтобы исправить это, вам нужно объявить другую переменную, чтобы получить Girl scope.

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

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

Answer 3

Поскольку значение speed совместно используется несколькими вызовами для move.Если вы объявите его внутри move, то он будет создан для каждого вызова move, поэтому любое предыдущее значение speed будет игнорироваться.

Если вы не хотите, чтобы speed былоглобальная переменная, тогда вы можете сделать ее свойством класса 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;
  }
}