Как я могу проверить, если два div касаются друг друга в JavaScript

Question

У меня есть div, который работает слева направо.и div, который идет вверх и вниз.Я хочу проверить, не пересекаются ли они друг с другом (это как прыжок из игры).Я пытался утешить каждую точку из них (вверху слева направо), но они просто не встречались, даже если они на одном месте.У меня есть код, который кто-то дал мне, что если они пересекаются, сделайте что-нибудь.проблема в том, что он говорит «если» всегда верно.и если я удалю '!'он вообще не работает

мой код:

    $('#startBtn').click(function () {
    moveCars();
})

$('body').keydown(function (e) {
    if (e.key == 'ArrowUp') {
        $('#player').css('bottom', '+=140px');
    }

    if ($('#player').css('top') < '0') {
        $('#player').css('bottom', '25px');
    }
});

$('body').keydown(function (e) {

    if ($('#player').css('bottom') <= '20px') {
        if (e.key == 'ArrowDown') {
            $('#player').css('bottom', '20px');
        }
    } else {
        if (e.key == 'ArrowDown') {
            $('#player').css('bottom', '-=140px');
        }
    }
});

function moveCars() {

    $('.carLeft').css('display', 'inline');

    function moveCar() {
        $('.carRight').css('right', '-=2px');

        if ($('.carRight').css('right') <= '0%') {
            $('.carRight').css('right', '105%');
        }
    }

    setInterval(moveCar)

    function moveLeftCars() {
        $('.carLeft').css('left', '-=3px');

        if ($('.carLeft').css('left') <= '0%') {
            $('.carLeft').css('left', '90%');
        }
    }
    setInterval(moveLeftCars)

}


var carsRight = document.querySelector('.carRight');
var carsLeft = document.querySelector('.carLeft');
var player = document.querySelector('#player');

var carRightBound = carsRight.getBoundingClientRect();
var carLeftBound = carsLeft.getBoundingClientRect();
var playerBound = player.getBoundingClientRect();


setInterval(function(carRightBound, playerBound){



    if(!(carRightBound.left > playerBound.right || carRightBound.right < playerBound.left || carRightBound.top > playerBound.bottom || carRightBound.bottom < playerBound.top)) {
        console.log('The divs are intersecting!');
        alert('on here')
    } else {
        console.log('The divs are not intersecting.');
    }

},5000)

setInterval может быть удален.

Answer 1

В данный момент вы назначаете ограничивающие прямоугольники ваших игровых объектов переменным carRightBound & playerBound один раз перед началом интервала.Это означает, что его значения больше не будут обновляться.Вы должны обновить их внутри функции обратного вызова.

Кроме того, интервал 5000 мс слишком велик.Многие вещи могут появиться на экране в течение 5 секунд.Попробуйте уменьшить его, например, до 50 мс.

Наконец, я все равно не слишком уверен в вашем обнаружении столкновений.Вы не обращаете внимания на размер ваших объектов.

Попробуйте этот код:

setInterval(function() {
  var playerBound = player.getBoundingClientRect();
  var carsRight = document.querySelectorAll('.carRight');
  var carRightBound;

  for (var a = 0; a < carsRight.length; a++) {
    carRightBound = carsRight[a].getBoundingClientRect();
    if (playerBound.x > carRightBound.x - playerBound.width && playerBound.x < carRightBound.x + carRightBound.width && playerBound.y > carRightBound.y - playerBound.height && playerBound.y < carRightBound.y + carRightBound.height) {
      console.log('The divs are intersecting!');
      alert('on here')
    } else {
      console.log('The divs are not intersecting.');
    }
  }
}, 50);