Loops & Conditions
Two ideas power almost every game: repeating things (loops) and making choices (conditions). Let’s master both.
Imagine drawing 100 stars by writing 100 lines of code. Exhausting — and silly. Programmers are happily lazy: when something repeats, we use a loop. And when a game needs to decide something ("did the player win?"), we use a condition. These two ideas are the engine room of every game.
Loops — do it again (and again)
A for loop repeats a block of code a set number of times. You tell it where to start, when to stop, and how to count. Here’s a loop that draws 5 stars in a row — read every line:
const s = document.getElementById('game').getContext('2d');
Get the drawing pen.
s.fillStyle = '#0e1326'; s.fillRect(0,0,800,450);
Paint the background first.
s.fillStyle = "#ffd34d";
Set the star colour to yellow.
for (let i = 0; i < 5; i++) {
Start a loop: i begins at 0, keeps going while i < 5, and i++ adds 1 each time → runs 5 times (i = 0,1,2,3,4).
let x = 100 + i * 140;
Work out this star’s x position from i, so each one sits further right.
s.beginPath();
Start a new circle shape.
s.arc(x, 225, 30, 0, Math.PI * 2);
Draw the star (circle) at (x, 225).
s.fill();
Fill it yellow.
}
End of the loop body. The computer jumps back up and repeats until i reaches 5.
The magic is i: it changes every time the loop runs (0, 1, 2, 3, 4), so each star lands in a different place. One short loop, five stars.
Run it. Now change i < 5 to i < 8 for more stars, or change 140 to space them differently.
Conditions — making choices
A condition uses if to run code only when something is true — exactly the diamond decision from our flowcharts. Add an else for "otherwise". Watch how we colour stars differently depending on whether i is even or odd:
for (let i = 0; i < 8; i++) {
Loop 8 times.
if (i % 2 === 0) {
i % 2 is the remainder after dividing by 2. If it’s 0, i is even. (=== means "is equal to".)
s.fillStyle = '#ffd34d';
Even → yellow.
} else {
Otherwise (odd)…
s.fillStyle = '#ff5d8f';
Odd → pink.
}
End of the decision.
s.fillRect(i * 100, 200, 80, 80);
Draw the square in the chosen colour.
}
Repeat for all 8 squares — alternating colours appear!
Run it to see the alternating squares. Try changing the two colours, or the rule i % 2 === 0 to i % 3 === 0.
for (let i = 0; i < 5; i++) run?💪 Practice — 10 questions
Answer these to lock in the lesson. Every answer counts toward your progress.
if) is used to…for (let i = 0; i < 4; i++) run?i++ do?i % 2 gives…i % 2 === 0 is true, then i is…=== means…else runs when…10 questions, auto-graded. Your score is saved to your dashboard and counts toward your phase certificate.
Key takeaways
- A loop repeats code; a for loop repeats a set number of times (start, stop, step).
- The loop counter (i) changes each pass — use it to vary position, colour, etc.
- A condition (if/else) runs code only when a test is true — the flowchart diamond.
- % gives a remainder; i % 2 === 0 tests for even numbers.
- Loops + conditions together are the core of all game logic.
Loops repeat code (for loops run a set number of times using a counter i that changes each pass). Conditions (if/else) run code only when a test is true — the decision diamond from flowcharts. The remainder operator % powers patterns like even/odd. Together, "repeat every frame" (loop) and "if this then that" (condition) are the logic behind every game.