`data/artifacts/10d3501bd633/qwen25-7b.html`

104 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Fireworks</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; width: 100%; height: 100%;}
    </style>
</head>
<body>
<canvas id="fireworkCanvas"></canvas>
<script>
const canvas = document.getElementById('fireworkCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 4 + 1;
        this.speedX = (Math.random() - 0.5) * 6;
        this.speedY = -(Math.random() * 2 + 3);
        this.lifeSpan = 90;
    }

    update() {
        if (++this.lifeSpan < 0) return false;
        this.x += this.speedX;
        this.y += this.speedY;
        this.size -= 0.1;
        return true;
    }

    draw() {
        ctx.fillStyle = `rgba(255, ${Math.random() * 140 + 100}, 0, ${this.lifeSpan / 90})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

class Rocket {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.particles = [];
        for (let i = 0; i < 5; i++) {
            const particle = new Particle(this.x + Math.random() * 16 - 8, this.y);
            this.particles.push(particle);
        }
    }

    launch() {
        this.particles.forEach(p => p.update());
        this.particles = this.particles.filter(p => p.update());
        if (this.particles.length === 0) return false;
        requestAnimationFrame(() => this.launch());
    }

    draw() {
        ctx.fillStyle = 'rgba(255, 214, 0, 0.8)';
        ctx.beginPath();
        ctx.arc(this.x, this.y, 6, 0, Math.PI * 2);
        ctx.fill();
    }
}

let rockets = [];
function launchRocket() {
    const rocket = new Rocket(canvas.width / 2, canvas.height - 10);
    rockets.push(rocket);
    rocket.launch();
}

document.addEventListener('click', () => {
    if (rockets.length < 3) {
        launchRocket();
    }
});

let autoShowTimer;
function startAutoShow() {
    autoShowTimer = setInterval(() => {
        if (rockets.length < 3) launchRocket();
    }, 2000);
}

startAutoShow();

requestAnimationFrame(() => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    rockets.forEach(r => r.draw());
    rockets = rockets.filter(r => r.particles.length > 0);
});

</script>
</body>
</html>