В этой статье мы разберем, как создать простую игру на память, используя HTML, CSS и JavaScript. Мы шаг за шагом объясним каждый фрагмент кода, чтобы даже те, кто впервые видит программирование, смогли понять и повторить результат. Мы рассмотрим, как создать структуру страницы, стилизовать ее и добавить логику игры, чтобы ваши карты ожили. Давайте начнем! 🚀
Игра на память (или "Memory Game") — это классическая игра, в которой игрок должен найти пары одинаковых карт, открывая их по очереди. Главная задача — запомнить местоположение каждой карты, чтобы успешно находить пары. Это отличное упражнение для тренировки памяти и концентрации.
Наш проект состоит из трех основных файлов:
index.html: структура игры, то, что видит пользователь.
style.css: стили, делающие игру красивой и приятной на вид.
script.js: логика игры, определяющая поведение карт при взаимодействии с пользователем.
Также у нас есть папка images, содержащая изображения карт, которые будут использоваться в игре.
Начнем с HTML-файла. Он содержит базовую структуру нашей игры, которая представляет собой игровую доску и подключенные файлы стилей и скриптов:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Игра на память</title>
</head>
<body>
<div class="game-board">
<!-- Карты будут генерироваться здесь -->
</div>
<script src="script.js"></script>
</body>
</html>
<div class="game-board">
: Это контейнер, в котором будут располагаться все карты. Позже мы добавим их динамически с помощью JavaScript. Это основное место для взаимодействия пользователя с игрой.
<link rel="stylesheet" href="style.css">
: Подключаем файл CSS, чтобы стилизовать нашу игру и сделать ее визуально привлекательной.
<script src="script.js">
: Подключаем JavaScript, чтобы добавить логику игры и сделать игру интерактивной.
Теперь перейдем к CSS. Давайте стилизуем нашу игру, чтобы она выглядела привлекательно и была удобной для игрока.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
}
.card {
width: 100px;
height: 150px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.card img {
max-width: 100%;
max-height: 100%;
display: none;
}
.card.flipped img {
display: block;
}
body
: Центрируем весь контент на экране, чтобы игра выглядела симпатично и находилась по центру. Это создаст приятный пользовательский опыт.
.game-board
: Используем grid layout для организации карт в виде сетки. Это помогает сделать расположение карт аккуратным и равномерным.
.card
: Стили для карт. Они будут иметь красивый белый фон, тень и закругленные углы, что сделает их визуально привлекательными. Когда пользователь наводит мышку, карта должна казаться интерактивной.
.card img
: По умолчанию изображения карт скрыты, так как игрок сначала видит только рубашку карты.
.flipped
: Когда карта переворачивается, мы показываем изображение, чтобы игрок мог видеть, что под ней скрывается.
Теперь самое интересное — добавим логику игры с помощью JavaScript. JavaScript отвечает за взаимодействие игрока с картами, проверку совпадений и управление ходом игры. Давайте разберем каждую функцию:
const cardsArray = [
{ name: 'card1', img: 'images/card1.png' },
{ name: 'card2', img: 'images/card2.png' },
// Добавьте остальные пары карт
];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
function createBoard() {
const gameBoard = document.querySelector('.game-board');
const shuffledCards = [...cardsArray, ...cardsArray].sort(() => 0.5 - Math.random());
shuffledCards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.name = card.name;
const cardImage = document.createElement('img');
cardImage.src = card.img;
cardElement.appendChild(cardImage);
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flipped');
if (!firstCard) {
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
if (firstCard.dataset.name === secondCard.dataset.name) {
disableCards();
} else {
unflipCards();
}
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetBoard();
}, 1000);
}
function resetBoard() {
[firstCard, secondCard, lockBoard] = [null, null, false];
}
document.addEventListener('DOMContentLoaded', createBoard);
Массив cardsArray
: Содержит объекты с информацией о картах, включая их название и изображение. Мы дублируем каждую карту, чтобы создать пары.
Переменные firstCard
, secondCard
, lockBoard
: Эти переменные помогают отслеживать состояние игры. firstCard
и secondCard
хранят информацию о текущих перевернутых картах, а lockBoard
предотвращает переворачивание других карт, пока проверяются совпадения.
Функция createBoard()
: Создает игровую доску. Мы перемешиваем карты, чтобы каждая игра была уникальной и интересной, а затем добавляем карты на доску.
Функция flipCard()
: Управляет переворачиванием карты. Если это первая перевернутая карта, она сохраняется в firstCard
. Если это вторая карта, проверяем, совпадают ли они.
Функция checkForMatch()
: Сравнивает две перевернутые карты. Если они совпадают, вызывается disableCards()
, чтобы отключить возможность переворота этих карт.
Функции disableCards()
и unflipCards()
: Если карты совпали, мы оставляем их открытыми и отключаем событие клика. Если не совпали — переворачиваем их обратно через секунду.
Функция resetBoard()
: Сбрасывает значения переменных, чтобы можно было продолжить игру без ошибок.
Событие DOMContentLoaded
: Гарантирует, что наша функция createBoard()
будет вызвана, когда весь HTML будет загружен.
Поздравляем! Теперь у вас есть полное понимание того, как создать простую игру на память с помощью HTML, CSS и JavaScript. Мы прошли путь от базовой структуры HTML до сложной логики игры с использованием JavaScript. Эта игра — отличный способ попрактиковаться в основах программирования и улучшить свои навыки работы с DOM. Не бойтесь экспериментировать и добавлять новые фичи, такие как счетчик очков или таймер! 😊
Не нашли нужной статьи?
Напишите нам и ее сделаем!