`data/artifacts/08d1c975f6db/qwen3-14b.html`

63 lines
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bouncing Balls</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #222;
            font-family: sans-serif;
        }
        canvas {
            background: #111;
            display: block;
        }
        #gravitySlider {
            margin: 10px;
            width: 300px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <label for="gravitySlider">Gravity:</label>
    <input type="range" id="gravitySlider" min="0.1" max="2.0" step="0.01" value="0.5">
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const gravitySlider = document.getElementById('gravitySlider');
        let gravity = parseFloat(gravitySlider.value);

        gravitySlider.addEventListener('input', (e) => {
            gravity = parseFloat(e.target.value);
        });

        class Ball {
            constructor(x, y, vx, vy, radius, color) {
                this.x = x;
                this.y = y;
                this.vx = vx;
                this.vy = vy;
                this.radius = radius;
                this.color = color;
                this.trail = [];
            }

            update() {
                // Apply gravity
                this.vy += gravity;
                // Update position
                this.x += this.vx;
                this.y += this.vy;
                // Check wall collisions
                if (this.x - this.radius < 0) {
                    this.x = this.radius;
                    this.vx *= -0.8;
                } else if (this.x + this.radius > canvas.width) {
                    this.x = canvas.width - this.radius;
                    this.vx *= -0.8;