p5.j​​s - 重复一个矩形左右移动（反弹）

Question

我正在为一个更大的项目尝试一些示例代码，而且我无法让我的矩形在两行之间反弹。

function draw() {
    print(frameCount)
    background(255)
    var x = 150 + frameCount;
    rect(x,200,15,15);
    line(150,0,150,400);
    line(250,0,250,400);
    if (x >= 250) {
        background(255)
        x = 350-frameCount;
        rect(x,200,15,15);
        line(250,0,250,400);
        line(150,0,150,400);
    } if (x <= 145) {
        background(255)
        x = 145 + (frameCount % 100);
        rect(x,200,15,15);
        line(250,0,250,400);
        line(150,0,150,400);
    }
}

我感觉在第一次发生之后，它忽略了原来的if语句，它声明向左反弹。我真的不确定出了什么问题，任何帮助都会受到赞赏。

Answer 1

您可能只想将当前位置和速度存储在一组变量中，然后根据这些变量移动矩形。这是一个例子：

var x = 0;
var speed = 1;

function draw(){
   x += speed;
   if(x < 0 || x > width){
      speed *= -1;
   }

   background(64);
   line(x, 0, x, height);
}

我已经就这个here编写了一个教程。这是常规处理的，但P5.js中的想法是相同的。