Explosion effects generator's game

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

No:52322

119

←

Prev Next

→

Explosion effects generator
Developer Winnerweiner2113｜Date and time 24/3/20 15:14:47
Build time 6.687 sec｜Game capacity 2.295KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Explosion Effects Generator</title>
</head>
<body>

const colors = ['#ff0000', '#ffa500', '#ffff00', '#00ff00', '#0000ff', '#800080'];

function createExplosion(x, y) {
            const particles = [];

for(let i = 0; i < 100; i++) {
                const particle = {
                    x,
                    y,
                    size: Math.random() * 10 + 2,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    speedX: (Math.random() - 0.5) * 5,
                    speedY: (Math.random() - 0.5) * 5
                };

particles.push(particle);
            }

return particles;
        }

function drawExplosion(particles) {
            particles.forEach(particle => {
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                ctx.fillStyle = particle.color;
                ctx.fill();
            });
        }

function updateExplosion(particles) {
            particles.forEach(particle => {
                particle.x += particle.speedX;
                particle.y += particle.speedY;

particle.size -= 0.1;
            });

return particles.filter(particle => particle.size > 0);
        }

function mainLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

explosions.forEach(explosion => {
                drawExplosion(explosion.particles);
                explosion.particles = updateExplosion(explosion.particles);
            });

explosions = explosions.filter(explosion => explosion.particles.length > 0);

requestAnimationFrame(mainLoop);
        }

let explosions = [];

canvas.addEventListener('click', function(e) {
            const newExplosion = {
                particles: createExplosion(e.clientX, e.clientY)
            };

explosions.push(newExplosion);
        });

mainLoop();
    </script>

</body>
</html>