Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
партнеры
Подать заявку
Жюри/
Призы
ТЗ
Игра с динозавриком
HTML
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
Игра с динозавриком
.game {
/* ширина игровой области */
width: 600px;
/* высота игровой области */
height: 200px;
/* рамка серого цвета и отступы вокруг неё */
border: 1px solid rgb(122, 122, 122);
/* автоматические отступы */
margin: auto;
}
#dino {
/* ширина и высота динозаврика */
width: 50px;
height: 50px;
/* путь к изображению динозаврика */
background-image: url("https://static.tildacdn.com/tild6564-3262-4638-b838-346363626535/trex.png");
/* ширина и высота подложки */
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("https://static.tildacdn.com/tild3734-3262-4531-a362-323634633136/cactus.png");
/* ширина и высота подложки */
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);
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "Methods and rules that cannot be improved upon have been developed over centuries. To produce perfect books, these rules must be revived and applied." The front matter, or preliminaries, is the first section of a book and typically has the fewest pages. While all pages are counted, page numbers are generally not printed, whether the pages are blank or contain content.
