`data/artifacts/0ac1af2eaed4/qwen25-7b.html`

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

let autoShow = false;

function Rocket(x, y) {
    this.x = x; this.y = y;
    this.angle = Math.random() * 2 * Math.PI;
    this.speed = (Math.random() + 0.5) * 3;
}

Rocket.prototype.update = function() {
    if(this.y > c.height - 10) { 
        this.explode();
        return; 
    }
    this.angle -= 0.01;
    this.x += Math.cos(this.angle) * (this.speed--);
    this.y += Math.sin(this.angle) * (this.speed--);
};

Rocket.prototype.explode = function() {
    for(let i = 0; i < 50; i++) {
        const p = new Particle(this.x, this.y + 10);
        particles.push(p);
    }
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 2 + 1;
    this.speedY = -Math.random() * 5;
    this.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
}

Particle.prototype.update = function() {
    this.y += this.speedY;
    if(this.size > 0) { 
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
        ctx.fillStyle = this.color;
        ctx.fill(); 
    }
};

const rockets = [];
const particles = [];

function launchRocket(e) {
    const x = e.offsetX || e.layerX;
    const y = e.offsetY || e.layerY;
    rockets.push(new Rocket(x, y));
}

c.addEventListener("click", launchRocket);

function autoLaunch() {
    if(!autoShow) return;
    rockets.push(new Rocket(c.width/2, c.height - 10));
    requestAnimationFrame(autoLaunch);
}

setInterval(() => { 
    if(Math.random() > 0.975) autoShow = !autoShow; 
}, 3000);

function drawParticles() {
    ctx.globalAlpha = 0.8;
    particles.forEach(p => p.update());
    ctx.globalAlpha = 1;
}

function drawRockets() {
    rockets.forEach(r => r.update());
    if(autoShow) autoLaunch();
}

setInterval(drawParticles, 25);
setInterval(drawRockets, 30);

window.requestAnimationFrame(() => {});
</script>
</body>
</html>