FROM PROMPT TO PLAY
AUDIENCE GUIDE · PART 2

From Prompt to Play

How to make your game feel like a game.

Your prototype works. Now let's make it fun. Each level explains one idea in plain words, lets you try it in a live demo with on/off switches, and gives you a prompt to paste into your AI tool so you can add it to your own game.

▶ CONTINUE PART 1 CLEARED
PROLOGUE

It Moves. Is It a Game?

AI can build a working prototype in minutes. Making people want to keep playing it is a different skill, and it is one you can learn.

PROTOTYPEA square that moves when you press a key.
GAMESomething you want to play again.
THE FOUR INGREDIENTS
HOW TO USE THIS PAGEEvery demo starts as the plain "before" version. Click a demo so it listens to your keyboard, then turn the switches on one at a time and notice what changes.
LEVEL 1 OF 85 MIN

Start, Pause & Game Over

Every game needs a beginning, a pause and an ending.

KEY TERMGame statesThe different screens your game can be on: title, playing, paused, game over.
SCREEN FLOW

Put your game inside a frame.

  • Title screenGives the player a moment to get ready before anything can hurt them.
  • PauseReal life interrupts. Pausing should freeze everything, including timers and enemies.
  • Game overWhen you lose, show what happened and your score, instead of just freezing.
  • One-button restartThe faster you can try again, the more you keep playing.
WHY IT WORKS

The game always knows which screen it is on. A clear start and a clear ending turn a toy into something you sit down and play.

TRY THIS PROMPT

Add a title screen that waits for Space or a tap, a pause menu on Esc that freezes everything, and a game over screen that shows the score and starts again with one button. Don't change how the game plays.

REFERENCES
LIVE DEMO · DODGEARROWS / A D · DRAG · P

CURRENT SCREEN: NONE

With the switch off, the game starts the second the page loads and simply stops when you get hit. Turn it on to get a title screen, a pause (P or Esc) and a game over screen where one button lets you try again.

LEVEL 2 OF 89 MIN

Hit Effects

Small effects that make every action feel good.

KEY TERMJuiceGame-dev slang for the extra effects that make every hit feel good: shake, flash, sparks and sound.
POWER-UPS

Same rules. Way more satisfying.

  • Screen shakeThe screen shakes for a split second, so hits feel heavy.
  • Hit pauseThe game freezes for a tiny moment when something gets hit, so you feel the impact.
  • ParticlesLittle sparks and bits fly out and show exactly what just happened.
  • Hit flashWhatever gets hit blinks white for a moment.
  • Squash & stretchThings stretch when they jump and squash when they land, like rubber.
  • A sound for everythingJumping, hitting, picking things up. You should hear every action.
WHY IT WORKS

The rules don't change at all, but now every action gets a reaction, and that is what players feel. Too many effects at once gets confusing, so add one at a time.

TRY THIS PROMPT

When the player hits an enemy, add a tiny freeze, a small screen shake, a white flash on the enemy and a burst of sparks. Put the strength of each effect in one settings list so I can adjust them.

REFERENCES
  • Juice it or Lose itMartin Jonasson & Petri Purho, GDC talk (search it on YouTube)
  • The Art of ScreenshakeJan Willem Nijman, Vlambeer (search it on YouTube)
  • jsfxr: free retro sound effectssfxr.me
  • Freesoundfreesound.org · check each sound's license
LIVE DEMO · HIT THE BLOCKSCLICK · SPACE · ENTER

Hit the blocks with everything off first. Then turn on one effect at a time. Sound starts after your first click.

LEVEL 3 OF 86 MIN

Sound & Music

Half of what players feel, they hear.

KEY TERMSoundscapeEverything the player hears: music, sound effects and background sounds.
SOUND TEST

Close your eyes. Can you still tell what is happening?

  • Music sets the moodCalm music on the menu, upbeat music while you play, scary music for the boss. Each place gets its own song.
  • A sound for every actionJump, coin, hit, menu click. If the player did something, they should hear it.
  • Background soundsWind, birds, a low rumble. Quiet sounds in the background (ambience) make the world feel real.
  • DuckingThe music gets quieter for a moment so an important sound is heard. Also give players separate volume for music and effects.
WHY IT WORKS

Players notice sound most when it is missing. Music tells them how to feel, sound effects confirm what they did, and background sounds make the place feel alive. You can make all of it with code, no audio files needed.

TRY THIS PROMPT

