Make wins and losses feel emotionally different. Outcome should change atmosphere.

What makes the difference between a game that feels flat and one that feels AMAZING? The answer is "juice" — tiny visual and audio details that make every action feel satisfying. Watch these two legendary talks:

Video 1: Juice It or Lose It — Martin Jonasson & Petri Purho (15 min)

The most famous talk on game juice ever. Watch as they take a boring Breakout clone and add screen shake, particles, sound, and flash effects — transforming it into something that FEELS incredible. This is the #1 game feel video on the internet.

Video 2: Why Does Celeste Feel So Good to Play? — GMTK (11 min)

Mark Brown breaks down exactly why Celeste's controls feel so tight and satisfying. Shows how tiny invisible helpers — coyote time, input buffering, screen shake — make the player feel like a hero.

Discussion after watching: What was the single biggest change that made the Breakout game feel different? Why do tiny effects (a 300ms flash, a small shake) create such a huge emotional difference? Can you think of a game you play that would feel boring without its juice?

A win should feel different from a loss. Not through complex animation — through simple visual feedback. A screen flash, a color change, a message. Small signals create big emotional impact.

This is a two-part experiment you do with your actual game.

Round 1 — Plain:

  1. Trigger a win event in your game (earn XP, complete a build).
  2. Watch what happens. Does the number just... change? Does anything visual happen?
  3. Rate the feeling: 1 (boring) to 10 (exciting).

Round 2 — Juiced:

  1. Trigger the same event, but this time add "manual juice": clap your hands when it happens, flash a piece of colored paper across the screen, shout "YES!"
  2. Rate the feeling again: 1 to 10.

Write down:

  • Plain score: ___
  • Juiced score: ___
  • What was different? (The GAME was identical — only the feedback changed.)

This is the core lesson: You're adding FEELING to FUNCTION. The game logic didn't change. The numbers didn't change. Only the feedback changed — and it transformed the experience. That's what you'll code today: a screen flash that does in code what your clap did in real life.

Ami — Combat Feedback
  • On Win: Flash screen green briefly. Console message: "Victory — XP gained."
  • On Loss: Flash screen red. Camera resets to Camp.
  • On Boss Encounter: Darken background slightly to signal heightened stakes.
Ida — Economy Feedback
  • On Build Complete: Brief gold flash. Display "Project Complete" message.
  • On Bankruptcy: Strong red flash. Display reset message.
  • On Car Unlock: Text animation: "Car Unlocked."

Add a screen overlay div for flash effects:

<div id="flash"></div>

Style it to cover the full screen:

#flash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 99; }

Change background color for 300ms with a CSS transition:

function flashScreen(color) { const flash = document.getElementById('flash'); flash.style.background = color; flash.style.opacity = '0.3'; setTimeout(() => { flash.style.opacity = '0'; }, 300); } // Usage: flashScreen('green'); // win flashScreen('red'); // loss flashScreen('gold'); // special event
  • Create screen overlay div for flash effects
  • Implement flashScreen() function
  • Wire flash to win/loss/special events
  • Add distinct visual for each event type
  • Test: events feel emotionally different
  • Verify flash doesn't interfere with gameplay
  • Checkpoint

    Wins and losses feel emotionally different. Events have visual impact without being distracting.

    No sound effects (optional if time allows). No particle effects. No complex animations. Just color flashes and text.

    Flash too long (annoying) — 300ms is enough. Longer than half a second and it becomes irritating.

    Flash too subtle (invisible) — opacity 0.3 is a good starting point. Test it and adjust.

    Same feedback for different events — if wins and losses look the same, the feedback is meaningless. Each event needs a distinct visual.

    Flash blocking input — use pointer-events: none on the flash overlay so clicks pass through.

    This is game feel — the art of making simple things feel good. Ask: "Does this make the system clearer without adding mechanics?" The answer should be yes. If the feedback obscures rather than clarifies, it needs to be simpler.

    The juice comparison activity is key. Don't skip the physical demonstration. Having them clap, shout, or flash paper makes the abstract concept tangible. The emotional difference between "plain" and "juiced" is immediately obvious — and that visceral experience drives the coding work.

    Watch for over-juicing. After watching the videos, kids often want to add screen shake, particles, sound effects, and animations all at once. Redirect: "Pick ONE event and make it feel great. Then move to the next." Restraint is part of the skill.

    Tomorrow: We tune the numbers — balance is about feel, not formulas. You've made things visible (Day 21) and emotional (today). Tomorrow you make them fair.