START HEREHow games move
A game is a flip book. Sixty times a second it does two things: update - nudge everything a little - and draw - wipe the screen and paint everything where it now is. Your eye blends the pictures into motion.
That's the whole trick, and you already have every tool it needs: variables hold the positions (Primer 1), loops and lists handle many things at once (Primers 2 and 3), and functions are how the game asks you to update and draw (Primer 4).
This time the examples move. Run puts them on a live canvas. Click a canvas before using the keyboard on it.
The screen is 480 wide and 320 tall. You can draw with clear(), rect(x, y, width, height, color), circle(x, y, radius, color) and text("words", x, y, color, size).
CONCEPT 1Drawing, and which way is down
On a screen, (0, 0) is the top-left corner, and y counts down. That is the opposite of Block Hopper, where y counted up - and the opposite of maths class. Every screen works this way, so it's worth getting used to now.
Now change it: move the circle so it sits on the gray floor. What y does it need? (The floor starts at 280 and the circle's radius is 30.)
y = 50 is only 50 pixels from the top. The floor's y is 280 because it is near the bottom, a long way down.
CONCEPT 2Frames: update, then draw
If you write functions called update and draw, the page calls them for you, 60 times a second, forever. You never call them yourself - just like the arena called your functions in Monster Duel.
Now change it: show the number of whole seconds instead. There are 60 frames in a second.
Each frame, update adds one and draw paints the new number. It counts about 60 a second. (For whole seconds you need rounding: Math.floor(frame / 60).)
CONCEPT 3Motion is a changing number
To move something, store its position in a variable, change it a little in update, and draw it there in draw. The clear() at the start of draw wipes the last picture.
Now change it: delete clear(); and run it again. Then make it move left instead, and faster.
Without clear(), every old picture stays behind and you paint a smear. Nothing stops x at the edge - the circle just keeps going off the screen until you write code to stop it.
CONCEPT 4Objects: one name, many values
A ball has an x, a y, and a speed in each direction. An object keeps them together in curly braces, each with a name. Reach inside with a dot: ball.x. It's like a list where you name the slots instead of numbering them.
Now change it: make the ball go straight up. Then add a second object, ball2, with its own speed, and draw both.
dx is the change in x each frame, dy the change in y. A positive dy means down the screen. Three of you read a list of objects correctly on the Hand-Coding Check, so you have seen this shape before.
CONCEPT 5Bouncing is flipping a sign
To bounce off a wall, notice when the ball has reached it, and turn its speed the other way: ball.dx = -ball.dx. A minus sign in front flips 3 to -3, and -3 back to 3.
Now fix it: add a second if so it bounces off the top and bottom too. HEIGHT holds 320.
Only x is checked, so only the side walls bounce. Why 12 and WIDTH - 12? The ball's x is its centre, and it is 12 pixels wide on each side.
CONCEPT 6The keyboard
keys.left and keys.right are true while those arrow keys are held down. Check them in update, and move something while they're true. Click the canvas first so it hears the keys.
Now fix it: keep the paddle on screen. Only move left while paddle.x > 0, and only move right while paddle.x < WIDTH - paddle.w. Use &&.
Nothing tells the paddle where the edge is. The right-hand limit is WIDTH - paddle.w rather than WIDTH, because paddle.x is its left edge.
CONCEPT 7Collision: do two boxes overlap?
Two rectangles overlap when each one's left edge is before the other's right edge, and each one's top is above the other's bottom. Four comparisons joined with &&, wrapped in a yes-or-no function from Primer 4.
Now change it: make the box stop when it touches the wall instead of passing through.
Every game you have played checks this, thousands of times a second. The box doesn't stop by itself - overlap only answers the question. What to do about it is up to you.
CONCEPT 8Game state: ready, playing, over
Games behave differently at different moments: counting down, playing, game over. Keep the moment in one variable, often called state, and let ifs check it. When the game is over, update can simply return early so nothing moves.
Now change it: add a third state, "over", that the game switches to 3 seconds after GO, and draw GAME OVER for it.
180 frames is 3 seconds. Once state is "go", the countdown if is never true again, so the timer stops changing.