🎯 Цели урока

Создать HTML разметку для игры Memory
Структурировать игровое поле и карточки
Добавить элементы для отображения счета
Настроить базовую стилизацию

🔨 Что мы создаем

Интерактивную игру Memory (или "Найди пары") с игровым полем из 16 карточек, счетчиком очков и попыток, кнопкой перезапуска игры в сине-голубых тонах.

1. HTML структура игры

Игра Memory состоит из нескольких основных компонентов: заголовка, информационной панели, игрового поля и кнопки управления.

Шаг 1

Базовая HTML разметка

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game - Найди пары картинок!</title>
</head>
<body>
    <h1>🃏 Игра Memory - Найди одинаковые картинки!</h1>
    
    <!-- Здесь будет содержимое игры -->
    
</body>
</html>

Начинаем с базовой HTML5 структуры. Заголовок <h1> содержит название игры с эмодзи для привлечения внимания.

Шаг 2

Информационная панель

<div id="game-info">
    <p>Найдено пар: <span id="score">0</span> из <span id="total-pairs">8</span></p>
    <p>Попытки: <span id="attempts">0</span></p>
</div>

Панель с информацией о текущем состоянии игры:

#score - количество найденных пар
#total-pairs - общее количество пар
#attempts - количество попыток

Шаг 3

Игровое поле

<div id="game-board">
    <!-- Карточки будут созданы через JavaScript -->
</div>

Контейнер для игрового поля. Карточки будут создаваться динамически с помощью JavaScript, что позволит легко изменять их количество и перемешивать при каждой новой игре.

Шаг 4

Кнопка управления

<button id="restart-btn">Начать новую игру</button>

Кнопка для перезапуска игры. ID используется для привязки обработчика событий в JavaScript.

2. Структура карточки

Каждая карточка в игре Memory имеет две стороны: лицевую (с картинкой) и обратную (рубашку). Рассмотрим, как будет создаваться карточка.

Шаг 5

HTML структура одной карточки

<div class="card">
    <div class="card-front">
        <img src="img/dog.png" alt="Картинка">
    </div>
    <div class="card-back">
        ?
    </div>
</div>

Структура карточки включает:

.card - основной контейнер
.card-front - лицевая сторона с картинкой
.card-back - обратная сторона (рубашка)

Шаг 6

Полная HTML структура

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game - Найди пары картинок!</title>
</head>
<body>
    <h1>🃏 Игра Memory - Найди одинаковые картинки!</h1>
    
    <div id="game-info">
        <p>Найдено пар: <span id="score">0</span> из <span id="total-pairs">8</span></p>
        <p>Попытки: <span id="attempts">0</span></p>
    </div>
    
    <div id="game-board">
        <!-- Карточки будут созданы через JavaScript -->
    </div>
    
    <button id="restart-btn">Начать новую игру</button>
</body>
</html>

3. Демонстрация структуры

Предварительный вид игры Memory

🃏 Игра Memory

Найдено пар: 0 из 8

Попытки: 0

4. Важные особенности HTML

ID элементов

Каждый важный элемент имеет уникальный ID для обращения из JavaScript:

game-info - информационная панель
score - счетчик найденных пар
total-pairs - общее количество пар
attempts - счетчик попыток
game-board - игровое поле
restart-btn - кнопка перезапуска

Семантическая разметка

Используем семантические HTML5 элементы для лучшей структуры:

<h1> для главного заголовка
<div> для группировки элементов
<button> для интерактивных элементов
<img> с атрибутом alt для изображений

Подготовка к JavaScript

HTML структура подготовлена для динамического создания карточек:

Пустой контейнер #game-board для карточек
ID для всех элементов, которые будут изменяться
Семантические классы для стилизации

Урок 2: CSS стилизация →

🃏 Урок 1: HTML структура игры Memory