Игра «Найди пару» – это популярная и простая веб-игра, которая помогает развивать внимание и память. Она состоит из поля с рядом перевёрнутых карт, каждая из которых имеет пару. Задача игрока – находить парные карты за наименьшее количество попыток. В этой статье мы подробно рассмотрим процесс создания такой игры с использованием HTML, CSS и JavaScript.
Основы игры
Игра базируется на несложных принципах, но требует внимания к деталям в реализации. Она включает в себя генерацию игрового поля, размещение на нём карт с изображениями, обработку кликов по картам и логику нахождения пар.
Технологический стек
- Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
- Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
- Что ждет рынок программирования и почему мы решили сюда пойти
- HTML: структура игры.
- CSS: стилизация элементов игры.
- JavaScript (JS): логика игры, взаимодействие с пользователем.
Разработка игры
Перейдем к пошаговому созданию всей внешней и внутренней логики игры.
Шаг 1. создание структуры страницы
Создаем базовый HTML-документ, включая DOCTYPE, head и body. В head добавляем ссылку на CSS-файл, а также подключаем JS-файл перед закрывающим тегом body.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Найди Пару</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="game"></div> <script src="script.js"></script> </body> </html>
Шаг 2. Стилизация
В файле style.css задаем основные стили: фон страницы, стили для игрового поля и карт.
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game {
width: 600px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.card {
background: #009688;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24px;
cursor: pointer;
}
Шаг 3. Логика игры на JavaScript
В script.js начинаем с создания массива карт и функции для их перемешивания. Каждая карта представлена объектом со свойствами id и image, где image — путь к изображению.
let cards = [
{ id: 1, image: 'image1.png' },
{ id: 1, image: 'image1.png' },
// Добавить все карты по аналогии
];
cards = shuffle(cards);
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}Затем добавляем функцию для отображения карт на странице и обработчики клика, чтобы реализовать логику сравнения выбранных карт.
function renderCards(cards) {
const gameContainer = document.getElementById('game');
cards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
// Добавление обработчика клика
cardElement.addEventListener('click', () => handleCardClick(card));
gameContainer.appendChild(cardElement);
});
}
function handleCardClick(card) {
console.log(card);
// Реализация логики выбора карты и проверки на совпадение
}
renderCards(cards);
Шаг 4. Обработка выбора карты и поиска пары
Реализуем логику выбора карты, ее отображения, проверки на совпадение с ранее выбранной картой и отслеживания выигрыша.
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard(card) {
if (lockBoard) return;
if (card === firstCard) return;
card.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = card;
return;
}
secondCard = card;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.id === secondCard.dataset.id;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1000);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
Шаг 5. Добавление изображений на карты
Вам нужно добавить изображения на карты. Можете использовать любые изображения в формате PNG или JPEG. Не забудьте добавить атрибут data-id к каждой карте для проверки совпадения.
<div class="card" data-id="1"><img src="image1.png" alt="Image 1"></div> <div class="card" data-id="1"><img src="image1.png" alt="Image 1"></div> <!-- Добавьте остальные карты с изображениями и уникальными data-id -->
Шаг 6. Завершение логики игры
Дополним логику игры функцией для проверки завершения игры и обработчиком для перезапуска игры после завершения.
function checkWin() {
if (document.querySelectorAll('.card.flip').length === cards.length) {
setTimeout(() => {
alert('Поздравляем! Вы нашли все пары!');
resetGame();
}, 500);
}
}
function resetGame() {
document.getElementById('game').innerHTML = '';
cards = shuffle(cards);
renderCards(cards);
}
Заключение
Разработка игры «Найди пару» на HTML, CSS и JavaScript — это увлекательный и образовательный процесс. Она не только позволяет попрактиковаться в освоении основных веб-технологий, но и дает возможность создать увлекательное приложение для тренировки памяти и внимания. Используйте этот проект как основу для экспериментов и улучшения — добавьте новые функции, улучшите дизайн или оптимизируйте производительность. Все это поможет вам стать лучшим веб-разработчиком и создать еще более захватывающие проекты в будущем.
- Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Создай и прокачай собственного чат-бота
- Подарим подборку бесплатных инструментов для написания кода
