Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2022, 19:04
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Ищу идею, как отслеживать попадает ли элемент 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")
}
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2022, 19:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Alexander3928,
Collision искать по форуму и не только
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2022, 19:26
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Спасибо, буду искать
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2022, 20:38
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Alexander3928,
Заходишь сюда, вводишь "T-Rex runner" (с кавычками), покажет два файла .js, это твоя игра, оригинал.

А здесь основы по созданию любой 2d-canvas-игры.

Последний раз редактировалось Rise, 16.01.2022 в 20:44.
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2022, 21:41
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Rise,
Спасибо за совет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как показать элементы под картой zava75 Элементы интерфейса 3 13.07.2018 18:48
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
draggable-элемент должен подлазить под другие элементы okyrok jQuery 1 05.04.2014 20:26
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как определить элементы под div'om Иваннн Элементы интерфейса 7 08.09.2011 08:22