Сьогодні на нас чекає гра на JavaScript “Єдиноріг і веселки”. В цій грі ми гратимемо за єдинорога і шукатимемо веселку. Єдиноріжка буде збирати веселки, за кожну отримуватиме бали.
Суть гри на JavaScript “Єдиноріг і веселки”
Мета гри – зібрати якнайбільше веселок. На сторінці випадковим чином розміщується єдиноріг і веселка. Ми керуватимемо єдинорогом за допомогою стрілок. За кожну зібрану веселку нараховуються бали.
Створюємо гру
1: Створіть новий проєкт. Додайте файл javascript і підключіть його на сторінці html
<script src="script.js"></script>2: Створіть html-код сторінки гри. Всі елементи мають розміщатися у div з id=”game”: додайте туди поле для рахунку, div для єдинорожки та веселки (unicorn, rainbow, game).
<div id="🎲">
<div class="score">Очки: <span id="score">0</span></div>
<div class="🦄" id="🦄"></div>
<div class="🌈" id="🌈"></div>
</div>3: Додайте стилі для гри
body {
margin: 0;
overflow: hidden;
font-family: sans-serif;
background: #cce7ff;
}
#game {
width: 100vw;
height: 100vh;
position: relative;
}
.unicorn {
width: 50px;
height: 50px;
background: url("https://unicorn.dev/wp-content/uploads/2022/07/Purple-Blue-Neon-Gaming-Facebook-Cover-Logo-4.png") no-repeat center/contain;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.rainbow {
width: 40px;
height: 40px;
background: url("https://360031.fs1.hubspotusercontent-na1.net/hub/360031/hubfs/feature_rainbow_seven_colors.png?width=500&name=feature_rainbow_seven_colors.png") no-repeat center/contain;
position: absolute;
}
.score {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
}
4: Створимо функцію для onload (працює від завантаження сторінки). Надалі увесь код будемо складати у цю функцію
window.onload = function () {
};5: В середині функції window.onload створіть клас UnicornGame
class UnicornGame {
}
new UnicornGame();
};
6: В нашому новому класі створіть конструктор. З атрибутами
this.unicorn = document.getElementById("🦄");
// аналогічно для 🌈
this.scoreEl = document.getElementById("score");
this.score = 0;
this.unicornX = window.innerWidth / 2 - 25;
this.unicornY = window.innerHeight / 2 - 25;scoreEl- це елемент на формі, який показуватиме рахунок. score- рахунок.this.unicornX та this.unicornY: початкові координати для єдинорога (розміщення по центру екрану).
7: Наступним кроком створимо метод для розтащування єдинорога на початку гри. Для розташування задаємо відступ зліва та зверху. Поставте правильні артибути
updateUnicornPosition() {
this.unicorn.style.left = `${this.⭐️}px`;
this.unicorn.style.top = `${this.⭐️}px`;
}8: Далі витавляємо веселку. З нею трохи складніше, бо для неї варто задати випадкові координати
placeRainbow() {
const x = Math.random() * (window.innerWidth - 100);
const y = Math.random() * (window.innerHeight - 40);
this.rainbow.style.left = `${x}px`;
this.rainbow.style.top = `${y}px`;
}
100 – ширина веселки, а 40 – її висота. Ви віднімаємо ці цифри, щоб випадково не закинути веселку частково за межі екрану.
9: Додаймо у конструктор класу виклик методів розташування героїв на початку гри.
this.updateUnicornPosition();
this.placeRainbow();Якщо ви все зробили правильно, то при оновленні сторінки веселка буде розташовуватись у новому місці, а єдиноріг ставитися по центру.
Рух єдинорога
10: Час єдинорогу почати рухатися, а то що він завмер на одному місці. Для цього у клас додамо новий метод moveUnicorn, який отримує параметром подію е (натиснення кнопки). Якщо натиснули кнопку зі стрілкою (вгору, вниз, вправо чи вліво), то єдиноріг має почати рухатися.
moveUnicorn(e) {
if (e.key === "ArrowLeft") this.unicornX -= 20;
// Додайте код для всіх стілок (Напр. ArrowUp, ArrowDown). Відрізнятися буде назва клавіші, unicornY\unicornX та знак перед дорівнює (плюс чи мінус)
this.unicornX = Math.max(0, Math.min(window.innerWidth - 50, this.unicornX));
this.unicornY = Math.max(0, Math.min(window.innerHeight - 50, this.unicornY));
this.updateUnicornPosition();
}this.unicornX = Math.max(0, Math.min(window.innerWidth – 50, this.unicornX)); цей і наступний рядок контроює, щоб єдиноріг не вийшов за межі екрану. Він встановлює граничне значення, яке він не перетне.
this.updateUnicornPosition(); оновлює розташування єдинорога
11: Додайте цей рядок у конструктор класу. Він буде слухати поділю натискання клавіші. І якщо клавішу натиснуто, то відразу викличе метод moveUnicorn.
document.addEventListener("keydown", (e) => this.moveUnicorn(e));Перевірте, що ваш єдиноріг рухаєься по клавішам мишки.
Єдиноріг натрапив на веселку
12: Залишилося додати метод checkCollisionLoop(),що відповідає за перевірку зіткнення між єдинорогом та веселкою в грі. Цей метод виконується періодично, кожні 100 мілісекунд, і перевіряє, чи відбулося зіткнення між героями. Якщо зіткнення відбулося, збільшується рахунок, і веселка переміщується на нове випадкове місце.
checkCollisionLoop() {
setInterval(() => {
const unicornRect = this.unicorn.getBoundingClientRect();
const rainbowRect = this.rainbow.getBoundingClientRect();
if (
unicornRect.left < rainbowRect.right &&
unicornRect.right > rainbowRect.left &&
🦄.🦄< 🌈.🌈&&
🦄.🦄> 🌈.🌈
// замініть смайли на перевірки по верху top і низу bottom
) {
this.score++;
this.scoreEl.textContent = this.score;
this.placeRainbow();
}
}, 100);
}
}setInterval(() => { … }, 100); функція, яка виконує певну дію через певний інтервал часу. У нашому випадку через 100 мілісекунд.
const unicornRect = this.unicorn.getBoundingClientRect(); – метод прямокутника, який покриває прямокутником розміри єдинорога на екрані.
Перевірка зіткнення :
unicornRect.left < rainbowRect.right: перевіряється, чи лівий край єдинорога знаходиться лівіше правого краю веселки (тобто єдиноріг може потрапити до веселки зліва).
Якщо зіткнення відбулося :
this.score++: збільшується рахунок гри на 1
this.scoreEl.textContent = this.score: оновлюється текст на екрані, щоб відобразити новий рахунок.
this.placeRainbow(): переміщаємо веселку на нову випадкову позицію на екрані.
13: Додайте у конструктор виклик методу для перевірки зіткнення
this.checkCollisionLoop();
Домашня робота
1: Замініть єдинорога та веселку на нових героїв.
2: Додайте ще якийсь об’єкт, який має збирати ваш герой. За цей об’єкт має нараховуватися +3 бали
3: Додайте таймер у гру, щоб вона закінчувалася через 30 секунд. Після закінчення має виводитися повідомлення про завершення і рахунок.
Для цього додайте у конструктор (в кінець!)
this.gameDuration = 30 * 1000; // 30 секунд
setTimeout(() => {
this.endGame();
}, this.gameDuration);У checkCollisionLoop додайте змінну (тільки жирний код), яка допоможе зупинити перевірку заткнень, коли час вийшов.
this.collisionInterval = setInterval(() => { ....}Додайте метод для завершення гри (повідомлення про завершення гри напишіть самостійно, замінивши смайлик. Виведіть фінальний рахунок у повідомленні)
// Метод для завершення гри
endGame() {
clearInterval(this.collisionInterval); // Зупиняємо перевірку зіткнень
alert("🌻🌻🌻🌻🌻 ");
}Час показувати не буде, але якщо все правильно зробили, то через 30 секунд побачите повідомлення про завершення гри.
Level Up
Гра на JavaScript “Єдиноріг і веселки”
1: Додайте ворога у гру, який рухається випадково. Якщо герой зіштовхнеться з ворогом, то втратить всі свої очки.
Вам може допомогти цей код:
moveEnemy() {
let enemyY = 0; // Початкова вертикальна позиція ворога
const move = setInterval(() => {
enemyY += 5; // Рухаємо ворога вниз
if (enemyY > window.innerHeight) {
enemyY = 0; // Якщо ворог виходить за межі екрану, повертаємо його на верх
this.enemy.style.left = `${Math.random() * (window.innerWidth - 40)}px`; // Випадкова горизонтальна позиція
}
this.enemy.style.top = `${enemyY}px`; // Оновлюємо позицію ворога
// Перевірка на зіткнення з ворогом вже всередині moveEnemy()
const unicornRect = this.unicorn.getBoundingClientRect();
const enemyRect = this.enemy.getBoundingClientRect();
if (unicornRect.left < enemyRect.right && unicornRect.right > enemyRect.left && unicornRect.top < enemyRect.bottom && unicornRect.bottom > enemyRect.top) {
🖤🖤🖤🖤// обнуляємо бали при зіткненні
}
}, 50); // Оновлюємо позицію ворога кожні 50 мілісекунд
}Перевірка зіткнення з ворогом
// Перевірка на зіткнення з ворогом
const enemyRect = this.enemy.getBoundingClientRect();
if (unicornRect.left < enemyRect.right && unicornRect.right > enemyRect.left && unicornRect.top < enemyRect.bottom && unicornRect.bottom > enemyRect.top) {
🖤🖤🖤🖤// обнуляємо бали при зіткненні
}
Хочете дізнатися більше ? Переходьте на сторінку з уроками по CSS та Javascript і прокачайте навички з веброзробки 😎🤖 !!!
