Создайте игру Dragon's World с помощью HTML, CSS и JavaScript

Опубликовано: 30 Ноября, 2021

Введение в проект: «Dragon's World» - это игра, в которой один дракон пытается спастись от другого дракона, перепрыгивая через дракона, который встречается на его пути. Счет обновляется, когда один дракон спасается от другого дракона.

Проект будет содержать файлы HTML, CSS и JavaScript. HTML-файл добавляет в игру структуру, за которой следует стилизация с помощью CSS. JavaScript добавляет в игру функциональность.

Файловая структура:

  • index.html
  • style.css
  • script.js

HTML-код:

  • Заголовок: покажет название игры.
  • Часть Game Over: отображается, когда вы проигрываете игру.
  • Часть препятствия: она будет содержать препятствие, от которого дракон должен спастись.
  • Часть дракона: она будет содержать дракона, которого нужно спасти от препятствия, то есть другого дракона.
  • Часть счета: показывает текущий счет игры.

index.html

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href=
        "style.css?_cacheOverride=1606401798626">
  
    <link href=
        wght@0, 300;1, 700&display=swap"
        rel="stylesheet">
</head>
  
<body>
    <h1 id="gameName">Welcome to Dragon"s world</h1>
    <div class="container">
        <div class="gameover">Game Over</div>
        <div id="scorecount">Your score : 0</div>
        <div class="obstacle animateobstacle"></div>
        <div class="dragon" style="left: 426px;"></div>
    </div>
</body>
  
</html>

Код CSS:

  • Позиционирование названия игры: название игры позиционируется абсолютным свойством CSS.
  • Стиль фонового изображения: в классе контейнера мы поместили фоновое изображение игры с размером фона, установленным для покрытия .
  • Стиль оценочной карты: мы разместили оценочную карту в правом верхнем углу страницы, а также снабдили ее подходящим цветом фона, чтобы сделать ее привлекательной. Текст в нем будет показан белым .
  • Стиль изображения препятствия: мы разместили препятствие в нижнем левом углу страницы и добавили для него анимацию, чтобы оно могло перемещаться влево.
  • Стиль дракона: мы разместили дракона в нижнем левом углу страницы и добавили ему анимацию, чтобы он мог подпрыгнуть и спастись.
  • Стиль игры поверх: мы разместили часть игры поверх центра страницы, и она появится, когда дракон столкнется с препятствием.

style.css

/ * Сброс CSS * /
* {
    маржа: 0px;
    отступ: 0 пикселей;
}
тело {
    / * Скрывает нижнюю полосу прокрутки * /
    переполнение: скрыто;
}
/ * Стиль названия игры * /
#gameName {
    позиция: абсолютная;
    верх: 30vh;
    осталось: 38vw;
}
/ * Стиль фонового изображения * /
.container {
    фоновое изображение: url (cover.png);
    размер фона: обложка;
    ширина: 100ввт;
    высота: 100вх;
}
/ * Стиль ScoreCard * /
#scorecount {
    позиция: абсолютная;
    верх: 20 пикселей;
    вправо: 20 пикселей;
    цвет фона: черный;
    отступ: 28 пикселей;
    радиус границы: 20 пикселей;
    цвет белый;
}
/ * Стиль и расположение изображений препятствий * /
.препятствие {
    фоновое изображение: URL (препятствие.png);
    размер фона: обложка;
    ширина: 154 пикс;
    высота: 126 пикселей;
    позиция: абсолютная;
    внизу: 0px;
    справа: 120 пикселей;
}
/ * Применяем анимацию к препятствию
 так что он может двигаться влево * /
.animateobstacle {
    анимация: aniob 5s linear infinite;
}
@keyframes aniob {
    0% {
        слева: 100vw;
    }
    100% {
        слева: -10vw;
    }
}
/ * Стиль дракона * /
.Дракон {
    фоновое изображение: url (dragon.png);
    размер фона: обложка;
    ширина: 194 пикселей;
    высота: 126 пикселей;
    позиция: абсолютная;
    внизу: 0px;
    слева: 90 пикселей;
}
/ * Применяем анимацию к дракону так 
что он может спастись, подпрыгнув * /
.animatedragon {
    анимация: ани 1с линейная;
}
@keyframes ani {
    0% {
        внизу: 0px;
    }
    25% {
        внизу: 150 пикселей;
    }
    50% {
        внизу: 300 пикселей;
    }
    75% {
        внизу: 211px;
    }
    100% {
        внизу: 0px;
    }
}
/ * стиль и позиционирование геймплея * /
.игра окончена {
    видимость: скрыта;
    семейство шрифтов: «Ubuntu», без засечек;
    позиция: абсолютная;
    верх: 50vh;
    слева: 35vw;
    красный цвет;
    font-weight: жирный;
    font-size: 6rem;
    цвет фона: огнеупорный кирпич;
    радиус границы: 20 пикселей;
}

Код JavaScript:

1. Движение дракона: обеспечивается событием onkeydown.

  • Клавиша со стрелкой вверх: при нажатии на нее дракон прыгнет вверх (анимация обеспечивается CSS).
  • Клавиша со стрелкой влево: при нажатии на нее дракон переместится влево (анимация обеспечивается CSS).
  • Клавиша со стрелкой вправо: при нажатии на нее дракон переместится влево (анимация обеспечивается CSS).
