📦 Variables
A variable is a name that holds a value, like a labeled box. The game can look inside the box, or put something new in it.
let score = 0; // a box named "score" holding 0 score = score + 10; // you got 10 points!
Your score, your lives, and how fast you move are all variables.
📍 Coordinates
The computer finds things on the screen with two numbers: x (how far from the left) and y (how far from the top). Surprise: in most games, a bigger y means lower on the screen!
player.x = 100; // 100 steps from the left player.y = 400; // 400 steps down from the top
💾 Versions
Every time your game changes, the new game is saved as a version, like save points in a video game. Version 1, Version 2, Version 3... If a change goes wrong, or you liked an older one better, you can go back. Nothing gets lost!
Version 1: a spaceship that shoots Version 2: + enemies shoot back Version 3: + a boss ship
Real programmers use tools like Git to save every version of their code. Whole teams use it to work on the same game without losing anyone's work.
🔁 The game loop
Games work like a flip book. About 60 times every second, the game moves everything a tiny bit, then draws a new picture. Your eyes blend the pictures into smooth movement.
function gameLoop() {
update(); // move everything a little
draw(); // paint the new picture
requestAnimationFrame(gameLoop); // do it again!
}
⌨️ Input
Input is how you talk to the game. The game "listens" for keys and clicks. When one happens, it runs some code.
window.addEventListener("keydown", (event) => {
if (event.code === "Space") shoot();
});
🔀 If/then
Games make decisions all the time. If something is true, then do this. Otherwise (else), do something else.
if (lives === 0) {
gameOver = true;
} else {
keepPlaying();
}
💥 Collision detection
How does the game know your laser hit the alien? Every frame, it measures the distance between them. If they're close enough, that's a hit!
if (distance(laser, alien) < 20) {
explode(alien);
}
🎲 Random numbers
Random numbers make each game a little different. Where does the next enemy appear? Roll the dice! Math.random() picks a surprise number between 0 and 1.
enemy.x = Math.random() * 800; // anywhere from 0 to 800
📋 Lists
A list (programmers say array) holds lots of things in order, like all the enemies on the screen. You can add to it, and take things out of it.
let enemies = []; // an empty list enemies.push(newEnemy); // add one to the end
🔄 Loops
A loop does the same thing to every item in a list. Instead of writing "move enemy 1, move enemy 2..." you write it once.
for (const enemy of enemies) {
enemy.y = enemy.y + enemy.speed; // move each enemy down
}
🧰 Functions
A function is a named set of steps you can use over and over. Write it once, then call it by name whenever you need it.
function explode(thing) {
makeSparks(thing);
playBoomSound();
}
explode(alien); // use it!
explode(rock); // use it again!
🦘 Velocity & gravity
Velocity is speed plus direction. Gravity changes your velocity a little every frame, pulling you back down. That's why jumps go up, slow down, and fall.
player.velocityY = player.velocityY + gravity; // gravity pulls player.y = player.y + player.velocityY; // then you move
🚦 Game states
A game is always in one state: the title screen, playing, paused, or game over. The state decides what the keys do and what gets drawn.
if (state === "title") drawTitleScreen(); if (state === "playing") updateGame(); if (state === "gameOver") drawGameOver();
🐛 Debugging
A bug is a mistake in the code. Debugging means finding and fixing it. Every programmer, even experts, writes bugs every day! The trick is describing exactly what happened.
Instead of "it's broken," try: "When I press Space while jumping, nothing shoots."
🧊 3-D
In 3-D there's a third number, z, for near and far. 3-D games also need a camera (where you're looking from) and lights (or everything looks black!).
ship.position.x = 10; // left and right ship.position.y = 2; // up and down ship.position.z = -50; // near and far