`data/artifacts/08d1c975f6db/qwen25-7b.html`

80 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Balls</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #2b2b2b; }
        canvas { display: block; }
    </style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let balls = [];
for (let i = 0; i < 20; i++) {
    balls.push({
        x: Math.random() * canvas.width,
        y: 0,
        dx: (Math.random() - 0.5) * 3,
        dy: 0,
        radius: Math.random() * 10 + 10
    });
}

function drawBall(ball, trail = false) {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    if (trail) ctx.strokeStyle = 'rgba(255,255,255,' + (1 - ball.y / canvas.height) + ')';
    else ctx.fillStyle = 'white';
    if (trail) ctx.stroke();
    else ctx.fill();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const gravity = 0.5;
    for (let i = balls.length - 1; i >= 0; i--) {
        let ball = balls[i];
        if (ball.y + ball.radius > canvas.height) {
            ball.dy = -(ball.dy * 0.7);
            ball.y = canvas.height - ball.radius;
        } else {
            ball.dy += gravity;
        }
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.dx = -ball.dx;
        }
        for (let j = i; j < balls.length; j++) {
            let otherBall = balls[j];
            if ((i !== j) && (Math.hypot(ball.x - otherBall.x, ball.y - otherBall.y) < (ball.radius + otherBall.radius))) {
                let angle = Math.atan2(otherBall.y - ball.y, otherBall.x - ball.x);
                let speed = 0.75 * ((ball.dx * ball.dx + ball.dy * ball.dy) ** 0.5 + otherBall.dx * otherBall.dx + otherBall.dy * otherBall.dy) ** 0.5;
                balls[i] = {
                    x: canvas.width / 2,
                    y: canvas.height / 2,
                    dx: speed * Math.cos(angle),
                    dy: speed * -Math.sin(angle)
                };
                balls[j] = {
                    x: canvas.width / 2,
                    y: canvas.height / 2,
                    dx: -speed * Math.cos(angle),
                    dy: -speed * Math.sin(angle)
                };
            }
        }
        ball.x += ball.dx;
        ball.y += ball.dy;
        drawBall(ball, true);
    }
}

setInterval(draw, 1000/60);
</script>
</body>
</html>