AI game creator

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

No:50488

←

Prev Next

→

Bouncing Numbers
Developer User21309｜Date and time 24/3/8 16:31:38
Build time 7.413 sec｜Game capacity 2.257KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f1f1f1;
    }

#gameContainer {
        width: 300px;
        height: 300px;
        border: 2px solid black;
    }

.number {
        position: absolute;
        font-size: 20px;
        font-weight: bold;
    }
</style>
</head>
<body>
<div id="gameContainer"></div>

function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

function createNumber() {
        const number = document.createElement('div');
        number.classList.add('number');
        number.textContent = randomNumber(1, 100);

// Randomly position number within game container
        const x = randomNumber(0, gameContainer.clientWidth - 30);
        const y = randomNumber(0, gameContainer.clientHeight - 30);
        number.style.left = `${x}px`;
        number.style.top = `${y}px`;

gameContainer.appendChild(number);

// Add click event listener to number
        number.addEventListener('click', () => {
            score += parseInt(number.textContent);
            document.getElementById('score').textContent = `Счет: ${score}`;
            gameContainer.removeChild(number);
        });

// Make numbers bounce within game container
        const speedX = randomNumber(-1, 1);
        const speedY = randomNumber(-1, 1);
        const interval = setInterval(() => {
            x += speedX;
            y += speedY;

if (x <= 0 || x >= gameContainer.clientWidth - 30) {
                speedX *= -1;
            }
            if (y <= 0 || y >= gameContainer.clientHeight - 30) {
                speedY *= -1;
            }

number.style.left = `${x}px`;
            number.style.top = `${y}px`;
        }, 10);
    }

setInterval(createNumber, 2000);
</script>
</body>
</html>