如何防止 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);


}

如你所见，如果你运行它，正方形将 "run-over" 黑色屏障而不是停在它旁边，因为增量是 17，而如果增量是 1 ，它会表现完美。我试图将帧率提高到 6000，但由于显而易见的原因，这不起作用。 这只是一个例子，但是（我正在做平台物理）我如何才能有一个动态的方法来使正方形与障碍物平滑地碰撞？

Answer 1

您应该检查 x 位置加上矩形的 width 以检测碰撞。如果sum大于你处理new时的障碍物位置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用于碰撞检测，我建议你检查一下。

如何防止 p5.js 中的重叠

How to prevent overlap in p5.js

javascript

processing

collision-detection

overlap

p5.js