p5.js

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.

中的想法是相同的

p5.js - 获取一个矩形重复左右移动（弹跳）

p5.js - get a rectangle to move left and right repeatedly (bounce)

if-statement

bounce