document.onkeydown = function (e) {
    console.log (e.keyCode);
    if (e.keyCode == 38) {
        дракон = document.querySelector ('. дракон');
        dragon.classList.add ('анимированный дракон');
        setTimeout (() => {
            dragon.classList.remove ('анимированный дракон');
        }, 700);
    }
    if (e.keyCode == 37) {
        дракон = document.querySelector ('. дракон');
        dragonx = parseInt (window.getComputedStyle (дракон, ноль)
            .getPropertyValue ('влево'));
        dragon.style.left = dragonx - 112 + «пикс»;
    }
    if (e.keyCode == 39) {
        дракон = document.querySelector ('. дракон');
        dragonx = parseInt (window.getComputedStyle (
            дракон, ноль) .getPropertyValue ('left'));
        dragon.style.left = dragonx + 112 + «пикс»;
    }
}

2. Обновление оценки: оценка считается выполненной только при выполнении заданного условия. Мы вычислим левое и нижнее значения как препятствия, так и дракона, а затем увеличим счет на основе правильного значения, которое показывает, что дракон спас себя от препятствия. Для этого мы взяли «перекрестную» переменную и присвоили ей значение «true». Когда дракон благополучно пересекает препятствие, мы устанавливаем значение «false». Примерно через 1 с мы меняем значение креста на «истина». Мы также сделали препятствие более быстрым после каждого пересечения, что повысило уровень сложности.

setInterval (() => {
    дракон = document.querySelector ('. дракон');
    gameover = document.querySelector ('. gameover');
    Препятствие = document.querySelector ('. Препятствие');

    dx = parseInt (window.getComputedStyle (
        дракон, ноль) .getPropertyValue ('left'));

    dy = parseInt (window.getComputedStyle (
        дракон, ноль) .getPropertyValue ('снизу'));

    ox = parseInt (window.getComputedStyle (
        препятствие, ноль) .getPropertyValue ('left'));

    oy = parseInt (window.getComputedStyle (
        препятствие, ноль) .getPropertyValue ('дно'));

    offsetx = Math.abs (dx - ox);
    offsety = Math.abs (dy - ой);

    console.log (offsetx, offsety);

    if (offsetx <120 && offsety <= 144) {
        gameover.style.visibility = 'видимый';
        Препятствие.classList.remove ('оживленное препятствие');
    } else if (offsetx <125 && cross) {
        оценка + = 1;
        updateScore (оценка);
        крест = ложь;
        setTimeout (() => {
            крест = правда;
        }, 1000);
        setInterval (() => {
            obsanidur = parseFloat (окно
                .getComputedStyle (препятствие, ноль)
                .getPropertyValue ('продолжительность анимации'));

            Препятствие.стиль.анимацияДлительность
                = обсанидур - 0,01 + 's';
        }, 500);
    }
}, 10);

function updateScore (score) {
    scorecount.innerHTML = "Ваша оценка:" + оценка;
}

script.js

<script>
cross = true ;
score = 0;
document.onkeydown = function (e) {
console.log(e.keyCode);
if (e.keyCode == 38) {
dragon = document.querySelector( '.dragon' );
dragon.classList.add( 'animatedragon' );
setTimeout(() => {
dragon.classList.remove( 'animatedragon' );
}, 700);
}
if (e.keyCode == 37) {
dragon = document.querySelector( '.dragon' );
dragonx = parseInt(window.getComputedStyle(
dragon, null ).getPropertyValue( 'left' ));
dragon.style.left = dragonx - 112 + "px" ;
}
if (e.keyCode == 39) {
dragon = document.querySelector( '.dragon' );
dragonx = parseInt(window.getComputedStyle(
dragon, null ).getPropertyValue( 'left' ));
dragon.style.left = dragonx + 112 + "px" ;
}
}
setInterval(() => {
dragon = document.querySelector( '.dragon' );
gameover = document.querySelector( '.gameover' );
obstacle = document.querySelector( '.obstacle' );
dx = parseInt(window.getComputedStyle(
dragon, null ).getPropertyValue( 'left' ));
dy = parseInt(window.getComputedStyle(
dragon, null ).getPropertyValue( 'bottom' ));
ox = parseInt(window.getComputedStyle(
obstacle, null ).getPropertyValue( 'left' ));
oy = parseInt(window.getComputedStyle(
obstacle, null ).getPropertyValue( 'bottom' ));
offsetx = Math.abs(dx - ox);
offsety = Math.abs(dy - oy);
console.log(offsetx, offsety);
if (offsetx < 120 && offsety <= 144) {
if (score != 0)
scorecount.innerHTML = "Your score : " + score;
gameover.style.visibility = 'visible' ;
obstacle.classList.remove( 'animateobstacle' );
} else if (offsetx < 125 && cross) {
score += 1;
updateScore(score);
cross = false ;
setTimeout(() => {
cross = true ;
}, 1000);
setInterval(() => {
obsanidur = parseFloat(window
.getComputedStyle(obstacle, null )
.getPropertyValue( 'animation-duration' ));
obstacle.style.animationDuration
= obsanidur - 0.01 + 's' ;
}, 500);
}
}, 10);
function updateScore(score) {
scorecount.innerHTML = "Your score : " + score;
}
</script>

Ссылка: Dragon game

Выход: