p5.js classes（class "example" 没有改变我的 this.x 值）

Question

我想移动一个椭圆，但我卡住了，因为我的 this.x 值没有改变... print("hit this.y = 30");工作正常但是这个--;不管用。有什么东西挡住了它吗？预先感谢您的宝贵时间！

let redBubble = 0;
let x = false;
let y = 0;
let d = 0;

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

function draw() {
    background(56, 23, 56);
        redBubble.show();
        redBubble.toRight();
        redBubble.toLeft();
        redBubble.example();
};

class Bubble {
    constructor(x, y, d) {
        this.x = x;
        this.y = y;
        this.d = d;
    }
    show() {
        fill(255);
        ellipse(this.x, this.y, this.d * 2);
    }
    toRight() {
        if (this.x < 350) {
            this.x = this.x + 1;
        } else if (this.x === 350) {
            this.y = this.y - 1;
        }
    }
    toLeft() {
        if (this.y <= 30) {
            x = true;
        } else if (this.y === 30) {
            x = false;
        }
    }
    example() {
        if (x) {
            this.x--; // not working
            print("hit this.y = 30"); // working
        }
    }
}

Answer 1

您的代码是运行ning，但听起来它没有按照您的要求执行。

您的所有函数 show()、toRight()、toLeft()、example() 都运行每次抽奖。所以每一次，toRight() 都会将 this.x 递增 1（除非 this.x 恰好是 350）。因此，当 example() 将其减 1 时，它们实际上相互抵消而不改变 this.x，当 x 为真且 this.x 为 349 时。

如果您希望净效果 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>

p5.js classes（class "example" 没有改变我的 this.x 值）

p5.js classes (class "example" is not changing my this.x value)

javascript

class

node.js

p5.js

使用状态