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);


}

如果您运行它，广场将＆＃34;跑掉＆＃34;黑色障碍而不是紧挨着它，因为增量为17，而如果增量为1，它将表现完美。我试图将帧率提升到6000，但由于显而易见的原因，这不起作用。 这只是一个例子，但是如何（我正在制作平台物理）我是否有一种动态的方式让广场与障碍物平稳地融合？

Answer 1

您应该检查矩阵的x位置加width以检测碰撞。处理新x时，如果sum大于障碍位置。以下是如何处理它的简化示例。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

有用于碰撞检测的库p5.collide2D，我恳请您查看它。

如何防止p5.js重叠

1 个答案: