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

5492

←

Prev Next

→

Beautiful Fireworks When you tap the screen, firew..ALL
Developer もちきなこ｜Date and time 23/7/1 20:50:07
Build time 22.869 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>