[Alexander3928]

Добрый вечер. Ищу идею как проверять попадает ли элемент с классом dino под элемент с классом cactus. Кто еще не понял игра Dinosaur Game

<div class="game-dino">
     <div class="dino" id="dino"></div>
     <div class="cactus" id="cactus"></div>
 </div>

.game-dino {
    width: 100%;
    height: 40vh;
    border-bottom: 4px solid #000;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.dino {
    position: absolute;
    top: 100%;
    transform: translateY(-94%);
    width: 80px;
    height: 80px;
    background-image: url("../img/dino.png");
    background-size: 80px 80px;
    z-index: 100;
}

.cactus {
    position: absolute;
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
    width: 70px;
    height: 100px;
    background-image: url("../img/cactus.png");
    background-size: 70px 100px;
    animation: cactus 3s infinite linear;
    z-index: 90;
}

@keyframes cactus {
    0% {
        left: 100%;
    }
    100% {
        left: -20px;
    }
}

.dino-jump {
    animation: addJumpDino 0.7s infinite linear;
}

@keyframes addJumpDino {
    0% {
        top: 100%;
    }
    40% {
        top: 60%;
    }
    60% {
        top: 55%;
    }
    80% {
        top: 70%;
    }
    100% {
        top: 100%;
    }
}

const dino = document.querySelector(".dino")
const cactus = document.querySelector(".cactus")

document.addEventListener("keydown", addJumpDino);

function addJumpDino() {
    dino.classList.add("dino-jump")
    setTimeout(removeJumpDino, 700)
}

function removeJumpDino() {
    dino.classList.remove("dino-jump")
}