Build Your First Game: Catch the Star
Everything so far — variables, sequence, loops, conditions, input — comes together into a real, playable game. Move, catch, score!
This is the moment it all clicks. You’re going to build a complete, playable game: a paddle you control with the arrow keys, a star that falls from the sky, and a score that goes up every time you catch it. It uses every idea from this level. Don’t worry — we’ll explain every single line.
The game loop
Real games don’t draw once — they redraw the screen about 60 times a second, each time moving things a little. That’s the game loop. We create it with requestAnimationFrame, which means "run my function again on the next frame". Each frame we do two things: update (move things, check rules) and draw (paint the new picture).
The plan (our algorithm)
set score = 0, place the star at the topEVERY frame:if Left/Right key is down → move the paddlemake the star fall a littleif the star reaches the paddle → score + 1, reset the stardraw background, paddle, star, scoreSee how the plan came first? Now we turn each line of the plan into code. Read every line — this is a real game.
const s = document.getElementById('game').getContext('2d');
The drawing pen.
let px = 360, pw = 100;
Paddle: px = its left position, pw = its width.
let starX = 200, starY = 0;
The star’s position. It starts at the top (y = 0).
let score = 0, speed = 4;
Score box, and how fast the star falls.
const keys = {};
A box to remember which keys are held down.
addEventListener('keydown', e => keys[e.key] = true);
When a key goes down, mark it true.
addEventListener('keyup', e => keys[e.key] = false);
When it’s released, mark it false.
function loop() {
This function is one frame of the game.
if (keys['ArrowLeft']) px -= 8;
UPDATE: if Left is held, move the paddle left.
if (keys['ArrowRight']) px += 8;
If Right is held, move it right.
if (px < 0) px = 0;
Don’t let the paddle leave the left edge.
if (px > 800 - pw) px = 800 - pw;
Or the right edge.
starY += speed;
Make the star fall by adding to its y each frame.
if (starY > 410 && starX > px && starX < px + pw) {
CATCH check: star is low enough AND within the paddle’s width.
score++; starY = 0;
Caught! Add a point and send the star back to the top…
starX = Math.random() * 760 + 20;
…at a new random x, so each one is different.
speed += 0.4;
Speed up a little — the game gets harder. Juice!
}
End of the catch decision.
if (starY > 450) { starY = 0; starX = Math.random() * 760 + 20; }
Missed it: reset the star (no point).
s.fillStyle = '#0e1326'; s.fillRect(0,0,800,450);
DRAW: paint the background first.
s.fillStyle = '#7c5cff'; s.fillRect(px, 420, pw, 16);
Draw the paddle (purple) at the bottom.
s.fillStyle = '#ffd34d'; s.beginPath(); s.arc(starX, starY, 12, 0, Math.PI*2); s.fill();
Draw the falling star (yellow circle).
s.fillStyle = '#fff'; s.font = 'bold 22px sans-serif'; s.fillText('Score: ' + score, 20, 34);
Draw the score text.
requestAnimationFrame(loop);
Ask the browser to run loop() again next frame — this is what makes it repeat ~60×/sec.
}
End of one frame.
loop();
Start the game by running the first frame.
That’s a real game: input (keys), update (movement + the catch condition), output (drawing), and a loop tying it together — exactly the four computer jobs from Lesson 1, running 60 times a second.
Click the game, then use ← and → arrow keys to move the paddle and catch the falling star. Each catch adds a point and speeds it up. Then tweak it: change speed, the paddle width pw, or the colours.
speed += 0.8 for a tougher challenge. Small tweaks, big difference — that’s game design.💪 Practice — 10 questions
Answer these to lock in the lesson. Every answer counts toward your progress.
requestAnimationFrame(loop) does what?starY += speed; makes the star…keys object?Math.random() is used to…if (px < 0) px = 0; stops the paddle from…speed after each catch makes the game…10 questions, auto-graded. Your score is saved to your dashboard and counts toward your phase certificate.
Key takeaways
- A game loop repeats ~60×/second, doing update (move + check rules) then draw.
- requestAnimationFrame(loop) is what schedules the next frame.
- Hold-to-move uses a keys object the loop reads every frame.
- Collisions/catches are conditions; falling is adding to y each frame.
- Small tweaks (speed, size, colour) are real game design — make it yours.
A real game runs a loop ~60 times a second: each frame it updates (move the paddle from held keys, fall the star, check the catch condition, keep the paddle on screen) and draws (background, paddle, star, score), then calls requestAnimationFrame(loop) to repeat. It combines everything from Level 1 — variables, sequence, loops, conditions and input — into something you can actually play, and tweak.