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

Question

我对 JS 很陌生，所以请原谅我的无知，但如果我在 move() 函数中本地声明我的速度变量，我无法弄清楚为什么我的动画 if 语句不起作用。

如果我不在全局范围内声明 speed 变量，女孩会到达 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

因为 speed 的值在对 move 的多个调用之间共享。如果您在 move 中声明它，那么它会在每次调用 move 时创建，因此 speed 的任何先前值都将被忽略。

如果你不想让speed成为一个全局变量，那么你可以把它设为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 2

您不应该在 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 3

这里的问题是 this.x > windowWidth + 50 || this.x < -50。尝试在 move() 函数中记录 this，您会看到它指的是 move().x 而不是 Girl.x。所以 this.x 是 undefined 而 undefined > 10 + 50 总是假的。

P.s。我不知道 p5 所以这是香草。

所以要解决这个问题，您需要声明另一个变量以获得 Girl 作用域。

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

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

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

Why will my animation not work if I declare my variable locally?

javascript

animation

p5.js