Cover Image

ИИ пишет игру
Ноябрь 1, 2025 - Время чтения: 8 минуты

Готовая игра «Поймай вайб» — скачай и открой в браузере!

Это мини-игра, созданная с помощью ИИ DeepSeek — без единой строчки кода от тебя. Уютный дизайн, управление мышкой, счёт в реальном времени и мягкие пастельные тона.

  • Просто сохрани код в файл
  • Дважды кликни по нему
  • Играй!

Хочешь создать свою? Зарегистрируйся на chat.deepseek.com (бесплатно — через почту или телефон) и вставь промпт:

Создай простую мини-игру на HTML, CSS и JavaScript, которую можно запустить прямо в браузере, просто скопировав весь код в один файл .html.

Требования:

Игра должна быть интуитивно понятной и визуально приятной;
Управление — только мышкой или касанием (без клавиатуры);
Цель — нажимать на появляющиеся объекты (например, двигающиеся снизу вверх звёзды, листья или шарики) за ограниченное время — 5, 10, 20 или 60 секунд (выбор при старте);
Движение объектов — плавное;
Начальная скорость — 10 мм/сек (укажи в коде, где это регулировать);
Каждые 10 секунд скорость плавно растёт на 10%;
За «убежавшие» объекты (ушедшие за верхний край) — штрафные очки;
Если за время игры набрано больше положительных очков — победа, иначе — проигрыш;
Счёт отображается в реальном времени;
После окончания — кнопка «Играть снова»;
Дизайн — уютный, мягкие пастельные тона: лавандовый, персиковый, кремовый;
Никаких внешних зависимостей (всё в одном .html-файле, максимум — Google Fonts);
Код — чистый, с комментариями на русском для новичков.
Название игры: «Поймай вайб».

Это не программирование. Это — магия через слова  Ничего устанавливать не нужно — работает сразу 


