| Alexander3928 |
16.01.2022 19:04 |
Ищу идею, как отслеживать попадает ли элемент dino, под другие элементы
Добрый вечер. Ищу идею как проверять попадает ли элемент с классом 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")
}
|