A game redraws itself many times a second
A game loop is the code that runs again and again while a game is open. On every pass, called a frame, it works out what changed and draws a new picture.
Without a loop, a game would be a still image. With one, a box slides, a ball falls and a score counts up.
By the end of this lesson
Note
I can explain what a game loop does on every frame.
Key words
| Word | What it means |
|---|---|
| Frame | one picture of the game, shown for a moment |
| Game loop | code that repeats once for every frame |
| Update | the step that works out the new positions and scores |
| Draw | the step that paints the current state on the screen |
| Canvas | an area of a web page that code can paint on |
| Game state | everything the game remembers, such as score and lives |
The cells students fill in are left blank in this preview.
Every frame has two jobs: update, then draw
A frame has two steps. Update changes the game state. It moves the box, moves the stars and counts the score. Draw paints what the state says. It does not change anything.
Keeping the steps apart means the rules never depend on the picture. You can change how the game looks without touching how it plays.
Try it: a box slides across a canvas
<canvas id="stage" width="300" height="60"></canvas>The browser calls the loop for each frame
In a web page you do not write a loop that never ends. That would freeze the page, because the browser could never paint. Instead, the loop function asks the browser to call it again.
The call is requestAnimationFrame. It says: run this function before you paint the next picture. Most screens paint 60 times a second, and some paint more.
Read the loop in the lab game
docker exec jupyter python3 steps/loop.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The lab script lists the numbers and functions
The script reads game/game.js. It prints the nine named numbers at the top, such as GRAVITY = 0.15, PLAYER_SPEED = 6 and SPAWN_EVERY = 50. Then it says the code uses requestAnimationFrame.
Last it lists eight functions. Two are the steps of a frame, update and draw. A third, loop, calls both.
Find where the next frame is requested
docker exec jupyter grep -n "requestAnimationFrame" game/game.jsShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
One line keeps the whole game running
grep -n prints each line that holds the words, with its line number. Here it prints one line, number 112: window.requestAnimationFrame(loop);.
That single line is why the game keeps going. Each frame ends by asking for the next one.
Speed is a step per frame
Games often say a thing moves a number of pixels per frame. A pixel is one dot of the screen. If a box moves 6 pixels per frame, its position after any number of frames is easy to work out.
This is the first kind of game arithmetic, and the assignment below uses it.
Worked example: a box moving 6 pixels
| Frames passed | Sum | Position (x) |
|---|---|---|
| 0 | start 0 | 0 |
| 1 | 0 + 6 | 6 |
| 2 | 6 + 6 | 12 |
| 10 | 0 + 10 x 6 | 60 |
| 60 | 0 + 60 x 6 | 360 |
The cells students fill in are left blank in this preview.
A common mistake
Warning
Many people think a game loop is a while True loop. In a web page that freezes the tab, because the browser cannot paint until your code returns. Write one function that does one frame, and let requestAnimationFrame call it again.