Bouncing ball inside of a box's game

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

No:37601

←

Prev Next

→

Bouncing ball inside of a box
Developer User17064｜Date and time 24/1/21 6:27:43
Build time 4.993 sec｜Game capacity 1.529KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Ball Game</title>
    <style>
        #box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid black;
            margin: 0 auto;
        }

#ball {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="ball"></div>
    </div>

// Set initial position and direction of the ball
        var xPos = 0;
        var yPos = 0;
        var xVel = 5;
        var yVel = 5;

// Function to update the ball's position
        function updatePosition() {
            xPos += xVel;
            yPos += yVel;

// Check if the ball hits the walls
            if (xPos <= 0 || xPos + ball.offsetWidth >= box.offsetWidth) {
                xVel *= -1;
            }
            if (yPos <= 0 || yPos + ball.offsetHeight >= box.offsetHeight) {
                yVel *= -1;
            }

// Update the ball's position
            ball.style.left = xPos + "px";
            ball.style.top = yPos + "px";
        }

// Start the game loop
        setInterval(updatePosition, 15);
    </script>
</body>
</html>