🎯 Цель урока

В этом уроке мы добавим счётчик кликов и красивые анимации к нашей игре. Научимся изменять содержимое HTML элементов с помощью JavaScript и создавать интерактивные эффекты.

💡 Что вы узнаете:

• Работа с переменными в JavaScript
• Изменение содержимого HTML элементов
• Добавление анимационных эффектов
• Обновление интерфейса в реальном времени

📚 Новые концепции

document.getElementById()

Функция для поиска HTML элемента по его id. Позволяет получить доступ к элементу для изменения его содержимого или стилей.

innerHTML

Свойство, которое позволяет получить или изменить HTML содержимое элемента.

let

Ключевое слово для объявления переменной, значение которой может изменяться.

classList.add()

Метод для добавления CSS класса к элементу, что позволяет применять стили и анимации.

setTimeout()

Функция для выполнения кода через определённое время (задержка в миллисекундах).

🛠️ Добавляем счётчик

Давайте добавим счётчик кликов к нашей игре:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Волшебная кнопка</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      .game-container {
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 40px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      }

      .magic-button {
        background: linear-gradient(135deg, #ff6b6b, #ffa500);
        color: white;
        border: none;
        padding: 20px 40px;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
      }

      .magic-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
      }

      .magic-button.clicked {
        transform: scale(1.1) translateY(-5px);
        box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6);
      }

      .click-counter {
        font-size: 1.8rem;
        font-weight: bold;
        margin: 20px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <h1>Волшебная кнопка</h1>
      <div id="clickCounter" class="click-counter">Кликов: 0</div>
      <p>Нажми на кнопку и увидишь магию!</p>
      <button class="magic-button" onclick="showMagic()">✨ Магия! ✨</button>
      <div id="magicMessage"></div>
    </div>

    <script>
      // Переменная для подсчёта кликов
      let clickCount = 0;
      
      // Массив с различными сообщениями
      const magicMessages = [
        "🎉 Вау! Это действительно магия! 🎉",
        "✨ Звёзды танцуют в небе! ✨",
        "🌟 Ты призвал магическую силу! 🌟",
        "🎨 Радуга появилась из ниоткуда! 🎨",
        "🦄 Единорог мелькнул где-то рядом! 🦄",
        "🎪 Магический цирк открыт! 🎪"
      ];

      function showMagic() {
        // Увеличиваем счётчик
        clickCount++;
        
        // Обновляем отображение счётчика
        document.getElementById('clickCounter').innerHTML = `Кликов: ${clickCount}`;
        
        // Получаем случайное сообщение
        const randomIndex = Math.floor(Math.random() * magicMessages.length);
        const randomMessage = magicMessages[randomIndex];
        
        // Показываем сообщение на странице
        const messageElement = document.getElementById('magicMessage');
        messageElement.innerHTML = `<p style="margin-top: 20px; font-size: 1.2rem;">${randomMessage}</p>`;
        
        // Добавляем анимацию кнопке
        const button = document.querySelector('.magic-button');
        button.classList.add('clicked');
        
        // Убираем анимацию через 200ms
        setTimeout(function() {
          button.classList.remove('clicked');
        }, 200);
        
        // Убираем сообщение через 3 секунды
        setTimeout(function() {
          messageElement.innerHTML = '';
        }, 3000);
      }
    </script>
  </body>
</html>

🔍 Разбор нового кода:

• let clickCount = 0; — переменная для хранения количества кликов
• document.getElementById() — находим элемент по его id
• .innerHTML — изменяем содержимое элемента
• classList.add() — добавляем CSS класс для анимации
• setTimeout() — выполняем действие с задержкой

🎮 Результат

Теперь наша игра ведёт счёт кликов и показывает сообщения прямо на странице! Попробуйте:

Волшебная кнопка

Кликов: 0

Нажми на кнопку и увидишь магию!

🎨 Объяснение анимаций

CSS анимация клика:

.magic-button.clicked {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6);
}

Этот CSS класс применяется к кнопке при клике:

scale(1.1) — увеличивает кнопку на 10%
translateY(-5px) — поднимает кнопку вверх
Усиливает тень для эффекта "нажатия"

Временные функции:

setTimeout() для анимации

Убираем CSS класс через 200 миллисекунд, чтобы кнопка вернулась в исходное состояние

setTimeout() для сообщения

Убираем сообщение через 3 секунды (3000 миллисекунд), чтобы интерфейс не загромождался

💫 Дополнительные улучшения

Давайте добавим ещё больше интерактивности:

function showMagic() {
  clickCount++;
  
  // Обновляем счётчик с красивым форматированием
  const counterElement = document.getElementById('clickCounter');
  counterElement.innerHTML = `Кликов: ${clickCount}`;
  
  // Добавляем особые сообщения для определённых количеств кликов
  let specialMessage = "";
  if (clickCount === 10) {
    specialMessage = "🏆 Поздравляем! 10 кликов! 🏆";
  } else if (clickCount === 25) {
    specialMessage = "🌟 Четверть века кликов! Невероятно! 🌟";
  } else if (clickCount === 50) {
    specialMessage = "💎 Полвека магии! Ты настоящий волшебник! 💎";
  } else if (clickCount === 100) {
    specialMessage = "🎊 СОТНЯ КЛИКОВ! ТЫ ЛЕГЕНДА! 🎊";
  }
  
  // Показываем либо специальное, либо обычное сообщение
  if (specialMessage) {
    document.getElementById('magicMessage').innerHTML = 
      `<p style="margin-top: 20px; font-size: 1.4rem; color: gold;">${specialMessage}</p>`;
  } else {
    const randomIndex = Math.floor(Math.random() * magicMessages.length);
    const randomMessage = magicMessages[randomIndex];
    document.getElementById('magicMessage').innerHTML = 
      `<p style="margin-top: 20px; font-size: 1.2rem;">${randomMessage}</p>`;
  }
  
  // Анимация кнопки (как раньше)...
}

🎓 Что вы изучили

Работу с переменными (let) для хранения состояния
Изменение HTML содержимого с помощью innerHTML
Поиск элементов по id с помощью document.getElementById()
Добавление и удаление CSS классов
Использование setTimeout() для создания задержек
Создание интерактивных анимаций
Условную логику для особых случаев

🚀 Что дальше?

В последнем уроке мы добавим финальные штрихи: звуки, частицы, кнопку сброса и сделаем игру ещё более впечатляющей!

🎯 Счётчик и анимации