Beautiful Fireworks When you tap the screen, fireworks drawn by JavaScript are shot up at the position where you tap. Each particle is made up of very small particles (1px unit). Also, many particles are used for one firework. The color is random, and the color changes depending on the fireworks. However, the color of each firework itself is the same.'s game

Click here for free DL of the app version that can save data.

No:6197

2615

←

Prev Next

→

Beautiful Fireworks When you tap the screen, firew..ALL
Developer anonymous｜Date and time 70/1/1 9:43:14
Build time unknown sec｜Game capacity 2.594KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>綺麗な花火</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script>
        const fireworksCanvas = document.getElementById('fireworks');
        const ctx = fireworksCanvas.getContext('2d');
        let particles = [];

fireworksCanvas.width = window.innerWidth;
        fireworksCanvas.height = window.innerHeight;

class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.radius = Math.random() * 2 + 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
                this.life = 80;
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.life -= 1;
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

function createFirework(x, y) {
            const particleCount = 100;
            const hue = Math.random() * 360;
            const color = `hsl(${hue}, 100%, 50%)`;

for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle(x, y, color));
            }
        }

function drawParticles() {
            for (let i = 0; i < particles.length; i++) {
                particles[i].draw();
            }
        }

function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);

updateParticles();
            drawParticles();

requestAnimationFrame(animate);
        }

fireworksCanvas.addEventListener('click', (e) => {
            const mouseX = e.clientX;
            const mouseY = e.clientY;
            createFirework(mouseX, mouseY);
        });

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