A blue ball that move randomly's game

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

No:19832

105

←

Prev Next

→

A blue ball that move randomly
Developer User8801｜Date and time 23/10/7 3:52:19
Build time 9.122 sec｜Game capacity 2.158KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #board {
            width: 100%;
            height: 400px;
            background-color: #F0F0F0;
            position: relative;
        }
        #ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="board">
        <div id="ball"></div>
    </div>
    
    <script>
        // Wait for the DOM to load
        document.addEventListener("DOMContentLoaded", function(event) {
            var board = document.getElementById("board");
            var ball = document.getElementById("ball");
            
            // Get the width and height of the board
            var boardWidth = board.offsetWidth;
            var boardHeight = board.offsetHeight;
            
            // Function to generate a random position for the ball
            function randomPosition() {
                var ballSize = 50; // Assuming the ball has a width and height of 50px
                var maxX = boardWidth - ballSize;
                var maxY = boardHeight - ballSize;
                
                var randomX = Math.floor(Math.random() * maxX);
                var randomY = Math.floor(Math.random() * maxY);
                
                return {
                    x: randomX,
                    y: randomY
                };
            }
            
            // Function to move the ball to a random position
            function moveBall() {
                var position = randomPosition();
                ball.style.left = position.x + "px";
                ball.style.top = position.y + "px";
            }
            
            // Initial move of the ball
            moveBall();
            
            // Move the ball every 1 second (1000 milliseconds)
            setInterval(moveBall, 1000);
        });
    </script>
</body>
</html>