Juice: Making It Feel Good

Particles for feedback

When you grab a coin or a hazard hits, the game explodes a handful of sparkles. Particles are tiny, short-lived sprites that make actions feel impactful. The game stores them in a pool (reuse objects instead of creating garbage):

class ParticlePool {
  constructor(max = 200) {
    this.pool = Array.from({ length: max }, () => ({
      x: 0, y: 0, vx: 0, vy: 0, life: 0, maxLife: 1, size: 3, color: '#fff', active: false,
    }));
  }

  spawn(x, y, color) {
    for (const p of this.pool) {
      if (!p.active) {
        p.active = true;
        p.x = x; p.y = y;
        p.vx = rand(-120, 120);
        p.vy = rand(-120, 120);
        p.maxLife = p.life = rand(0.3, 0.7);
        p.color = color;
        return p;
      }
    }
  }

  update(dt) {
    for (const p of this.pool) {
      if (!p.active) continue;
      p.x += p.vx * dt;
      p.y += p.vy * dt;
      p.life -= dt;
      if (p.life <= 0) p.active = false;
    }
  }

  draw(ctx) {
    ctx.fillStyle = '#fff';
    for (const p of this.pool) {
      if (p.active) {
        ctx.globalAlpha = Math.max(0, p.life / p.maxLife);
        ctx.fillRect(p.x, p.y, p.size, p.size);
      }
    }
    ctx.globalAlpha = 1;
  }
}

• spawn finds the first inactive particle and revives it with new coordinates.
• update moves each alive particle by vx * dt, shrinks its life, and kills it when life <= 0.
• draw paints each particle, fading by its remaining life via globalAlpha.

The globalAlpha = 0.6 in draw makes each sparkle semi-transparent, so overlapping ones blend into a burst instead of looking like solid squares. That's a small call that does most of the "juice".

Screen shake

The camera can shake to sell impacts, a coin pickup gives a small nudge, a hazard hit shakes hard. The game stores the shake in the Camera class:

class Camera {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.x = 0;
    this.y = 0;
    this.shake = 0;
    this._lookX = 0;   // where the camera is easing toward (follows the player)
  }

  addShake(amount) {
    this.shake = Math.min(this.shake + amount, 24);  // cap the shake at 24 px
  }

  addX(pxPerFrame) { this._lookX += pxPerFrame; }

  update(dt) {
    // ease the look target toward the player
    this.x += (this._lookX - this.x) * Math.min(1, dt * 8);
    // shake decays; add jitter based on remaining energy
    if (this.shake > 0) {
      this.shake *= 0.9;                                  // decay
      this.x += rand(-this.shake, this.shake);            // jitter x
    }
  }
}

• addShake(amount): record how much to shake.
• update(dt): each frame, the shake *= decay (here 0.9), so it shrinks until it's gone. While any shake remains, a random offset in [-shake, shake] jitters the camera.

So a big hit creates a shake that fades naturally rather than stopping instantly. That fade is the "juice", it reads as a physical recoil.

Notice this.shake *= 0.9: a multiplier under 1 always produces a smooth exponential decay. That one line is the trick behind nearly every "juice" animation.

Quadratic easing on the camera follow

The camera should ease toward the player, not snap. Snapping feels jarring; easing feels cinematic. The math is a simple lerping toward a target:

function lerp(a, b, t) {
  return a + (b - a) * t;
}

// in Camera.update(dt):
this.x += (this._lookX - this.x) * Math.min(1, dt * 8);
// which is the same as:
this.x = lerp(this.x, this._lookX, Math.min(1, dt * 8));

lerp(a, b, t) moves a toward b by the fraction t. When t = 0, no move; when t = 1, you're at the target. Using dt (not a fixed fraction) means the ease has the **same speed regardless of frame rate*: the same idea as delta time in the Game Loop lesson.

The game applies this to follow the player horizontally:

this.camera.addX(dt * CONFIG.RUN_SPEED * 1.2);  // move look target with the player
this.camera.update(dt);                          // ease toward it

The camera's x trails the player, then catches up smoothly, like watching a runner through a moving window. That single dt * 8 factor (the t in lerp) controls how "floaty" vs. "tight" the follow feels.