Если хочешь, можешь сразу скопировать готовый код, вставить его в блокноте и сохранить, например, как game.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 href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            font-family: 'Nunito', sans-serif;
            background: linear-gradient(135deg, #e6e6fa, #ffdab9); /* Лавандовый и персиковый */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #5a5a5a;
        }

        .game-container {
            width: 100%;
            max-width: 800px;
            background-color: rgba(255, 253, 250, 0.9); /* Кремовый с прозрачностью */
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        .screen {
            padding: 30px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 500px;
        }

        h1 {
            color: #9f86c0; /* Лавандовый */
            margin-bottom: 20px;
            font-size: 2.5rem;
        }

        h2 {
            color: #ffb4a2; /* Персиковый */
            margin-bottom: 15px;
        }

        p {
            margin-bottom: 15px;
            line-height: 1.5;
            max-width: 500px;
        }

        .btn {
            background-color: #9f86c0; /* Лавандовый */
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px 5px;
            box-shadow: 0 4px 10px rgba(159, 134, 192, 0.3);
        }

        .btn:hover {
            background-color: #8a6eb5;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(159, 134, 192, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background-color: #ffb4a2; /* Персиковый */
            box-shadow: 0 4px 10px rgba(255, 180, 162, 0.3);
        }

        .btn-secondary:hover {
            background-color: #ff9e87;
            box-shadow: 0 6px 15px rgba(255, 180, 162, 0.4);
        }

        .time-options {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 20px 0;
        }

        .time-option {
            margin: 5px;
        }

        .game-area {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: rgba(255, 253, 250, 0.7);
            border-radius: 10px;
            overflow: hidden;
            margin: 20px 0;
            border: 2px dashed #e6e6fa;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin: 15px 0;
            font-size: 1.2rem;
        }

        .stat {
            background-color: rgba(255, 253, 250, 0.8);
            padding: 10px 20px;
            border-radius: 50px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .vibe {
            position: absolute;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .vibe:hover {
            transform: scale(1.1);
        }

        .vibe:active {
            transform: scale(0.9);
        }

        .hidden {
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 10px;
            background-color: #e6e6fa;
            border-radius: 5px;
            margin: 15px 0;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: #9f86c0;
            width: 100%;
            transition: width 0.5s linear;
        }

        .result-message {
            font-size: 1.5rem;
            margin: 20px 0;
            padding: 15px;
            border-radius: 10px;
            width: 100%;
        }

        .win {
            background-color: rgba(159, 214, 159, 0.3);
            color: #4a7c4a;
        }

        .lose {
            background-color: rgba(214, 159, 159, 0.3);
            color: #7c4a4a;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- Экран начала игры -->
        <div id="start-screen" class="screen">
            <h1>Поймай вайб</h1>
            <p>Ловите появляющиеся вайбы, кликая по ним. Чем больше поймаете — тем лучше ваш результат!</p>
            <p>Будьте внимательны: за пропущенные вайбы начисляются штрафные очки.</p>

            <h2>Выберите время игры:</h2>
            <div class="time-options">
                <button class="btn time-option" data-time="5">5 минут</button>
                <button class="btn time-option" data-time="10">10 минут</button>
                <button class="btn time-option" data-time="20">20 минут</button>
                <button class="btn time-option" data-time="60">60 минут</button>
            </div>

            <button id="start-btn" class="btn btn-secondary">Начать игру</button>
        </div>

        <!-- Экран игры -->
        <div id="game-screen" class="screen hidden">
            <h2>Поймайте как можно больше вайбов!</h2>

            <div class="stats">
                <div class="stat">Время: <span id="time-left">00:00</span></div>
                <div class="stat">Очки: <span id="score">0</span></div>
                <div class="stat">Штраф: <span id="penalty">0</span></div>
            </div>

            <div class="progress-bar">
                <div id="progress" class="progress"></div>
            </div>

            <div id="game-area" class="game-area">
                <!-- Вайбы будут появляться здесь -->
            </div>
        </div>

        <!-- Экран окончания игры -->
        <div id="end-screen" class="screen hidden">
            <h1>Игра окончена!</h1>

            <div class="stats">
                <div class="stat">Набрано очков: <span id="final-score">0</span></div>
                <div class="stat">Штрафные очки: <span id="final-penalty">0</span></div>
            </div>

            <div id="result-message" class="result-message"></div>

            <button id="restart-btn" class="btn">Играть снова</button>
        </div>
    </div>

    <script>
        // Элементы DOM
        const startScreen = document.getElementById('start-screen');
        const gameScreen = document.getElementById('game-screen');
        const endScreen = document.getElementById('end-screen');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const timeOptions = document.querySelectorAll('.time-option');
        const gameArea = document.getElementById('game-area');
        const timeLeftElement = document.getElementById('time-left');
        const scoreElement = document.getElementById('score');
        const penaltyElement = document.getElementById('penalty');
        const progressElement = document.getElementById('progress');
        const finalScoreElement = document.getElementById('final-score');
        const finalPenaltyElement = document.getElementById('final-penalty');
        const resultMessageElement = document.getElementById('result-message');

        // Переменные игры
        let gameTime = 0; // Время игры в секундах
        let selectedTime = 0; // Выбранное время в минутах
        let timeLeft = 0; // Оставшееся время в секундах
        let score = 0;
        let penalty = 0;
        let gameInterval;
        let vibeInterval;
        let speedMultiplier = 1;
        let speedIncreaseInterval;

        // Начальная скорость объектов в мм/сек
        // Для перевода в пиксели в секунду: 1 мм ≈ 3.78 пикселя при стандартном DPI
        // Здесь можно изменить начальную скорость объектов
        const INITIAL_SPEED_MM_PER_SEC = 10;
        const INITIAL_SPEED = INITIAL_SPEED_MM_PER_SEC * 3.78; // Перевод в пиксели в секунду

        // Цвета для вайбов (пастельные тона)
        const vibeColors = [
            '#9f86c0', // Лавандовый
            '#ffb4a2', // Персиковый
            '#a2c1ff', // Голубой
            '#a2ffc1', // Мятный
            '#fff8a2', // Светло-желтый
            '#ffa2f0'  // Розовый
        ];

        // Обработчики событий
        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', restartGame);

        timeOptions.forEach(option => {
            option.addEventListener('click', () => {
                // Снимаем выделение со всех кнопок
                timeOptions.forEach(btn => btn.classList.remove('btn-secondary'));
                // Выделяем выбранную кнопку
                option.classList.add('btn-secondary');
                selectedTime = parseInt(option.getAttribute('data-time'));
            });
        });

        // Функция начала игры
        function startGame() {
            if (selectedTime === 0) {
                alert('Пожалуйста, выберите время игры!');
                return;
            }

            // Скрываем стартовый экран, показываем игровой
            startScreen.classList.add('hidden');
            gameScreen.classList.remove('hidden');

            // Сбрасываем переменные игры
            gameTime = selectedTime * 60; // Переводим минуты в секунды
            timeLeft = gameTime;
            score = 0;
            penalty = 0;
            speedMultiplier = 1;

            // Обновляем отображение
            updateDisplay();

            // Запускаем таймер игры
            gameInterval = setInterval(updateGame, 1000);

            // Запускаем появление вайбов
            vibeInterval = setInterval(createVibe, 800);

            // Запускаем увеличение скорости каждые 10 секунд
            speedIncreaseInterval = setInterval(increaseSpeed, 10000);
        }

        // Функция обновления игры
        function updateGame() {
            timeLeft--;
            updateDisplay();

            // Обновляем прогресс-бар
            const progressPercent = (timeLeft / gameTime) * 100;
            progressElement.style.width = `${progressPercent}%`;

            // Проверяем окончание игры
            if (timeLeft <= 0) {
                endGame();
            }
        }

        // Функция увеличения скорости
        function increaseSpeed() {
            // Увеличиваем скорость на 10% каждые 10 секунд
            // Здесь можно изменить коэффициент увеличения скорости
            speedMultiplier *= 1.1;
        }

        // Функция создания вайба
        function createVibe() {
            const vibe = document.createElement('div');
            vibe.className = 'vibe';

            // Случайный размер от 30 до 70 пикселей
            const size = Math.floor(Math.random() * 40) + 30;
            vibe.style.width = `${size}px`;
            vibe.style.height = `${size}px`;

            // Случайный цвет из палитры
            const colorIndex = Math.floor(Math.random() * vibeColors.length);
            vibe.style.backgroundColor = vibeColors[colorIndex];

            // Случайная позиция по горизонтали
            const maxLeft = gameArea.offsetWidth - size;
            const left = Math.floor(Math.random() * maxLeft);
            vibe.style.left = `${left}px`;

            // Начальная позиция - снизу за пределами видимой области
            vibe.style.bottom = `-${size}px`;

            // Добавляем вайб в игровую область
            gameArea.appendChild(vibe);

            // Обработчик клика по вайбу
            vibe.addEventListener('click', () => {
                // Увеличиваем счет
                score++;
                scoreElement.textContent = score;

                // Анимация исчезновения
                vibe.style.transform = 'scale(0)';
                vibe.style.opacity = '0';

                // Удаляем элемент после анимации
                setTimeout(() => {
                    if (vibe.parentNode) {
                        vibe.parentNode.removeChild(vibe);
                    }
                }, 200);
            });

            // Анимация движения вайба
            animateVibe(vibe, size);
        }

        // Функция анимации движения вайба
        function animateVibe(vibe, size) {
            const startTime = Date.now();
            const startBottom = -size;
            const endBottom = gameArea.offsetHeight;

            // Текущая скорость с учетом множителя
            const currentSpeed = INITIAL_SPEED * speedMultiplier;

            function moveVibe() {
                const elapsedTime = (Date.now() - startTime) / 1000; // В секундах
                const newBottom = startBottom + (currentSpeed * elapsedTime);

                vibe.style.bottom = `${newBottom}px`;

                // Проверяем, не вышел ли вайб за верхнюю границу
                if (newBottom > endBottom) {
                    // Увеличиваем штраф
                    penalty++;
                    penaltyElement.textContent = penalty;

                    // Удаляем вайб
                    if (vibe.parentNode) {
                        vibe.parentNode.removeChild(vibe);
                    }
                } else if (vibe.parentNode) {
                    // Продолжаем анимацию, если вайб еще в игре
                    requestAnimationFrame(moveVibe);
                }
            }

            // Запускаем анимацию
            moveVibe();
        }

        // Функция обновления отображения
        function updateDisplay() {
            // Форматируем время в формат мм:сс
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timeLeftElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            // Обновляем счет и штраф
            scoreElement.textContent = score;
            penaltyElement.textContent = penalty;
        }

        // Функция окончания игры
        function endGame() {
            // Останавливаем все интервалы
            clearInterval(gameInterval);
            clearInterval(vibeInterval);
            clearInterval(speedIncreaseInterval);

            // Удаляем все вайбы
            while (gameArea.firstChild) {
                gameArea.removeChild(gameArea.firstChild);
            }

            // Показываем экран окончания игры
            gameScreen.classList.add('hidden');
            endScreen.classList.remove('hidden');

            // Обновляем финальные результаты
            finalScoreElement.textContent = score;
            finalPenaltyElement.textContent = penalty;

            // Определяем результат
            if (score > penalty) {
                resultMessageElement.textContent = "Поздравляем! Вы поймали хороший вайб!";
                resultMessageElement.className = "result-message win";
            } else {
                resultMessageElement.textContent = "К сожалению, вайб ускользнул. Попробуйте еще раз!";
                resultMessageElement.className = "result-message lose";
            }
        }

        // Функция перезапуска игры
        function restartGame() {
            // Скрываем экран окончания, показываем стартовый
            endScreen.classList.add('hidden');
            startScreen.classList.remove('hidden');

            // Сбрасываем выделение времени
            timeOptions.forEach(btn => btn.classList.remove('btn-secondary'));
            selectedTime = 0;
        }
    </script>
</body>
</html>