Меню игры: заголовок и три кнопки

Урок 5.1 · Интерфейсы и сайты с нуля · Модуль 5. Интерфейс для игры · Бесплатно

Цель урока: Собрать стартовое меню игры — так, как оно выглядит в настоящих играх.

Нужно знать заранее: Урок 4.3

Объяснение

Зачем это нужно: Стартовое меню — первое, что видит игрок, и первое, что он трогает. Если кнопки слиплись, а текст не читается, игра кажется сломанной ещё до начала. Хорошая новость: меню собирается из того, что вы уже умеете, — фон, заголовок и столбик кнопок.

Как это работает: Меню — это тёмный фон, крупное название и кнопки друг под другом. Фон всей страницы задаёт правило для body: body { background: #0f172a; }. Цвет текста тоже задают на уровне страницы: color: #f8fafc — светлый, чтобы читался на тёмном. Кнопки по умолчанию стоят в строку. Чтобы они встали в столбик, родителю (блоку .menu) задают display: flex и flex-direction: column. gap добавляет промежуток между кнопками, а max-width и margin: 0 auto держат меню по центру и не дают растянуться на весь экран. Ширину кнопок удобно делать «на всю ширину»: width: 100% у кнопки внутри узкого контейнера.

Пример с разбором: .menu { display: flex; flex-direction: column; gap: 12px; max-width: 280px; margin: 0 auto; } Кнопки встанут в столбик с промежутком 12 пикселей и будут по центру страницы. max-width ограничивает ширину, а margin: 0 auto распределяет оставшееся место слева и справа поровну.

Разбор по шагам: 1. Задайте фон и цвет текста для body. 2. Оберните кнопки в блок .menu. 3. Напишите .menu { display: flex; flex-direction: column; gap: 12px; }. 4. Ограничьте ширину и поставьте меню по центру: max-width и margin: 0 auto. 5. Проверьте, что надписи читаются на фоне.

Частая ошибка: Оставить фон белым, а текст белым. Тогда надписей не видно. Меняя фон, всегда проверяйте контраст: тёмный фон — светлый текст, светлый фон — тёмный текст. Вторая ошибка — задать display: flex самим кнопкам: тогда в столбик встанут элементы внутри кнопки, а сами кнопки останутся в строке.

Важно: flex-direction: column работает только вместе с display: flex. Одно свойство без другого ничего не делает. И gap тоже работает только у flex- или grid-контейнера.

Итог: Меню игры — это тот же ряд блоков, только в столбик и на тёмном фоне. Ничего нового, но выглядит как настоящая игра.

Что дальше: В следующем уроке соберём шкалу здоровья — самый узнаваемый элемент игрового интерфейса.

body {
  background: #0f172a;
  color: #f8fafc;
}
.menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 280px;
  margin: 0 auto;
}

Уроки модуля 5

• 5.1 Меню игры: заголовок и три кнопки — вы здесь (бесплатно)
• 5.2 Полоска здоровья (шкала HP) (по подписке)
• 5.3 Диалоговое окно с персонажем (по подписке)
• 5.4 Проект: личная страница-визитка (по подписке)
• 5.5 Игровая панель: очки, уровень и здоровье в одной строке (по подписке)
• 5.6 Иконки и эмодзи: понятно без слов (по подписке)
• 5.7 Мини-проект: экран выбора персонажа (по подписке)
• 5.8 Разбор игрового экрана: что не так (по подписке)