Пишем игру на JavaScript с нуля для начинающих
@labweb1) Заходим в редактор кода и создаём несколько файлов:
index.html
script.js
style.css
Так же создаём папку с изображениями и сюда закидываем два изображения:
2) Далее заходим в index.html:
2.1 Создаём структуру, подключаем стили и Js файл:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebLabDino</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="script.js"></script> </body> </html>
2.2 Добавляем класс game и внутри него будут 2 блока с идентификаторами (dino и cactus):
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebLabDino</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="game"> <div id="dino"></div> <div id="cactus"></div> </div> <script src="script.js"></script> </body> </html>
3) Переходим в style.css:
3.1 Стилизуем блок game, задаём ширину и высоту, а так же выделяем нижнюю границу и центрируем:
.game {
width: 600px;
height: 200px;
border-bottom: 1px solid #000;
margin: auto;
}
3.2 Стилизуем динозаврика, указываем ширину и высоту, далее зададим саму картинку и позицию:
#dino {
width: 50px;
height: 50px;
background-image: url(img/dino.png);
background-size: 50px 50px;
position: relative;
top: 150px;
}
3.3 Стилизуем кактус, указываем ширину и высоту, далее зададим саму картинку и позицию, а так же назначим анимацию:
#cactus {
width: 20px;
height: 40px;
background-image: url(img/cactus.png);
background-size: 20px 40px;
position: relative;
top: 110px;
left: 580px;
animation: cactusMove 1s infinite linear;
}
@keyframes cactusMove {
0% {
left: 580px;
}
100% {
left: -20px;
}
}
3.4 Создадим класс jump и сюда добавим анимацию, только без использования бесконечности (infinite):
.jump {
animation: jump 0.3s linear;
}
@keyframes jump {
0% {
top: 150px;
}
30% {
top: 130px;
}
50% {
top: 80px;
}
80% {
top: 130px;
}
100% {
top: 150px;
}
}
4) Переходим в script.js:
4.1 Создаём 2 константы dino и cactus, далее нужно получить элементы:
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
4.2 Добавим обработчик событий, который будет запускаться нашу функция jump:
document.addEventListener("keydown", function (event) { jump(); });
4.3 Пропишем саму функцию jump, где будет условие, если динозаврик не имеет класс jump, то мы его добавляем, в противном случае, удаляем этот класс:
function jump() {
if (dino.classList != "jump") {
dino.classList.add("jump")
}
setTimeout(function (){
dino.classList.remove("jump")
}, 300)
}
4.4 Создадим переменную Alive, где setInterval позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени, далее прописываем функцию с помощью которой, мы будем получать значения, где находится динозаврик и кактус, для этого используем parseInt, данный метод разбивает строковый элемент и возвращает целое число. В конце нужно прописать условие если cactusLeft будет меньше 50 и больше 0, и dinoTop больше или равно 140, то выводим GameOver, и поставить периодичность методу setInterval:
let Alive = setInterval (function(){
let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) {
alert("Game Over")
}
}, 10)
let Alive = setInterval (function(){
let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) {
alert("Game Over")
}
}, 10)