Блог

Главная - Вопросы по программированию - Проверка на коллизию между векторами — перемещение векторов — HTML, JS, P5

Проверка на коллизию между векторами — перемещение векторов — HTML, JS, P5

#javascript #html #p5.js

#javascript #HTML #p5.js

Вопрос:

Я создал функцию проверки столкновений для своего игрока, чтобы каждый раз, когда объект (в данном случае вектор — круг) касается игрока (также вектор — круг), игра заканчивается.

Мне удалось создать логику, и проверка на столкновение работает, однако она не вычисляет фактическое расстояние между элементами (вместо того, чтобы заканчивать игру, когда они фактически касаются ее окончания, когда они находятся на некотором расстоянии друг от друга.

Оба объекта движутся — препятствие движется x = 6, и игрок следует за курсором, поэтому скорость меняется.

Я попытался немного отрегулировать расстояние, и мне удалось закончить игру, когда x препятствия касается x игрока, но на самом деле не удалось, когда границы касаются. Я прилагаю код, который у меня есть ниже;

     class Player {
    constructor(x, y, r) {
    this.pos = createVector(x, y);
    this.r = r;
    this.vel = createVector(500, 500);
    this.mag = 3;
    this.velLerp = 0.1;
  }

  update() {
    let mouse = createVector(mouseX - width / 2, 
    mouseY - height / 2);
    mouse.setMag(this.mag);
    this.vel.lerp(mouse, this.velLerp);
    this.pos.add(this.vel);

  collisionCheck(obstacle) {
    let d = p5.Vector.dist(this.pos, obstacle.pos);

    if (d < this.r   obstacle.r) {
     console.log("GAME OVER");
     return true;
    }

Комментарии:

1. Привет, спасибо за ответ. Я не использую никаких спрайтов, проигрыватель — это просто круг с обводкой (1) вокруг него. Препятствием также является круг с обводкой (1), окружающей его. Я имел в виду, что как только штрихи соприкасаются, игра заканчивается. P5 рисует элементы 60 раз в секунду, так что, возможно, это проблема.

2. здравствуйте, не могли бы вы опубликовать код для вашего цикла обновления? Я предполагаю, что ваше обновление позиции и проверка столкновений не в правильном порядке. По сути, вы должны продвигать движение, затем проверять наличие столкновения и либо реагировать на столкновение, либо устанавливать новые позиции и повторять.

3. спасибо вам обоим за ответ! каким было бы потенциальное решение?

4. когда я меняю проверку на столкновение вместо (d < this.r препятствие.r ) на (d < this.r ), всегда кажется, что игра заканчивается, если она касается x препятствия — мне нужно в основном это, но когда оно касается штриха. Я забыл упомянуть, что препятствия имеют случайный размер (так как их много, они всегда перемещаются с левой стороны холста вправо). Кажется, это работает, когда я задаю касание x препятствия, но не x препятствия.r

5. На самом деле я не понимаю, чего вы хотите. Если d < this.r obstacle.r игра окончена. Если d >= this.r obstacle.r игра продолжается. Так в чем проблема? Вы должны убедиться, что collisionCheck это вызывается в нужный момент. После того, как позиции объектов были вычислены и объекты были нарисованы. Скорее всего, вы не рисуете последнюю позицию объектов, соответственно, игра окончена до окончательного обновления.

Ответ №1:

Проблема вызвана тем фактом, что перемещение кругов составляет 3 ( this.mag ) пикселя. Вы просто случайно получаете точную точку контакта. В большинстве случаев они пересекаются.
Если обнаружено столкновение, слегка измените позицию игрока на смещение this.r obstacle.r - d :

 collisionCheck(obstacle) {
    let d = p5.Vector.dist(this.pos, obstacle.pos);

    if (d < this.r   obstacle.r) {
        
        let shift = p5.Vector.sub(this.pos, obstacle.pos);    
        shift.setMag(this.r   obstacle.r - d);
        this.pos.add(shift);

        console.log("GAME OVER");
        return true;
    }
}