p5.j​​s类（类＆＃34;示例＆＃34;不改变我的this.x值）

Question

我想移动一个椭圆，但我被卡住了因为我的this.x值没有改变... print（＆＃34;点击这个.y = 30＆＃34;）;工作得很好但是这个 - ;不管用。有什么阻碍吗？提前感谢您的时间！

#id:checked + .container {
    border: 5px solid red;;
}

Answer 1

您的代码正在运行，但听起来它并没有按照您的意愿执行。

您的所有功能show()，toRight()，toLeft()，example()都在每次抽奖中运行。因此，每次toRight()将this.x递增1（除非this.x正好为350）。因此，当example()将其减1时，当this.x为真且x为349时，它们实际上相互抵消而不会更改this.x。

如果您希望净效果减少this.x，则可以将this.x--;替换为this.x = this.x - 2;。但这不是一个很好的解决方案。

使用状态

看起来你想在动画的不同阶段做不同的事情，即向右走，然后向上走，然后向左走。正如您所发现的，当您的所有函数在每个周期运行时，协调所有这些不同的更改可能会非常棘手。

相反，根据您所处的动画的阶段，有条件地仅运行所需的功能会更容易。为此，您可以使用内部变量来存储它应该执行的操作（我将使用这个例子是this.direction。然后在您的绘图函数中，您将使用if / then语句，如下所示：

function draw() {
    background(56, 23, 56);
    redBubble.show();
    if (redBubble.direction === 'right') {
         redBubble.goRight();
    } else if (redBubble.direction === 'up') {
         redBubble.goUp();
    } else if (redBubble.direction === 'left') {
         redBubble.goLeft();
    }
};

然后在你的个人职能中，你会根据某些条件改变方向。例如：

toRight() {
    this.x = this.x + 1;
    if (this.x === 350) {
        this.direction = 'up';
    }
}

以上是上述技术的工作片段：

let redBubble;

function setup() {
    createCanvas(400, 400);
    redBubble = new Bubble(300, 100, 10);
}

function draw() {
    background(56, 23, 56);
    redBubble.show();
    if (redBubble.direction === 'right') {
        redBubble.goRight();
    } else if (redBubble.direction === 'up') {
        redBubble.goUp();
    } else if (redBubble.direction === 'left') {
        redBubble.goLeft();
    } else if (redBubble.direction === 'down') {
        redBubble.goDown();
    }
};

class Bubble {
    constructor(x, y, d) {
        this.x = x;
        this.y = y;
        this.d = d;
        this.direction = 'right';
    }
    show() {
        fill(255);
        ellipse(this.x, this.y, this.d * 2);
    }
    goRight() {
        this.x = this.x + 1;
        if (this.x === 350) {
            this.direction = 'up';
        }
    }
    goLeft() {
        this.x = this.x - 1;
        if (this.x === 30) {
            this.direction = 'down';
        }
    }
    goUp() {
        this.y = this.y - 1;
        if (this.y === 30) {
            this.direction = 'left';
        }
    }
    goDown() {
        this.y = this.y + 1;
        if (this.y === 300) {
            this.direction = 'right';
        }
    }

}

<script src="https://unpkg.com/p5@0.6.1/lib/p5.min.js"></script>