Collect The Numbers Falling In The Sky's game

Click here for free DL of the app version that can save data.

No:14291

109

←

Prev Next

→

Collect The Numbers Falling In The Sky
Developer User6030｜Date and time 23/8/31 18:41:14
Build time 20.921 sec｜Game capacity 3.33KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Собери падающие числа</title>
    <style>
        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: #000;
            overflow: hidden;
        }
        
        .number {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: #fff;
            width: 5rem;
            height: 5rem;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// Создаем массив с падающими числами
        const numberArray = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

// Функция для генерации случайного числа в диапазоне от min до max
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

// Функция для создания и анимации падающего числа
        function createFallingNumber() {
            // Создаем элемент для числа
            const numberElement = document.createElement('div');
            numberElement.classList.add('number');

// Рандомно выбираем падающее число из массива
            const randomNumber = numberArray[getRandomNumber(0, numberArray.length - 1)];

// Устанавливаем начальные координаты числа
            const initialX = getRandomNumber(0, gameContainer.offsetWidth - numberElement.offsetWidth);
            const initialY = -numberElement.offsetHeight;
            numberElement.style.transform = `translate(${initialX}px, ${initialY}px)`;

// Устанавливаем число в элемент и добавляем его в контейнер игры
            numberElement.innerText = randomNumber;
            gameContainer.appendChild(numberElement);

// Анимация падения числа
            let currentY = initialY;
            const animationInterval = setInterval(() => {
                currentY += 5; // Скорость падения числа
    
                // Завершаем анимацию, когда число достигает нижней границы контейнера
                if (currentY >= gameContainer.offsetHeight) {
                    clearInterval(animationInterval);
                    gameContainer.removeChild(numberElement);
                } else {
                    numberElement.style.transform = `translate(${initialX}px, ${currentY}px)`;
                }
            }, 10);
        }

// Запускаем создание падающих чисел каждую секунду
        setInterval(() => {
            createFallingNumber();
        }, 1000);
    </script>
</body>
</html>