Game with bouncing numbers and alphabets and symbols's game

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

No:13843

136

←

Prev Next

→

Game with bouncing numbers and alphabets and symbo..ALL
Developer User6030｜Date and time 23/8/30 4:36:41
Build time 14.666 sec｜Game capacity 2.774KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Game</title>
    <style>
        #gameContainer {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #f1f1f1;
            overflow: hidden;
        }

.bouncingElement {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: #ff5722;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div id="gameContainer"></div>

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

function createBouncingElement() {
                const elementIndex = getRandomNumber(0, elements.length - 1);
                const colorIndex = getRandomNumber(0, colors.length - 1);
                const newElement = document.createElement('div');

newElement.innerText = elements[elementIndex];
                newElement.style.backgroundColor = colors[colorIndex];
                newElement.style.left = getRandomNumber(0, container.offsetWidth - 40) + 'px';

container.appendChild(newElement);

animateBouncing(newElement);
            }

function animateBouncing(element) {
                let positionY = 0;
                let velocityY = 1;
                const gravity = 0.2;

function updatePosition() {
                    velocityY += gravity;
                    positionY += velocityY;

if (positionY + element.offsetHeight > container.offsetHeight) {
                        positionY = container.offsetHeight - element.offsetHeight;
                        velocityY *= -0.8;
                    }

element.style.top = positionY + 'px';

requestAnimationFrame(updatePosition);
                }

updatePosition();
            }

function startGame() {
                for (let i = 0; i < 15; i++) {
                    setTimeout(createBouncingElement, i * 1000);
                }
            }

startGame();
        }

window.onload = function () {
            BouncingGame();
        };
    </script>
</body>
</html>