Add sound using the Web Audio API (the browser's built-in sound tools): different background music for the menu, the level and the boss, and short sound effects for jumping, collecting and getting hurt. Add separate volume sliders for music and effects, a mute button, and make the music quieter for a moment when the player gets hurt.

REFERENCES
SPACE · CLICK · ESC
    MUSIC
    80%
    SFX
    80%
    AMBIENCEAMB
    80%
    DUCKING
    -75%
    MASTER
    100% ALL

    Turn the room's sound up. Everything starts silent: turn on music, then SFX (sound effects), then ambience. Each channel has its own fader and a live meter; MASTER sets the volume of all of them. In STAGE, jump to grab coins and listen for each sound. Switch to BOSS to hear the music change, then jump over the shots: with ducking on, the music drops so you clearly hear the hit. The DUCKING fader sets how far it drops.

    LEVEL 4 OF 86 MIN

    Enemy Attacks & Warnings

    When you lose, it should feel like your mistake, not the game cheating.

    KEY TERMTelegraphingWarning the player just before an attack, so they have time to react.
    ENEMY AI

    Give every enemy simple behavior you can learn.

    • One mode at a timeThe enemy is always in one clear mode: walking around, chasing, getting ready, attacking, resting. Programmers call this a state machine.
    • PatternsWalk around, chase, run away. Players can only beat what they can learn.
    • TelegraphA warning before every attack: a flash, a sound or a pose.
    • Recovery windowAfter attacking, the enemy rests for a moment. That is your chance to hit back.
    WHY IT WORKS

    Players are fine with losing when they could have seen it coming. A warning turns a cheap hit into a lesson.

    TRY THIS PROMPT

    Give the enemy three modes: walk around, chase the player when they get close, then attack. Before each attack, add a half-second warning where it flashes and makes a sound, and after attacking, a short break where the player can hit it.

    REFERENCES
    LIVE DEMO · THE GUARDMOUSE / WASD · CLICK · SPACE
    1. PATROL
    2. CHASE
    3. WIND-UP
    4. ATTACK
    5. RECOVER

    Walk close to the guard. With both switches off, it attacks with no warning and you can never hit back. Turn on the telegraph to see attacks coming, and the recovery window to fight back: click the guard (or press Space next to it) while it is dizzy. Sound is on, using what you learned in Level 3: listen for the guard spotting you, attacking and getting dizzy. Use the SOUND switch to mute it.

    LEVEL 5 OF 87 MIN

    Difficulty & High Score

    A reason to keep playing, and a reason to come back.

    KEY TERMDifficulty curveHow quickly the game gets harder as you play.
    EXPERIENCE POINTS

    Let players feel themselves getting better.

    • Teach without textShow each new thing somewhere safe first, before it really matters.
    • Harder, then a breakMake it harder in steps (waves), with calm moments in between.
    • Score and rewardsReward skill, not just time. Watching a number go up feels good.
    • Save the high scoreA best score that is still there tomorrow is a reason to come back.
    WHY IT WORKS

    Too easy is boring and too hard is frustrating. Getting harder in waves keeps players between the two, and the calm moments let them notice they are improving.

    TRY THIS PROMPT

    Make the game harder in waves: every 30 seconds make the enemies a little faster, with a short calm break between waves. Show the score on screen and save the best score in the browser (localStorage) so it is still there after reloading the page.

    REFERENCES
    LIVE DEMO · DODGE IN WAVESARROWS / A D · DRAG · P

    WAVE 1

    Here each wave lasts only 10 seconds, so you can watch the curve during the talk. With waves off, the speed never changes. Turn on "save high score", set a best score, then reload the page: it is still there. Sound is on here too; use the SOUND switch to mute it.

    LEVEL 6 OF 86 MIN

    Fixing Bugs

    When you add all of this, something will break. Here is how to fix it.

    KEY TERMDebuggingFinding out why something is broken, then fixing it.
    THE METHOD

    The AI can only fix what it can see.

    • 1. Describe the bugSay what you did, what you expected, and what happened instead.
    • 2. Bring evidencePress F12, open the Console tab and copy any red error text. A screenshot helps too.
    • 3. Shrink the problemChange one thing at a time, and find the last version that worked.
    • 4. Know when to go backIf two or three fixes don't work, go back to your last working version and ask in a different way.
    WHY IT WORKS

    Asking the AI to explain the problem before it changes any code stops it from guessing and adding new bugs on top of the old one.

    REFERENCES
    BUG REPORT BUILDEREXAMPLE FILLED IN
    YOUR PROMPT

    FIX ATTEMPTS 0

    Count each fix the AI tries for this bug.

    LEVEL 7 OF 8 · 3 MIN

    Before & After

    Same game, same idea underneath. Flip the switch and everything from the earlier levels turns on at once.

    CASE STUDYSecond Form: Requiem
    ARROWS / A D · DRAG · P
    • Game screens: title, pause, game over and quick restart
    • Hit effects: shake, flash, particles and sound when you get hit
    • Music: a menu theme on the title screen and stage music while you play
    • Telegraphs: every block warns you before it falls
    • Waves: the speed ramps up, with calm moments between
    • Score on screen and a saved high score
    LEVEL 8 OF 8 · 6 MIN

    Questions & Prompts

    Ask anything about today's levels or about your own game. Every prompt from today is here, ready to copy.

    • 01 · START, PAUSE & GAME OVER

      Add a title screen that waits for Space or a tap, a pause menu on Esc that freezes everything, and a game over screen that shows the score and starts again with one button. Don't change how the game plays.

    • 02 · HIT EFFECTS

      When the player hits an enemy, add a tiny freeze, a small screen shake, a white flash on the enemy and a burst of sparks. Put the strength of each effect in one settings list so I can adjust them.

    • 03 · SOUND & MUSIC

      Add sound using the Web Audio API (the browser's built-in sound tools): different background music for the menu, the level and the boss, and short sound effects for jumping, collecting and getting hurt. Add separate volume sliders for music and effects, a mute button, and make the music quieter for a moment when the player gets hurt.

    • 04 · ENEMY ATTACKS & WARNINGS

      Give the enemy three modes: walk around, chase the player when they get close, then attack. Before each attack, add a half-second warning where it flashes and makes a sound, and after attacking, a short break where the player can hit it.

    • 05 · DIFFICULTY & HIGH SCORE

      Make the game harder in waves: every 30 seconds make the enemies a little faster, with a short calm break between waves. Show the score on screen and save the best score in the browser (localStorage) so it is still there after reloading the page.

    • 06 · FIXING BUGS

      Don't change any code yet. First, explain what is most likely causing this bug and how we can check. What I did: [...] What I expected: [...] What happened instead: [...] Console error: [...]

    • BONUS · TUNING

      Move every number that controls how the game feels (speeds, timings, effect strengths) into one settings list at the top of the file, with a short note on each, so I can adjust the game without digging through the code.

    SIDE QUEST

    Pick one level and add it to your game tonight. Then share your before and after.