What happens when you run a game?
This little ghost is running inside a real game loop: input → update → draw, again and again. Move it around, then pause and step through one frame, one part at a time.
The game arrows / WASD to move
Paused
1 frame = 1/60 of a second = 16.7 ms
hold
The game loop frame 0
Input
read the controls
Update
CPU runs the rules
Draw
GPU paints it
↺ then again, from input
Running
RAM what the game remembers
held
-
x
0
y
0
facing
-
frame
0
The code
Pseudo-code (plain English)
The real JavaScript
This is the heart of the demo, a little simplified: the real thing (view the page source) also keeps the ghost inside the screen and lets you slow everything down.
Things to try
- Pause. Hold right (tap ▶), then press Step three times. RAM changes at update, but the screen only changes at draw: the picture is always one step behind the numbers.
- Set frames/sec to 2 and walk around. Now you can see every single frame. Turn it back up to 60: it's the same thing, just too fast to notice.
- Set frames/sec to 10. The ghost doesn't just get choppy, it gets slower. That's a real bug in this code! Episode 4 (delta time) fixes it.