Урок: Как создать игру «Память» на HTML, CSS и JavaScript

Введение

Игра «Память» — это классическая игра, где нужно находить пары одинаковых карт. В этом уроке мы создадим простую, но красивую игру с эмодзи, которая поможет понять базовые концепции веб-разработки: разметку, стили и взаимодействие с пользователем через JavaScript.

Шаг 1. Создаем базовую структуру HTML

Создаем файл index.html и добавляем базовую разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Игра Память</title>
</head>
<body>
<h1>Игра Память</h1>
<div class="grid" id="grid"></div>
</body>
</html>

Тег <h1> — заголовок игры.
<div class="grid" id="grid"> — контейнер, где будут располагаться карточки.

Шаг 2. Добавляем стили (CSS)

Чтобы игра выглядела красиво и удобно, пишем стили внутри <style> в <head>. Ты можешь вставить эти стили сразу в <head>, либо подключить отдельный CSS-файл.

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e1e2f, #2b2b40);
color: #f0f0f0;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
margin-bottom: 30px;
font-size: 2.5rem;
color: #f8f8f8;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 15px;
justify-content: center;
}
.card {
width: 100px;
height: 100px;
background: #3a3a4f;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 12px;
user-select: none;
position: relative;
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}
.card.flipped {
background: #f0f0f0;
color: #1a1a1a;
}
.card.matched {
background: #2ecc71;
color: white;
pointer-events: none;
box-shadow: 0 0 15px rgba(46, 204, 113, 0.8);
}

Шаг 3. Логика игры на JavaScript

Теперь самое интересное — как заставить игру работать!

Добавим в конце <body> блок <script>, где будет весь наш код.

Основные задачи скрипта:

Создать пары эмодзи.
Перемешать их.
Отобразить карточки на странице.
Обрабатывать клики по карточкам.
Проверять совпадения и показывать результаты.

Вот код с комментариями для понимания:

(() => {
// Список эмодзи для карточек (8 пар = 16 карточек)
const EMOJIS = ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼'];
// Классы CSS для удобства
const CARD_CLASS = 'card';
const FLIPPED_CLASS = 'flipped';
const MATCHED_CLASS = 'matched';
// Задержка перед переворотом карт (в миллисекундах)
const FLIP_DELAY = 1000;
const grid = document.getElementById('grid');
// Основной класс игры
class MemoryGame {
constructor(gridElement, emojis) {
// Запоминаем сетку и эмодзи (создаем по 2 одинаковых карточки)
this.grid = gridElement;
this.emojis = [...emojis, ...emojis];
this.firstCard = null; // первая открытая карта
this.locked = false; // блокировка кликов во время ожидания переворота
this.init(); // запускаем игру
}
init() {
this.clearGrid(); // очистить сетку
this.renderShuffledCards();// создать и показать перемешанные карты
}
clearGrid() {
this.grid.innerHTML = '';
}
renderShuffledCards() {
const shuffled = this.shuffle(this.emojis);
shuffled.forEach((emoji, index) => {
const card = this.createCard(emoji, index);
this.grid.appendChild(card);
});
}
// Метод для перемешивания массива (простой способ)
shuffle(array) {
return [...array].sort(() => Math.random() - 0.5);
}
// Создаем карточку с эмодзи и назначаем обработчик клика
createCard(emoji, index) {
const card = document.createElement('div');
card.classList.add(CARD_CLASS);
card.dataset.emoji = emoji;
card.dataset.index = index;
card.addEventListener('click', this.handleCardClick.bind(this));
return card;
}
// Обработка клика по карточке
handleCardClick(event) {
const card = event.currentTarget;
// Игнорируем клик, если игра заблокирована или карта уже открыта/найдена
if (this.shouldIgnoreClick(card)) return;
this.flipCard(card);
// Если это первая карта — просто запоминаем и ждем вторую
if (!this.firstCard) {
this.firstCard = card;
return;
}
// Вторая карта — блокируем игру и проверяем совпадение
this.locked = true;
const secondCard = card;
const isMatch = this.isMatch(this.firstCard, secondCard);
if (isMatch) {
this.markAsMatched(this.firstCard, secondCard);
this.resetTurn();
} else {
// Если не совпали, переворачиваем обратно через задержку
setTimeout(() => {
this.unflipCard(this.firstCard);
this.unflipCard(secondCard);
this.resetTurn();
}, FLIP_DELAY);
}
}
shouldIgnoreClick(card) {
return (
this.locked ||
card.classList.contains(FLIPPED_CLASS) ||
card.classList.contains(MATCHED_CLASS)
);
}
flipCard(card) {
card.classList.add(FLIPPED_CLASS);
card.textContent = card.dataset.emoji;
}
unflipCard(card) {
card.classList.remove(FLIPPED_CLASS);
card.textContent = '';
}
isMatch(card1, card2) {
return card1.dataset.emoji === card2.dataset.emoji;
}
markAsMatched(...cards) {
cards.forEach(card => card.classList.add(MATCHED_CLASS));
}
resetTurn() {
this.firstCard = null;
this.locked = false;
}
}
// Запуск игры
new MemoryGame(grid, EMOJIS);
})();

Объяснение JavaScript

EMOJIS — массив с 8 разными эмодзи, которые будут дублироваться для создания пар.
MemoryGame — класс, который отвечает за всю логику игры.
init() — сбрасывает поле и запускает рендер карточек.
shuffle() — перемешивает массив эмодзи.
createCard() — создает элемент карточки, добавляет класс и обработчик.
handleCardClick() — логика при клике: открытие карты, проверка пары, переворот обратно.
Переменная locked блокирует дополнительные клики во время анимации переворота.
Карточки меняют текст (эмодзи) и фон, чтобы визуально показывать открытие/совпадение.

Заключение

Создавать игры на HTML, CSS и JavaScript — не так сложно, как кажется. Даже такая игра, как «Память», включает в себя всего одну HTML-страницу, немного стилей и простой JavaScript. Главное — понимать, как устроены элементы на странице и как они взаимодействуют между собой.

🎮 Хочешь делать игры, но не знаешь, с чего начать?

Попробуй себя в геймдеве — бесплатно!

👉 У меня есть мини-курс по HTML, CSS и JavaScript, где ты:

🔸 разберёшься с основами HTML (да, прямо с нуля)

🔸 сделаешь интерактивную историю с выбором

🔸 начнёшь путь к своей первой игре — прямо в браузере

📘 Первые несколько уроков — бесплатно. Поймёшь, нравится ли тебе, и решишь, хочешь ли продолжать.

Дальше — по подписке: удобно, без перегруза, с обратной связью и с результатом.

💬 Всё просто, пошагово и без сложных слов. Даже если ты никогда не пробовал кодить.

🔗 Хочу начать курс бесплатно и сделать свою игру

✨ Начни сегодня. Сделай свою игру.