Question

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

如果我未全局声明速度变量，则该女孩到达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

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

Answer 3

这里的问题是this.x > windowWidth + 50 || this.x < -50。尝试将this登录到move()函数中，您会发现它是指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
   }
}

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

3 个答案: