javascript - 变量不会改变类内的属性

Question

我正在制作一个像 DVD 屏幕一样弹跳的球类/对象。但是当球击中边缘时，控制其 X 和 Y 速度的变量不会改变。

我已经尝试在类外运行相同的 IF 语句，并使用完全相同的名称和所有内容，然后它就可以工作，但是一旦我在类内执行它，它就会中断。

var dvd1;
var dvd2;

function setup() {
  createCanvas(400, 400);
  dvd1 = new dvdlogo();
  dvd2 = new dvdlogo();
}

function draw() {
  background(255);
  dvd1.move(2, 3);
  dvd1.show(200, 200, 200);
  dvd2.move(3, 2);
  dvd2.show(255, 0, 0);
}

class dvdlogo {
  constructor() {
    this.x = 0;
    this.y = 0;
  }

  move(speedX, speedY) {
    this.x = this.x + speedX;
    this.y = this.y + speedY;

//speedX and Y arn't changing when the statement is true
    if (this.y >= height || this.y <= 0) {
      speedY = -speedY;
    }

    if (this.x >= width || this.x <= 0) {
      speedX = -speedX;
    }
  }

  show(r, g, b) {
    noStroke();
    fill(r, g, b);
    ellipse(this.x, this.y, 50, 50);
  }
}

这是球应该做的:https://editor.p5js.org/wiski/sketches/06p20NSgZ这就是他们所做的:https://editor.p5js.org/wiski/sketches/mym6EJenN

(如果您知道如何修复它，请在这里告诉我，如果您在 Web 编辑器中更改代码，它不会提前将更改发送给我，谢谢)

Answer 1

speedX 和speedY 不是全局变量，它们是函数move 的参数。 speedY = -speedY 更改参数的值，但这不会影响具有常量值的函数的调用 dvd1.move(2, 3);。
speedX 和 speedY 的值总是分别为 2 和 3，因为函数 move 是用这个常量值调用的。

将属性 .speedX 和 .speedY 添加到类 dvdlogo 并使用属性而不是参数:

function setup() {
    createCanvas(400, 400);
    dvd1 = new dvdlogo(2, 3);
    dvd2 = new dvdlogo(3, 2);
}

function draw() {
    background(255);
    dvd1.move();
    dvd1.show(200, 200, 200);
    dvd2.move();
    dvd2.show(255, 0, 0);
}

class dvdlogo {
    constructor(speedX, speedY) {
        this.x = 0;
        this.y = 0;
        this.speedX = speedX;
        this.speedY = speedY;
    }

    move() {
        this.x = this.x + this.speedX;
        this.y = this.y + this.speedY;

        if (this.y >= height || this.y <= 0) {
            this.speedY = -this.speedY;
        }

        if (this.x >= width || this.x <= 0) {
            this.speedX = -this.speedX;
        }
    }