Game Feel & Graphics

Adding "Juice" with Canvas Particles

A game without particles is like a sandwich without sauce—dry and functional, but missing the magic. In this interactive lesson, we'll build a lightweight, high-performance particle system from scratch.

BeginnerCanvas APIMath8 min read

What is "Game Juice"?

In game design, "juice" refers to the visual and audio feedback a game provides when a player performs an action. If a player shoots an enemy and the enemy simply disappears, the interaction feels flat. If the enemy explodes into a shower of sparks, the screen shakes, and a chunky sound effect plays, the interaction feels juicy.

Particles are the cheapest and most effective way to add juice. They can simulate dust kicks when a character jumps, blood splatters, sparks from a sword clash, or magical auras.

Particle Physics 101

At its core, a particle is just an object with a few basic properties:

Position (x, y): Where it is on the screen.
Velocity (vx, vy): How fast it is moving along each axis.
Life (or Alpha): How long it survives before fading out and being removed.

To make particles look realistic, we apply two simple mathematical forces every frame: Gravity (pulls them down) and Friction (slows them down).

// Applying Physics to a Particle
particle.vy += gravity; // Gravity pulls down
particle.vx *= friction; // Friction slows horizontal movement
particle.vy *= friction; // Friction slows vertical movement
particle.x += particle.vx;
particle.y += particle.vy;

Interactive Explosion Sandbox

Below is a fully working particle explosion system. Click anywhere on the black canvas to spawn an explosion!

Try modifying the code on the left. Change the gravity, friction, or the colors in the colors array. Click ▶ Run Code to see your changes instantly.

💻 HTML/JS Editor

<canvas id="game" width="400" height="400" style="background:#111; border-radius: 8px; width: 100%; height: 100%; cursor: crosshair;"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let particles = [];

// --- TWEAK THESE SETTINGS! ---
const gravity = 0.2;
const friction = 0.96;
const numParticles = 40;
const colors = ['#ff4d4d', '#ffb84d', '#ffd93d', '#ffffff'];
// -----------------------------

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        // Random explosion velocity
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 8 + 2;
        this.vx = Math.cos(angle) * speed;
        this.vy = Math.sin(angle) * speed;
        
        this.size = Math.random() * 4 + 2;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.alpha = 1;
        this.decay = Math.random() * 0.02 + 0.015;
    }
    
    update() {
        this.vy += gravity;
        this.vx *= friction;
        this.vy *= friction;
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= this.decay;
    }
    
    draw() {
        ctx.save();
        ctx.globalAlpha = Math.max(0, this.alpha);
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }
}

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

// Click to explode
canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    const x = (e.clientX - rect.left) * scaleX;
    const y = (e.clientY - rect.top) * scaleY;
    createExplosion(x, y);
});

function loop() {
    // Semi-transparent black for motion blur trail effect
    ctx.fillStyle = 'rgba(17, 17, 17, 0.3)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = 'white';
    ctx.font = '14px Arial';
    ctx.fillText('Click to explode! Particles: ' + particles.length, 10, 20);

// Update and draw backwards to allow removal
    for (let i = particles.length - 1; i >= 0; i--) {
        let p = particles[i];
        p.update();
        p.draw();
        
        if (p.alpha <= 0) {
            particles.splice(i, 1);
        }
    }
    
    requestAnimationFrame(loop);
}

// Initial explosion in the center
createExplosion(200, 200);
loop();
</script>

Memory & Object Pooling (A Word of Warning)

In the sandbox example above, we use particles.push(new Particle()) and particles.splice(i, 1). This is incredibly easy to read and understand, but it has a hidden cost: Garbage Collection (GC).

If you have a game where a machine gun is firing 20 bullets a second, and each bullet creates 10 particles when it hits a wall, you are creating and destroying hundreds of objects every second. Eventually, the browser will pause the game for a few milliseconds to clean up the memory, resulting in a noticeable stutter.

Pro Tip: For production games, pre-allocate an array of 500 particles at the start of the game (Object Pooling). Instead of destroying them, mark them as "inactive". When an explosion happens, find an inactive particle and reset its position and alpha!

Ready for more? Check out our Astrominer game to see these exact particle tricks used for mining space rocks!