Урок 3: JavaScript логика ухода за питомцем

🎯 Цель урока

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

Ты освоишь основы JavaScript: переменные, функции, события, объекты и работу с DOM для создания интерактивных приложений.

Интерактивная демонстрация

🥚

Малыш

Спокоен

🍎 Голод

80%

😊 Счастье

60%

💤 Энергия

90%

🛁 Чистота

50%

Нажми на кнопки, чтобы ухаживать за питомцем!

📊 Объект питомца

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

🐾 Структура данных питомца

// Создаём объект питомца с начальными значениями
let pet = {
  name: "Малыш",
  level: 1,
  age: 0, // в минутах
  stage: "egg", // egg, baby, child, teen, adult
  emoji: "🥚",
  
  // Статистики здоровья (от 0 до 100)
  stats: {
    hunger: 100,      // чем выше, тем сытее
    happiness: 100,  // уровень счастья
    energy: 100,     // энергия для активности
    cleanliness: 100 // чистота питомца
  },
  
  status: "Спокоен",  // текущее настроение
  lastFed: Date.now(),
  isAlive: true
};

💡 Концепция: Объекты в JavaScript

Объект - это способ сгруппировать связанную информацию. Наш питомец - это объект со свойствами (name, level) и вложенными объектами (stats). Мы можем обращаться к свойствам через точку: pet.name или pet.stats.hunger.

🍎 Функция кормления

Создадим функцию для кормления питомца. Кормление увеличивает сытость, но может снизить энергию, если питомец переел.

🍎 Логика кормления

function feedPet() {
  // Проверяем, жив ли питомец
  if (!pet.isAlive) {
    showMessage("Питомец больше не нуждается в заботе...");
    return;
  }

  // Проверяем, не слишком ли сыт питомец
  if (pet.stats.hunger >= 95) {
    showMessage("🤢 Я уже сыт! Спасибо!");
    pet.stats.energy = Math.max(0, pet.stats.energy - 5);
    return;
  }

  // Увеличиваем сытость
  pet.stats.hunger = Math.min(100, pet.stats.hunger + 25);
  pet.stats.happiness = Math.min(100, pet.stats.happiness + 10);
  pet.lastFed = Date.now();
  
  // Показываем реакцию питомца
  let reactions = [
    "😋 Ммм, вкусно!",
    "🤤 Ещё немножко!",
    "😊 Спасибо за еду!"
  ];
  
  let reaction = reactions[Math.floor(Math.random() * reactions.length)];
  showMessage(reaction);
  
  // Обновляем интерфейс
  updateDisplay();
  addExperience(5);
}

🎮 Функция игры

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

🎮 Система игр

function playWithPet() {
  if (!pet.isAlive) return;

  // Проверяем энергию для игр
  if (pet.stats.energy < 20) {
    showMessage("😴 Я слишком устал для игр...");
    return;
  }

  // Проверяем голод
  if (pet.stats.hunger < 30) {
    showMessage("😢 Я слишком голоден для игр!");
    return;
  }

  // Играем!
  pet.stats.happiness = Math.min(100, pet.stats.happiness + 20);
  pet.stats.energy = Math.max(0, pet.stats.energy - 15);
  pet.stats.hunger = Math.max(0, pet.stats.hunger - 5);
  pet.stats.cleanliness = Math.max(0, pet.stats.cleanliness - 10);

  let playReactions = [
    "🎉 Как весело!",
    "😄 Играем ещё!",
    "🤗 Ура, игры!",
    "✨ Это так здорово!"
  ];

  showMessage(playReactions[Math.floor(Math.random() * playReactions.length)]);
  
  // Анимация радости
  animatePet("bounce");
  updateDisplay();
  addExperience(8);
}

💤 Функция сна

Сон восстанавливает энергию питомца. Во время сна питомец не может выполнять другие действия, но постепенно восстанавливает силы.

💤 Система сна и отдыха

function petSleep() {
  if (!pet.isAlive) return;

  // Проверяем, нужен ли сон
  if (pet.stats.energy >= 90) {
    showMessage("😊 Я полон энергии! Не хочу спать.");
    return;
  }

  // Питомец засыпает
  pet.stats.energy = Math.min(100, pet.stats.energy + 30);
  pet.stats.happiness = Math.min(100, pet.stats.happiness + 5);
  
  // Во время сна немного проголодается
  pet.stats.hunger = Math.max(0, pet.stats.hunger - 5);

  showMessage("💤 Zzz... Хорошо отдохнул!");
  
  // Анимация сна
  animatePet("sleep");
  updateDisplay();
  addExperience(3);
}

