Урок 1: HTML структура тамагочи

🎯 Цель урока

В этом уроке мы создадим HTML-структуру для нашего тамагочи. Разберём, какие элементы нужны для отображения питомца, его статистики и кнопок действий.

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

📋 Структура нашего тамагочи

Виртуальный питомец состоит из нескольких важных частей:

Предварительный просмотр интерфейса

🥚
Малыш (уровень 1)

🍎 Голод: 80%

😊 Счастье: 60%

💤 Энергия: 90%

🛁 Чистота: 40%

Примерно так будет выглядеть наш тамагочи

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

Начнём с создания базовой структуры документа. Нам понадобятся современные HTML5 элементы для хорошей семантики.

📄 Базовая структура 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>
  <!-- Здесь будет наш тамагочи -->
</body>
</html>

lang="ru" указывает язык страницы, а viewport делает сайт адаптивным для мобильных устройств.

🏠 Основной контейнер

Создаём главный контейнер для нашего питомца. Он будет содержать весь игровой интерфейс.

🏠 Главный контейнер

<main class="pet-container">
  <header class="pet-header">
    <h1>🐾 Мой питомец</h1>
    <p class="pet-age">Возраст: <span id="age">0</span> минут</p>
  </header>
  
  <!-- Здесь будет отображение питомца -->
  <!-- Здесь будут статистики -->
  <!-- Здесь будут кнопки действий -->
</main>

Используем main для основного контента и header для заголовка с информацией о питомце.

🐾 Отображение питомца

Создадим область для отображения нашего виртуального друга с его эмодзи и информацией о стадии развития.

🐾 Область питомца

<section class="pet-display">
  <div class="pet-avatar">
    <span id="pet-emoji" class="emoji">🥚</span>
  </div>
  
  <div class="pet-info">
    <h2 id="pet-stage">Яйцо</h2>
    <p>Уровень: <span id="pet-level">1</span></p>
    <p id="pet-status">Спокоен</p>
  </div>
</section>

id атрибуты позволят нам легко обновлять информацию через JavaScript, а классы помогут со стилизацией.

📊 Панель статистики

У каждого тамагочи есть важные показатели здоровья: голод, счастье, энергия и чистота. Создадим для них красивые индикаторы.

📊 Статистики здоровья

<section class="pet-stats">
  <h3>Состояние питомца</h3>
  
  <div class="stats-grid">
    <!-- Голод -->
    <div class="stat-item">
      <label>🍎 Голод</label>
      <div class="stat-bar">
        <div id="hunger-bar" class="stat-fill"></div>
      </div>
      <span id="hunger-value">100%</span>
    </div>

    <!-- Счастье -->
    <div class="stat-item">
      <label>😊 Счастье</label>
      <div class="stat-bar">
        <div id="happiness-bar" class="stat-fill"></div>
      </div>
      <span id="happiness-value">100%</span>
    </div>

    <!-- Энергия -->
    <div class="stat-item">
      <label>💤 Энергия</label>
      <div class="stat-bar">
        <div id="energy-bar" class="stat-fill"></div>
      </div>
      <span id="energy-value">100%</span>
    </div>

    <!-- Чистота -->
    <div class="stat-item">
      <label>🛁 Чистота</label>
      <div class="stat-bar">
        <div id="cleanliness-bar" class="stat-fill"></div>
      </div>
      <span id="cleanliness-value">100%</span>
    </div>
  </div>
</section>

Каждый показатель имеет свой id для JavaScript и общий класс stat-item для единообразной стилизации.

🎮 Кнопки действий

Создадим кнопки для взаимодействия с питомцем. Каждая кнопка будет влиять на определённые статистики.

🎮 Панель управления

<section class="pet-actions">
  <h3>Действия</h3>
  
  <div class="actions-grid">
    <button id="feed-btn" class="action-btn">
      🍎 Покормить
    </button>
    
    <button id="play-btn" class="action-btn">
      🎮 Играть
    </button>
    
    <button id="sleep-btn" class="action-btn">
      💤 Спать
    </button>
    
    <button id="clean-btn" class="action-btn">
      🛁 Мыть
    </button>
  </div>
</section>

🏆 Дополнительные элементы

Добавим области для достижений и сохранения игры. Это сделает наш тамагочи более полнофункциональным.

🏆 Достижения и управление

<!-- Достижения -->
<section class="achievements">
  <h3>🏆 Достижения</h3>
  <div id="achievements-list" class="achievements-grid">
    <!-- Достижения будут добавляться JavaScript -->
  </div>
</section>

<!-- Управление сохранением -->
<section class="game-controls">
  <button id="save-btn" class="control-btn">
    💾 Сохранить
  </button>
  
  <button id="load-btn" class="control-btn">
    📁 Загрузить
  </button>
  
  <button id="reset-btn" class="control-btn danger">
    🔄 Начать заново
  </button>
</section>

Класс danger для кнопки сброса поможет выделить её красным цветом как потенциально опасное действие.

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

Создай файл tamagochi.html со следующей структурой:

Базовая HTML5 разметка с правильным DOCTYPE
Главный контейнер с header'ом
Секция отображения питомца с эмодзи
Панель из 4 статистик с полосками прогресса
4 кнопки действий для ухода за питомцем
Область для будущих достижений
Кнопки сохранения и управления игрой

💡 Не забудь использовать семантичные HTML5 элементы: main, section, header!

💡 Полезные советы

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

ID vs CLASS: Используй id для уникальных элементов, которые будешь изменять через JavaScript (например, #pet-emoji). Классы - для стилизации группы элементов.

Доступность: Добавляй атрибуты alt для изображений и label для интерактивных элементов - это сделает игру доступной для всех.

Планирование: Хорошая HTML структура - основа всего проекта. Продумай заранее, какие элементы понадобятся для JavaScript взаимодействия.

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

🏗️ Урок 1: HTML структура тамагочи