Урок 1: HTML основы игрового интерфейса

🎯 Цель урока

В этом уроке мы изучим, как создавать HTML-структуру для игры "Угадай число". Научимся работать с числовыми полями ввода, валидацией и семантической разметкой.

Ты узнаешь, как правильно структурировать игровой интерфейс и сделать его доступным для всех пользователей, включая людей с ограниченными возможностями.

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

Вот как выглядит основная структура нашей игры:

Твоя попытка (1-50):

Введи число от 1 до 50

🏗️ Базовая HTML структура

Начнём с создания базовой структуры HTML-документа. Игра "Угадай число" требует чёткой организации элементов для удобства пользователя.

🏗️ Базовый HTML шаблон

<!-- Базовая структура HTML документа -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Угадай число - Математический детектив!</title>
</head>
<body>
    <div class="game-container">
        <!-- Здесь будет содержимое игры -->
    </div>
</body>
</html>

Атрибут lang="ru" сообщает браузерам и экранным читалкам, что контент на русском языке. viewport мета-тег обеспечивает корректное отображение на мобильных устройствах.

🔢 Числовые поля ввода

Самый важный элемент игры - поле для ввода числа. Используем специальный тип input для работы с числами и добавляем валидацию.

🔢 Числовой input с валидацией

<!-- Контейнер для ввода числа -->
<div class="input-section">
    <label for="guessInput">
        Введи число от <span id="minRange">1</span> 
        до <span id="maxRange">50</span>:
    </label>
    
    <input
        type="number"
        id="guessInput"
        name="guess"
        min="1"
        max="50"
        placeholder="Твоя попытка..."
        required
        autofocus
        aria-describedby="guessHelp"
    />
    
    <button type="button" id="guessButton">
        🎯 Проверить
    </button>
    
    <div id="guessHelp" class="help-text">
        Число должно быть от 1 до 50
    </div>
</div>

type="number" создаёт поле только для чисел. Атрибуты min и max ограничивают диапазон, а required делает поле обязательным.

🛠️ Расширенная валидация

Добавим дополнительные атрибуты для улучшения пользовательского опыта:

🛠️ Продвинутая валидация

<!-- Форма с расширенной валидацией -->
<form id="guessForm" novalidate>
    <fieldset>
        <legend>Игровая область</legend>
        
        <input
            type="number"
            id="playerGuess"
            min="1"
            max="50"
            step="1"
            pattern="[0-9]+"
            inputmode="numeric"
            autocomplete="off"
            aria-invalid="false"
        />
        
        <div id="validationMessage" class="error-message"></div>
    </fieldset>
</form>

inputmode="numeric" показывает цифровую клавиатуру на мобильных. novalidate отключает стандартную валидацию браузера для кастомной.

🏷️ Семантическая структура

Правильная семантика делает код понятным и доступным:

<main> - Основное содержимое

Содержит главную игровую область

<header> - Заголовок игры

Название, описание правил, статистика

<section> - Игровая зона

Поле ввода, кнопки, результаты

<aside> - Дополнительная информация

Подсказки, достижения, история

<footer> - Подвал

Дополнительные кнопки и настройки

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

<main class="game-container">
    <header class="game-header">
        <h1>🎯 Угадай число</h1>
        <p class="game-description">
            Я загадал число от 1 до 50. Попробуй угадать!
        </p>
    </header>
    
    <section class="game-area" aria-label="Игровая зона">
        <!-- Здесь форма ввода -->
    </section>
    
    <aside class="game-info">
        <h2>📊 Статистика</h2>
        <!-- Статистика игры -->
    </aside>
</main>

♿ Доступность и ARIA

Делаем игру доступной для всех пользователей:

ARIA Labels

Используй aria-label для описания назначения элементов экранным читалкам

Связи элементов

aria-describedby связывает input с подсказками и сообщениями об ошибках

Состояния

aria-invalid показывает, есть ли ошибки в поле ввода

Живые области

aria-live анонсирует изменения результатов игры

♿ ARIA атрибуты

<!-- Доступная игровая форма -->
<form role="form" aria-labelledby="game-title">
    <h2 id="game-title">Твоя попытка</h2>
    
    <label for="guess" class="visually-hidden">
        Введи число от 1 до 50
    </label>
    
    <input
        type="number"
        id="guess"
        aria-label="Твоё число от 1 до 50"
        aria-describedby="range-info error-msg"
        aria-required="true"
    />
    
    <div id="range-info">Диапазон: 1-50</div>
    <div id="error-msg" role="alert"></div>
    
    <div id="game-result" aria-live="polite"></div>
</form>

📊 Структура статистики

Игра должна показывать статистику: количество попыток, лучший результат, процент побед. Используем семантические элементы для структурирования данных.

📊 HTML для статистики

<!-- Раздел статистики игры -->
<section class="game-stats" aria-labelledby="stats-title">
    <h3 id="stats-title">📊 Твоя статистика</h3>
    
    <dl class="stats-list">
        <dt>Попытки в игре:</dt>
        <dd id="currentAttempts">0</dd>
        
        <dt>Максимум попыток:</dt>
        <dd id="maxAttempts">7</dd>
        
        <dt>Всего игр:</dt>
        <dd id="totalGames">0</dd>
        
        <dt>Побед:</dt>
        <dd id="gamesWon">0</dd>
        
        <dt>Лучший результат:</dt>
        <dd id="bestScore">-</dd>
    </dl>
</section>

Элемент <dl> (definition list) идеально подходит для пар "термин-описание". <dt> - термин, <dd> - определение.

📝 Твоё задание

Создай базовую HTML-структуру для игры "Угадай число":

Создай HTML-документ с правильным DOCTYPE и meta-тегами
Добавь семантические элементы: main, header, section, aside
Создай форму с числовым полем ввода и валидацией
Добавь label и связи между элементами
Реализуй структуру для отображения статистики
Добавь ARIA-атрибуты для доступности
Создай контейнер для отображения результатов
Протестируй с экранной читалкой или валидатором

💡 Помни: хорошая HTML-структура - основа любого веб-приложения!

Следующий урок: CSS дизайн →

📝 Урок 1: HTML основы