Sequences, Variables & Your First Scene
Code runs top to bottom, and “variables” let your program remember things. Time to write real code — every line explained.
You’ve planned with algorithms; now let’s write real code. Two ideas unlock almost everything: sequence (code runs top to bottom, one line at a time) and variables (labelled boxes that remember values). Master these two and you can already make pictures move.
Variables: labelled boxes
A variable is a named box that holds a value so you can use it later and change it. Imagine a box labelled score with the number 0 inside. Later you can look inside it, or put a bigger number in. In code we create one with the word let (meaning “let there be a box”):
Read each line with its explanation. Nothing here is magic — every symbol has a job.
let score = 0;
Make a box named score, put the number 0 in it. (let = create a box that can change.)
let playerName = "Aanya";
A box can also hold text. Text goes in quotes; we call text a "string".
score = score + 10;
Read what’s in score (0), add 10, and put the answer (10) back in the same box. Now score is 10.
console.log(score);
Print the value of score to the console so we can check it. (It shows 10.)
The trick on line 3 is read it right-to-left: first work out score + 10, then store the answer back into score. This “update a box” pattern is how scores, health, timers and positions all work.
let for a box whose value will change (like score or position). Use const for a box that should never change (like the screen). Don’t worry about memorising — you’ll feel it quickly.Putting it together: a scene from variables
Now the payoff. We’ll draw a hot-air balloon using variables for its position and size. Because the position is in variables, we can move the whole balloon by changing one number. Here is every line, explained:
const s = document.getElementById('game').getContext('2d');
Get the screen’s "drawing pen" (called a context). We store it in s so we can use it on every line.
let x = 400;
A box for the balloon’s left-right position (400 = middle of an 800-wide screen).
let y = 200;
A box for the balloon’s up-down position.
let size = 60;
A box for how big the balloon is.
s.fillStyle = '#0e1326';
Set the pen’s colour to dark blue…
s.fillRect(0, 0, 800, 450);
…and paint the whole screen (the sky). Always draw the background first.
s.fillStyle = '#ff5d8f';
Set the pen to pink for the balloon.
s.beginPath();
Start drawing a new shape.
s.arc(x, y, size, 0, Math.PI * 2);
Draw a circle at position (x, y) with radius size. Using the variables means the balloon follows them.
s.fill();
Fill the circle with the pink colour.
s.strokeStyle = '#7c5cff';
Set the pen colour for the basket’s ropes.
s.beginPath();
Start a new shape (the ropes).
s.moveTo(x - size + 10, y + size);
Move the pen to the bottom-left of the balloon.
s.lineTo(x, y + size + 40);
Draw a line down to where the basket will be.
s.lineTo(x + size - 10, y + size);
Draw a line back up to the bottom-right. Now we have two ropes.
s.stroke();
Actually paint those rope lines.
s.fillStyle = '#a06a3f';
Brown for the basket.
s.fillRect(x - 18, y + size + 40, 36, 26);
Draw the basket as a small rectangle under the ropes.
Run it to see the balloon. Now change x to 650 and run again — the whole balloon moves, because every shape used the x variable. Try changing size to 90, or the colours. This is the power of variables: change one box, change the picture.
x controls the balloon’s left-right position and every shape uses x, what happens when you change x from 400 to 650?💪 Practice — 10 questions
Answer these to lock in the lesson. Every answer counts toward your progress.
const for…score is 5 and you run score = score + 10;, score becomes…s.arc(x, y, size, …), what sets the circle’s position?x, you change…console.log(score) does what?10 questions, auto-graded. Your score is saved to your dashboard and counts toward your phase certificate.
Key takeaways
- Code runs in sequence — top to bottom, one line at a time.
- A variable is a named box that stores a value you can read and change.
- Use let for values that change, const for values that don’t.
- Drawing shapes from variables lets you move or resize everything by changing one number — the foundation of game movement.
Programs run top to bottom (sequence). Variables are named boxes that remember values; let makes a changeable box, const a fixed one. Updating a box (score = score + 10) powers scores, timers and positions. Drawing shapes using variables means one number can move or resize your whole picture — the first step toward animation and games.