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

5486

←

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>