🛁 Функция гигиены

Мытьё повышает чистоту питомца и немного улучшает настроение. Грязный питомец может заболеть и потерять счастье.

🛁 Система чистоты

function cleanPet() {
  if (!pet.isAlive) return;

  // Проверяем, нужно ли мытьё
  if (pet.stats.cleanliness >= 90) {
    showMessage("✨ Я уже чистый и красивый!");
    return;
  }

  // Моем питомца
  pet.stats.cleanliness = Math.min(100, pet.stats.cleanliness + 40);
  pet.stats.happiness = Math.min(100, pet.stats.happiness + 15);
  
  // Мытьё немного утомляет
  pet.stats.energy = Math.max(0, pet.stats.energy - 5);

  let cleanReactions = [
    "🛁 Так приятно и чисто!",
    "✨ Теперь я сияю!",
    "🌟 Какой я красивый!",
    "😊 Спасибо за заботу!"
  ];

  showMessage(cleanReactions[Math.floor(Math.random() * cleanReactions.length)]);
  
  animatePet("shine");
  updateDisplay();
  addExperience(4);
}

🔄 Обновление интерфейса

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

🎨 Функции интерфейса

// Обновляем все элементы интерфейса
function updateDisplay() {
  // Обновляем информацию о питомце
  document.getElementById("pet-emoji").textContent = pet.emoji;
  document.getElementById("pet-stage").textContent = getStageRussian(pet.stage);
  document.getElementById("pet-level").textContent = pet.level;
  document.getElementById("pet-status").textContent = getStatus();
  document.getElementById("age").textContent = pet.age;

  // Обновляем статистики
  updateStatBar("hunger", pet.stats.hunger);
  updateStatBar("happiness", pet.stats.happiness);
  updateStatBar("energy", pet.stats.energy);
  updateStatBar("cleanliness", pet.stats.cleanliness);

  // Обновляем состояние питомца
  updatePetMood();
}

// Обновляем полоску статистики
function updateStatBar(statName, value) {
  const bar = document.getElementById(statName + "-bar");
  const valueSpan = document.getElementById(statName + "-value");
  
  bar.style.width = value + "%";
  valueSpan.textContent = Math.round(value) + "%";
  
  // Меняем цвет в зависимости от значения
  if (value < 30) {
    bar.style.background = "linear-gradient(135deg, #ff6b6b, #ee5a52)";
    bar.parentElement.parentElement.classList.add("low-stat");
  } else {
    bar.parentElement.parentElement.classList.remove("low-stat");
  }
}

// Показываем сообщение игроку
function showMessage(text) {
  const messageEl = document.getElementById("message");
  messageEl.textContent = text;
  messageEl.style.animation = "fadeIn 0.3s ease";
  
  // Очищаем сообщение через 3 секунды
  setTimeout(() => {
    messageEl.style.animation = "fadeOut 0.3s ease";
  }, 2700);
}

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

Создай файл script.js со следующим функционалом:

Объект pet с начальными статистиками
Функцию feedPet() для кормления питомца
Функцию playWithPet() для игр с питомцем
Функцию petSleep() для сна и отдыха
Функцию cleanPet() для гигиены
Функцию updateDisplay() для обновления интерфейса
Привязку кнопок к функциям через addEventListener

💡 Не забудь добавить <script src="script.js"></script> в HTML!

💡 Секреты хорошего кода

Валидация входных данных: Всегда проверяй условия перед выполнением действий. Питомец не может играть, если он слишком голоден или устал.

Math.min() и Math.max(): Используй эти функции для ограничения значений. Статистики не должны выходить за пределы 0-100.

Случайные реакции: Массив с разными сообщениями + Math.random() делают питомца более живым и непредсказуемым.

Модульность: Разбивай код на небольшие функции. Каждая функция должна делать что-то одно, но делать это хорошо.

🌟 Следующий урок: Эволюция и мини-игры →

⚙️ Урок 3: JavaScript логика ухода