Как предотвратить наложение в p5.js - PullRequest
Новая
       20

Как предотвратить наложение в p5.js

0 голосов
/ 21 мая 2018

ДО ТОГО, ЧТО ВЫ ЧИТАЕТЕ: ЭТО 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, но по понятным причинам это не сработало. ЭТО ПРОСТО ПРИМЕР, НО КАК (я занимаюсь физикой платформы), БЫ Я ДИНАМИЧЕСКИМ СПОСОБОМ ПРИГОТОВЛЕНИЯ КВАДРАТА ГЛАДКОЙ КОЛЛАДИЕЙ С БАРЬЕРОМ?

1 Ответ

0 голосов
/ 21 мая 2018

Вы должны проверить 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 для обнаружения столкновений, я советую вам проверить это.

...