`data/artifacts/0ac1af2eaed4/hermes3-8b.html`

109 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks Simulator</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            touch-action: none;
            cursor: crosshair;
        }
        #canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    let showMode = false;

    function getRandomValue(min, max) {
        return Math.random() * (max - min) + min;
    }

    function Particle(x, y) {
        this.x = x;
        this.y = y;
        this.size = getRandomValue(10, 15);
        this.speedX = getRandomValue(-5, 5);
        this.speedY = -getRandomValue(1, 5);
        this.color = 'rgba(255, 255, 255, 0.8)';
    }

    Particle.prototype.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.stroke();
    };

    function createExplosion(x, y) {
        let particles = [];
        for (let i = 0; i < 50; i++) {
            particles.push(new Particle(x, y));
        }
        return particles;
    }

    function drawParticles(particles) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < particles.length; i++) {
            let particle = particles[i];
            particle.draw();
            particle.y += particle.speedY;
            particle.x += particle.speedX;

            if (
                particle.x + particle.size > canvas.width ||
                particle.x - particle.size < 0 ||
                particle.y + particle.size > canvas.height ||
                particle.y - particle.size < 0
            ) {
                particles.splice(i, 1);
                i--;
            }
        }
    }

    function loop() {
        let particles = [];
        
        if (!showMode) {
            for (let i = 0; i < 5; i++) {
                let x = getRandomValue(100, canvas.width - 100);
                let y = canvas.height;
                particles.push(...createExplosion(x, y));
            }
        } else {
            for (let i = 0; i < 10; i++) {
                let x = getRandomValue(50, canvas.width - 50);
                let y = getRandomValue(50, canvas.height - 100);
                particles.push(...createExplosion(x, y));
            }
        }

        drawParticles(particles);

        if (!showMode) {
            requestAnimationFrame(loop);
        } else {
            setTimeout(loop, 1000 / 60); // 60 FPS
        }
    }

    canvas.addEventListener('click', () => {
        showMode = !showMode;
    });

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