.game { /* ширина игровой области */ width: 600px; /* высота игровой области */ height: 200px; /* рамка серого цвета и отступы вокруг неё */ border: 1px solid rgb(122, 122, 122); /* автоматические отступы */ margin: auto; } #dino { /* ширина и высота динозаврика */ width: 50px; height: 50px; /* путь к изображению динозаврика */ background-image: url("C:\Users\makgo\OneDrive\Desktop\img"); /* ширина и высота подложки */ background-size: 50px 50px; /* относительное позиционирование */ position: relative; /* отступ сверху */ top: 150px; } /* класс анимации прыжка */ .jump { animation: jump 0.3s linear; } /* 5 ключевых кадров для анимации прыжка */ @keyframes jump { 0% { /* начальная позиция */ top: 150px; } 30% { /* начало прыжка */ top: 130px; } 50% { /* самая высокая точка прыжка */ top: 80px; } 80% { /* начало спуска */ top: 130px; } 100% { /* возврат в начальную позицию */ top: 150px; } } #cactus { /* ширина и высота кактуса */ width: 20px; height: 40px; /* относительное позиционирование */ position: relative; /* начальное положение кактуса */ top: 110px; left: 580px; /* путь к изображению кактуса*/ background-image: url("C:\Users\makgo\OneDrive\Desktop\img"); /* ширина и высота подложки */ background-size: 20px 40px; /* анимация перемещения кактуса */ animation: block 2s infinite linear; } @keyframes block { /* начальная позиция кактуса (справа) */ 0% { left: 580px; } /* конечная позиция кактуса (слева, за пределами экрана) */ 100% { left: -20px; } } // получаем элемент динозаврика по его ID const dino = document.getElementById("dino"); // функция прыжка function jump() { // проверяем, не находится ли динозаврик в прыжке if (dino.classList != "jump") { // добавляем класс jump для начала анимации прыжка dino.classList.add("jump"); // удаляем класс jump через 300 миллисекунд, чтобы завершить прыжок setTimeout(function () { dino.classList.remove("jump"); }, 300); } } // добавляем обработчик событий document.addEventListener("keydown", function (event) { // проверяем, была ли нажата клавиша пробела if (event.key === " ") { // если пробел нажат, вызываем функцию jump() jump(); } }); // Получаем элемент кактуса по его ID const cactus = document.getElementById("cactus"); // Устанавливаем интервал для проверки состояния игры каждые 10 мс let isAlive = setInterval(function () { // Получаем текущую y-позицию динозаврика let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top")); // Получаем текущую x-позицию кактуса let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left")); // Проверяем условия столкновения: // кактус находится в пределах 50 пикселей от динозаврика по оси x, // кактус ещё не прошёл динозаврика, и динозаврик не прыгнул высоко if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) { // Если произошло столкновение, выводим сообщение alert("Потрачено!"); } }, 10);