如何防止 p5.js 中的重叠

Question

阅读之前： 这是 P5.js https://p5js.org

好的，我要问的问题的一个简单形式是这样，看下面的代码：

function setup() {
    createCanvas(1000,650);
}

var x = 0;
function draw() {

    background(200,200,200);

    if(x+50<750){x+=17;}
    fill(0,0,0);
    rect(750,0,250,550);
    fill(0,0,255);
    rect(x,height/2,50,50);


}

如果你运行它，正方形将“越过”黑色屏障而不是停在它旁边，因为增量是 17，而如果增量是 1，它会完美地执行。我试图将帧速率提高到 6000，但由于显而易见的原因，这不起作用。 这只是一个例子，但我如何（我正在制作平台物理）有一个动态的方法来使广场与障碍物顺利碰撞？

Answer 1

您应该检查x 位置加上矩形的width 以检测碰撞。如果在处理新的x 时总和大于您的障碍物位置。这是如何处理它的简化示例。

function setup() {
  createCanvas(1000, 650);
}

var x = 0,
dir = 1,
rectSize = 50;

function draw() {
  var acc = 17 * dir,
      nextX = x + acc;
      if (nextX + rectSize > 750) {
        dir = -1;
        x = 750 - rectSize;
      } else if (nextX < 0 ) {
        dir = 1;
        x = 0;
      }
  background(200, 200, 200);
  fill(0, 0, 0);
  rect(750, 0, 250, 750);
  fill(0, 0, 255);
  rect(x, height / 2, rectSize, rectSize);

  x += acc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>

有用于碰撞检测的库p5.collide2D，我建议你检查一下。