Click-Explosion

by velo_ninja

HTML

<canvas id="explosionCanvas" width="600" height="500" style="border: 1px solid black;"></canvas>

JavaScript

const canvas = document.getElementById('explosionCanvas');
const ctx = canvas.getContext('2d');

const getHexCenter = () => ({
    x: canvas.width / 2,
    y: canvas.height / 2
});

const particles = [];

// Particle constructor for managing individual flames and smoke
class ANIMATIO {
    constructor(x, y, angle, speed, size, color, lifetime) {
        this.x = x;
        this.y = y;
        this.angle = angle;
        this.speed = speed;
        this.size = size;
        this.color = color;
        this.alpha = 1;
        this.lifetime = lifetime;
        this.age = 0;
    }

    update(deltaTime) {
        this.x += Math.cos(this.angle) * this.speed * deltaTime;
        this.y += Math.sin(this.angle) * this.speed * deltaTime;
        this.age += deltaTime;
        this.alpha = Math.max(0, 1 - this.age / this.lifetime);
    }

    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.alpha})`;
        ctx.fill();
    }
}

const animateFireOrExplosion = (callback) => {
    const hexCenter = getHexCenter();

    const createParticles = () => {
        for (let i = 0; i < 50; i++) {
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 100 + 50;
            const size = Math.random() * 3 + 1;
            const lifetime = Math.random() * 0.5 + 0.5;
            const color = Math.random() > 0.5
                ? { r: 255, g: Math.random() * 200, b: 0 }
                : { r: 200, g: 200, b: 200 }; // Flames or smoke
            particles.push(new ANIMATIO(hexCenter.x, hexCenter.y, angle, speed, size, color, lifetime));
        }
    };

    const drawExplosionFrame = () => {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Update and draw particles
        particles.forEach((particle, index) => {
            particle.update(1 / 60);
            if...