Хотите создать своё первое мини-приложение с милым котиком, который реагирует на ваши клики? Это проще, чем вы думаете! В этом гайде мы шаг за шагом разберём, как это сделать. Вы научитесь использовать простой инструментарий и получите готовый проект, которым сможете гордиться.
Что у нас получится?
Мы создадим интерактивное приложение при помощи искусственного интеллекта, где будет изображён котик. Когда вы нажмёте на него, он будет менять позу, "мяукать" или показывать случайные сообщения. Это отличный способ попрактиковаться в программировании и создать что-то весёлое!
Шаг 1: Подготовка
Для создания приложения нам понадобятся:
- Браузер (например, Chrome или Firefox).
- Текстовый редактор (например, VS Code, Notepad++ или даже обычный Блокнот).
- Запрос к нейросети, чтобы она написала приложение.
- Скачиваем эти 3 изображения под такими же названиями (0.png, 1.png, 2.png)
Шаг 2: Создаём файлы
Создайте три файла в одной папке:
- index.html — основная структура приложения.
- style.css — внешний вид приложения.
- script.js — логика работы приложения.
Шаг 3: Пишем HTML
Откройте файл index.html и добавьте следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кликабельный котик</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cat-container">
<img id="cat" src="0.png" alt="Котик">
</div>
<p id="message">Нажми на котика!</p>
<script src="script.js"></script>
</body>
</html>
Что здесь происходит?
- Мы добавили изображение котика (вместо ссылки можно использовать любую картинку).
- Добавили текстовое поле (<p>), которое будет показывать сообщения.
- Подключили файлы style.css и script.js.
Шаг 4: Добавляем стили в CSS
Откройте файл style.css и добавьте следующий код:
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #f7e6d3;
margin: 0;
padding: 0;
}
#cat-container {
margin-top: 50px;
}
#cat {
width: 200px;
cursor: pointer;
transition: transform 0.3s ease;
}
#cat:hover {
transform: scale(1.1);
}
#message {
margin-top: 20px;
font-size: 20px;
color: #333;
}
Что здесь происходит?
- Мы сделали страницу красивой: добавили фон, центрировали элементы и задали стиль текста.
- Когда вы наводите курсор на котика, он немного увеличивается благодаря свойству transform.
Шаг 5: Программируем логику в JavaScript
Откройте файл script.js и добавьте следующий код:
// Получаем элементы из HTML
const cat = document.getElementById('cat');
const message = document.getElementById('message');
// Создаём массив с реакциями котика
const reactions = [
"Мяу!",
"Я тебя люблю!",
"Ещё разок!",
"Какой ты заботливый!",
"Мррр..."
];
// Функция для обработки клика
cat.addEventListener('click', () => {
// Меняем изображение котика (можно добавить анимацию)
cat.src = "2.png"; // Новая картинка котика
// Показываем случайное сообщение
const randomMessage = reactions[Math.floor(Math.random() * reactions.length)];
message.textContent = randomMessage;
// Возвращаем исходное изображение через 1 секунду
setTimeout(() => {
cat.src = "1.png";
}, 1000);
});
Что здесь происходит?
- Мы добавили массив с реакциями котика. При каждом клике выбирается случайное сообщение.
- Картинка котика меняется на другую, чтобы создать эффект анимации. Через 1 секунду она возвращается к исходной.
Шаг 6: Тестируем приложение
- Откройте файл index.html в браузере.
- Нажмите на котика и наблюдайте, как он реагирует!
- Если не получилось, - не расстраивайся! Внизу прикрепим ссылку на скачивание папки с web приложением!)
Бонус: Добавляем звук
Если хотите, чтобы котик "мяукал", добавьте звуковой файл. Например, скачайте файл с мяуканьем и сохраните его как meow.mp3. Затем измените код в script.js:
// Добавляем звук
const meowSound = new Audio('meow.mp3');
cat.addEventListener('click', () => {
meowSound.play(); // Проигрываем звук при клике
// Остальной код остаётся без изменений
});
Что дальше?
Теперь, когда у вас есть базовое приложение, вы можете улучшить его:
- Добавить больше анимаций или эффектов.
- Сделать несколько уровней взаимодействия (например, "кормить" котика).
- Разместить приложение онлайн с помощью GitHub Pages или других платформ.
А теперь ваша очередь!
Попробуйте создать своё мини-приложение. Если что-то не получается или у вас есть идеи для улучшений, пишите в комментариях — мы поможем!
P.S. Хотите больше гайдов по нейросетям? Подпишитесь на наш блог и узнайте, как создавать другие интересные проекты с помощью нейросетей и технологий.
Готовое приложение