Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/Demos/
Upload File :
Current File : //home/beeson/public_html/WebMathXpert/Demos/BouncingBalls.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Balls Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: black;
        }
        canvas {
            background-color: white;
            border: 2px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // Set canvas to fill window
        canvas.width = window.innerWidth * 0.8;
        canvas.height = window.innerHeight * 0.8;

        let balls = [];
        for (let i = 0; i < 30; i++) {
            balls.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                dx: (Math.random() - 0.5) * 6,
                dy: (Math.random() - 0.5) * 6,
                radius: Math.random() * 15 + 5,
                color: `hsl(${Math.random() * 360}, 100%, 50%)`
            });
        }

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Erase last frame
            balls.forEach(ball => {
                ball.x += ball.dx;
                ball.y += ball.dy;

                // Bounce off walls
                if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) ball.dx *= -1;
                if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) ball.dy *= -1;

                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                ctx.fillStyle = ball.color;
                ctx.fill();
            });

            requestAnimationFrame(update); // Run at ~60fps
        }

        update();
    </script>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists