🎯 Цель урока

В этом уроке мы добавим интерактивность нашей игре с помощью JavaScript. JavaScript — это язык программирования, который позволяет создавать динамические и интерактивные веб-страницы.

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

• Основы JavaScript
• Как обрабатывать клики по кнопке
• Работа с элементами страницы
• Показ сообщений пользователю

📚 Основы JavaScript

Что такое JavaScript?

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

Основные концепции:

События (Events)

Действия пользователя: клики, наведение мыши, нажатие клавиш

Обработчики событий

Функции, которые выполняются при возникновении событий

DOM (Document Object Model)

Способ JavaScript взаимодействовать с HTML элементами

Функции

Блоки кода, которые выполняют определённые действия

🛠️ Добавляем интерактивность

Давайте добавим JavaScript к нашей игре:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Волшебная кнопка</title>
    <style>
      /* CSS стили из предыдущего урока */
      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);
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <h1>Волшебная кнопка</h1>
      <p>Нажми на кнопку и увидишь магию!</p>
      <button class="magic-button" onclick="showMagic()">✨ Магия! ✨</button>
    </div>

    <script>
      function showMagic() {
        alert("🎉 Вау! Это действительно магия! 🎉");
      }
    </script>
  </body>
</html>

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

• onclick="showMagic()" — при клике на кнопку вызывается функция showMagic
• <script> — тег, в котором размещается JavaScript код
• function showMagic() — определение функции
• alert() — функция для показа всплывающего сообщения

🎮 Результат

Теперь наша кнопка реагирует на клики! Попробуйте:

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

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

🔧 Улучшаем функциональность

Давайте сделаем игру более интересной — добавим случайные сообщения:

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

  function showMagic() {
    // Получаем случайное сообщение
    const randomIndex = Math.floor(Math.random() * magicMessages.length);
    const randomMessage = magicMessages[randomIndex];
    
    // Показываем сообщение
    alert(randomMessage);
  }
</script>

🧠 Новые концепции:

• const — объявление константы (неизменяемой переменной)
• [] — массив (список значений)
• Math.random() — функция для получения случайного числа
• Math.floor() — округление числа вниз

📖 Объяснение логики

Как работает наш код:

Создаём массив сообщений — список различных магических фраз
Генерируем случайное число — от 0 до количества сообщений
Выбираем сообщение — по случайному индексу из массива
Показываем сообщение — с помощью функции alert()

Math.random()

Возвращает случайное число от 0 до 1 (не включая 1)

Math.floor()

Округляет число вниз до целого: 3.7 → 3, 5.2 → 5

array.length

Свойство, которое возвращает количество элементов в массиве

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

Основы JavaScript и его роль в веб-разработке
Как добавлять обработчики событий
Работу с функциями
Использование массивов
Генерацию случайных чисел
Взаимодействие с пользователем через alert()

🚀 Что дальше?

В следующем уроке мы добавим счётчик кликов и красивые анимации! Научимся изменять содержимое страницы без alert().

⚡ JavaScript логика