Phase 2 · Lesson 1

Variables — storing data

The program's memory. Without variables we can't store the score, the number of lives, the frog's position — nothing at all. This is the foundation of everything.

⏱ 60 min

📁 JavaScript

🎯 let · const · types

1What is a variable?

A variable is a named slot in the machine's memory that we put data into and can retrieve or replace at any time. Every piece of game data lives in a variable.

The three keywords

let — a variable whose value can change (e.g. lives count going down)
const — a constant whose value cannot change (e.g. level width)
var — old style, avoid — not used in modern code

3 examples from our games

🏰 Castle Siege

The game speed, which the buttons can change:

castle_siege.html

// let — because the player changes it
let DT = 0.6;
// 0.3 = Child, 0.6 = Slow
// 1.0 = Normal, 1.5 = Fast

// const — the level never exceeds 50
const MAX_LEVEL = 50;

🐸 Froggy Rush

The frog's position and life counter:

froggy_rush.html

// let — the frog moves, position changes
let frogCol = 5.5;
let lives   = 3;

// const — grid size never changes
const COLS = 12;
const CELL = W / COLS; // 45px

🐢 Turtle Race

Energy and the turtle's position:

turtle_race.html

// let — energy can drain and recharge
let energy = 100;
let score  = 0;

// const — level length is fixed
const LEVEL_DIST = 600;

2Data types

A variable can hold more than just numbers. JavaScript has 6 basic types:

Type	Example	Used for	In the game
number	`42` `3.14` `-5`	Counting, position, score	Lives, energy, coordinates
string	`"Alex"` `'Frog'`	Storing text	Player name, labels
boolean	`true` `false`	Yes/no decisions	Jumping? Shield? Alive?
array	`[1, 2, 3]`	Storing a list	Enemies, eggs, towers
object	`{x:10, y:20}`	Complex data	Frog, turtle, castle
null / undefined	`null`	No value / doesn't exist	No tower on a tower slot

types.js — all 6 typesJavaScript

let score   = 1500;          // number
let name    = "Alex";         // string
let jumping = false;          // boolean
let enemies = ["goblin", "orc"]; // array
let frog    = { x: 5, y: 0 }; // object
let tower   = null;           // null (no tower yet)

// typeof shows the type
console.log(typeof score);   // "number"
console.log(typeof name);    // "string"
console.log(typeof jumping); // "boolean"

Tip — F12 console

Press F12 in the browser → Console tab → type JS code and see the result instantly. Try: typeof 42 then press Enter!

✏️ Lesson 1 Task

Open the browser console (F12 → Console) and try these:

Create a let lives = 3 variable, then print it to the console
Change it: lives = lives - 1 — what's its value now?
Try to overwrite a const — what error message does the console show?
Create an object for your own turtle character with x, y, lives, energy properties

🧠 Which declaration is correct when the value changes multiple times?

const lives = 3;

let lives = 3;

var lives = 3; (works, but avoid)

int lives = 3; (C/Java syntax — doesn't exist in JS)

Phase 2 · Lesson 2

Conditions — the program decides

Without if-else there is no game. Every collision, every life loss, every victory is built on conditional logic.

⏱ 60 min

🎯 if · else · switch

🎮 Collision detection

1The if-else structure

conditions_basic.jsJavaScript

// Basic structure
if (condition) {
  // runs if TRUE
} else if (anotherCondition) {
  // runs if first is false but this is true
} else {
  // runs if none of the above were true
}

3 examples from our games

🏰 Castle Siege

Checking castle HP — is the game over?

castle_siege.html

if (G.castle.hp <= 0) {
  G.phase = 'gameover';
  return;
}

// HP bar colour based on percentage
if (pct > 0.6) {
  color = '#3a8a3a'; // green
} else if (pct > 0.3) {
  color = '#9a8a20'; // yellow
} else {
  color = '#8a2020'; // red
}

🐸 Froggy Rush

The frog dies — what type of death?

froggy_rush.html

if (ZONE.road.includes(f.row)) {
  // on road → was it hit by a car?
  dieFrog('squish');
}

if (ZONE.river.includes(f.row)) {
  // on water → is there a log below?
  if (!onLog) {
    dieFrog('splash');
  }
}

🐢 Turtle Race

Energy drain based on surface type:

turtle_race.html

if (surface === 'mud') {
  energy -= 0.22; // drains fast in mud
} else if (surface === 'road') {
  energy += 0.07; // recharges on road
} else {
  energy -= 0.05; // slow drain otherwise
}

if (energy <= 0) {
  loseLife(player);
}

Comparison operators

Operator	Meaning	Example	Result
`===`	Equal (type too!)	`3 === 3`	true
`!==`	Not equal	`3 !== 5`	true
`>`	Greater than	`hp > 0`	true if alive
`<=`	Less than or equal	`lives <= 0`	true if dead
`&&`	AND — both must be true	`alive && hasEnergy`	can play
`\|\|`	OR — at least one true	`won \|\| timesUp`	game over
`!`	NOT — inverts	`!jumping`	not jumping

== vs === — always use triple equals!

== 3 only checks value: "3" == 3 → true (wrong!)
=== 3 also checks type: "3" === 3 → false (correct!)

✏️ Lesson 2 Task

Write conditions in the console or an HTML file:

Create let lives = 3, then use if to check: if 0, print "Game Over"
Write an if-else if-else chain: 3 lives = "Full health", 1–2 = "Watch out!", 0 = "Game Over"
Create let isJumping = false and let onRock = true — use if to check: if not jumping AND on a rock → "Died!"

🧠 What is the result of `if ("3" === 3)`?

true — because both are 3

false — because the string "3" and the number 3 are different types

Throws an error

undefined

Phase 2 · Lesson 3

Loops — repetition

Every enemy, every egg, every tower must be checked every single frame. Without loops this would be impossible.

⏱ 60 min

🎯 for · while · forEach

🎮 Mass collision detection

1The three main loops

loops.js — the three basic typesJavaScript

// 1. for loop — when we know how many times to run
for (let i = 0; i < 5; i++) {
  console.log("Wave: " + i);
} // 0, 1, 2, 3, 4

// 2. while loop — while a condition is true
let lives = 3;
while (lives > 0) {
  console.log("Still alive: " + lives);
  lives--;
}

// 3. forEach — for iterating arrays
const enemies = ["goblin", "orc", "troll"];
enemies.forEach(enemy => {
  console.log("Enemy: " + enemy);
});

3 examples from our games

🏰 Castle Siege

Every tower finds the closest enemy:

castle_siege.html

// forEach: runs for every tower
G.towers.forEach(tower => {
  let best = null;
  let bestDist = ts.range;

  // nested forEach: check enemies
  G.enemies.forEach(enemy => {
    const d = dist(tower, enemy);
    if (d < bestDist) {
      bestDist = d;
      best = enemy;
    }
  });
});

🐸 Froggy Rush

Moving all objects every frame:

froggy_rush.html

// Check collision of all objects
// (eggs, rocks, seagulls) with the frog
G.objects.forEach(obj => {
  if (obj.done) return; // skip
  const dist = Math.hypot(
    frog.x - obj.x,
    frogY  - obj.y
  );
  if (dist < obj.r + 13) {
    collect(obj);
  }
});

🐢 Turtle Race

Drawing surface segments of the track:

turtle_race.html

// for loop — exactly 5 segments
for (let i = 0; i < segs.length; i++) {
  const surf = SURFACES[segs[i]];
  const topY = -((i+1) * segH) + scrollY;
  const botY = -(i * segH) + scrollY;
  ctx.fillStyle = surf.col;
  ctx.fillRect(TL, topY, TW, botY-topY);
}

Which loop when?

for — when you know exactly how many times to run (e.g. 5 segments, 50 levels)
while — when it depends on a condition when to stop (e.g. while there are enemies)
forEach — when you need to iterate an array (the most common in games!)

✏️ Lesson 3 Task

Write loops in the console:

Use a for loop to print numbers 1 to 10
Create an array of 5 enemy names, use forEach to print each one
Use a while loop to simulate a game: start with 3 lives, subtract 1 each round, print when it reaches 0
Find the line in Castle Siege where G.enemies.forEach appears (Ctrl+F)

🧠 Which loop is most common in our games for iterating arrays?

while

for

forEach

do...while

Phase 2 · Lesson 4

Functions — reusable code

If we do something more than once, we put it in a function. Castle Siege has 40+ functions — each one performs one well-defined task.

⏱ 75 min

🎯 function · parameter · return

🎮 drawTurtle · dieFrog · buildTower

1Function basics

functions.js — the basic structureJavaScript

// Simple function — no parameter, no return value
function startGame() {
  lives = 3;
  score = 0;
  phase = 'play';
}

// Function with a parameter
function addScore(amount) {
  score += amount;       // amount = what we received as parameter
}
addScore(10);           // called with 10
addScore(50);           // called with 50

// With a return value
function dist(ax, ay, bx, by) {
  return Math.hypot(bx-ax, by-ay);
}
const d = dist(0, 0, 3, 4); // d = 5

3 examples from our games

🏰 Castle Siege

addFloat() — displaying floating text:

castle_siege.html

// Parameters: where, what, what colour
function addFloat(x, y, txt, col) {
  G.floats.push({
    x, y, txt, col,
    life: 95,
    vy: -0.65
  });
}

// Calling — same way everywhere:
addFloat(enemy.x, enemy.y, '+10g', '#FFD700');
addFloat(p.x, p.y-25, '-1 ❤️', '#f44');

🐸 Froggy Rush

dieFrog() — handling death by type:

froggy_rush.html

function dieFrog(type) {
  // Already dead — don't run twice
  if (G.frog.dead) return;

  G.frog.dead = true;
  G.frog.deathType = type; // 'squish' or 'splash'
  G.lives--;
  G.phase = 'dead';
  G.phTimer = 80;
  updateUI();
}

// Two calls — different parameters:
dieFrog('squish'); // hit by a car
dieFrog('splash'); // fell in water

🐢 Turtle Race

getSurface() — returns the current surface:

turtle_race.html

// Function with a return value
function getSurface(dist, level) {
  const lv   = LEVELS[level - 1];
  const segH = LEVEL_DIST / lv.segs.length;
  const idx  = Math.min(
    Math.floor(dist / segH),
    lv.segs.length - 1
  );
  return lv.segs[idx]; // e.g. 'mud'
}

// Usage:
const surf = getSurface(250, 2);
// surf === 'mud' → slows down, drains energy

Arrow function — short form

In modern JS we can also write functions using arrow syntax. Same result, just shorter:

arrow_function.jsJavaScript

// Traditional form
function dist(ax, ay, bx, by) {
  return Math.hypot(bx-ax, by-ay);
}

// Arrow function — same thing, shorter
const dist = (ax, ay, bx, by) => Math.hypot(bx-ax, by-ay);

// You'll see this inside forEach in Castle Siege:
G.enemies.forEach(e => {       // e = one enemy
  const d = dist(tower.x, tower.y, e.x, e.y);
});

✏️ Lesson 4 Task

Write your own functions:

Write a loseLife() function that reduces lives and prints "Game Over" when it hits zero
Write an addScore(amount) function that adds points and prints the new total
Write a dist(x1,y1,x2,y2) function that returns the distance between two points (Math.hypot)
Find the function drawFrog line in Froggy Rush — how many parameters does it have?

🧠 What's the difference between a parameter and an argument?

Nothing — they mean the same thing

A parameter is in the function definition (e.g. amount); an argument is the value passed when calling it (e.g. 10)

Parameters are always numbers; arguments can be anything

Only functions with return values have arguments

Phase 2 · Lesson 5

Arrays — managing lists

A game can have 20 enemies, 30 eggs and 6 towers active at once. They all live in arrays — and every frame we iterate through all of them.

⏱ 75 min

🎯 push · filter · map · find

🎮 Enemies · Eggs · Towers

1Array basics

array_basics.jsJavaScript

// Creating arrays
let enemies = [];          // empty array
let levels  = [1, 2, 3];  // with numbers
let names   = ["Goblin", "Orc", "Troll"];

// Indexing — starts at 0!
names[0] // "Goblin"
names[2] // "Troll"
names.length // 3

// Adding — push()
enemies.push({ x: 100, y: 200, hp: 50 });

// Removing — splice()
enemies.splice(0, 1); // removes element at index 0

The most important array methods

Method	What it does	Used in game for
`push(elem)`	Adds to the end	Spawning a new enemy or projectile
`filter(fn)`	Keeps only elements where fn returns true	Removing dead enemies
`forEach(fn)`	Runs a function on each element	Moving every enemy
`find(fn)`	Returns the first matching element	Finding the closest enemy
`map(fn)`	Transforms every element	Converting coordinates
`some(fn)`	True if at least one matches	Is there still a living enemy?
`every(fn)`	True if all match	Are all home pads filled?

3 examples from our games

🏰 Castle Siege

Removing dead projectiles with filter:

castle_siege.html

// filter: only the living ones remain
G.hProj = G.hProj.filter(p => {
  p.x += p.vx * DT;
  p.y += p.vy * DT;
  p.life -= DT;
  // if life <= 0 or off screen → remove
  return p.life > 0 && p.x > 0 && p.x < W;
});

🐸 Froggy Rush

Checking if all home pads are filled:

froggy_rush.html

// every: true only if ALL are filled
if (G.homes.every(h => h.filled)) {
  G.phase = 'levelup';
  G.score += 500 * G.level;
}

💡 Custom example

Sorting and trimming a Top 10 list:

leaderboard.js

let topList = [
  { name: "Alex", score: 1500 },
  { name: "Sam",  score: 2200 },
  { name: "Tom",  score: 800  },
];

// Sort by score — descending
topList.sort((a, b) => b.score - a.score);

// Keep only the top 10
topList = topList.slice(0, 10);

// Print: "1. Sam: 2200 pts"
topList.forEach((t, i) => {
  console.log(`${i+1}. ${t.name}: ${t.score}`);
});

✏️ Lesson 5 Task

Arrays in the console:

Create an empty enemies array, use push to add 3 objects (with name, hp properties)
Use forEach to print every enemy's name and HP
Use filter to remove those whose HP dropped to 0 or below (hp <= 0)
Use find to locate the first enemy with hp < 50
Use sort to arrange them by HP in descending order

🧠 What does the filter() method do?

Finds the first matching element

Modifies the elements of the original array

Returns a new array containing only the elements for which the condition is true

Sorts the array

Phase 2 · Lesson 6

Objects — complex data

A turtle is not just one number — it has an x position, y position, energy level, name, speed. All of this lives together in a single object.

⏱ 75 min

🎯 Objects · Properties · Nesting

🎮 G state · makeTurtle

1Object basics

objects.jsJavaScript

// Creating an object — curly braces
const frog = {
  col:    5.5,         // horizontal position
  row:    0,           // row (on grid)
  lives:  3,           // lives
  dead:   false,       // is it alive?
  riding: null         // which log it's standing on
};

// Reading — dot operator
console.log(frog.lives);  // 3
console.log(frog.dead);   // false

// Writing — same way
frog.lives = 2;
frog.dead  = true;

3 examples from our games

🏰 Castle Siege

G — the entire game state in one object:

castle_siege.html

let G; // the entire game state

function initLevel() {
  G = {
    hero:    { x: 155, y: 300, hp: 100 },
    castle:  { hp: 200, maxHp: 200 },
    enemies: [],   // array inside object!
    towers:  [],
    gold:    0,
    wave:    0,
    phase:   'play'
  };
}
// Access: G.castle.hp, G.hero.x, etc.

🐢 Turtle Race

makeTurtle() — a function that creates objects:

turtle_race.html

function makeTurtle(x, isAI) {
  return {
    x,            // shorthand: x: x
    vx:     0,
    lives:  3,
    energy: 100,
    jumping: false,
    inShell: false,
    isAI,         // shorthand: isAI: isAI
    eggs:   0
  };
}

// Two turtles with the same structure:
const player = makeTurtle(W/2-22, false);
const ai     = makeTurtle(W/2+22, true);

💡 Custom example

Nested objects — player profile:

profile.js

const profile = {
  name:  "Alex",
  score: 4500,
  hero: {                  // nested object
    spd:   2,
    dmg:   3,
    level: 15
  },
  games: ["castle", "froggy"] // array inside
};

// Chained access:
profile.hero.spd   // 2
profile.games[0]  // "castle"

✏️ Lesson 6 Task

Designing objects:

Create a player object with name, lives, energy, x, y, score properties
Add a nested hero object with speed, damage, level fields
Write a makeEnemy(type) function that returns an enemy object (hp, speed, gold, name based on type)
Call it 3 times with different types and put the results in an array

🧠 How do we access a property of a nested object?

player[hero][speed]

player.hero.speed

player->hero->speed

player::hero::speed

Phase 2 · Lesson 7

Events — keyboard

Player presses the arrow → the frog jumps. This is event handling. Without it the game just stares back — it doesn't react to anything.

⏱ 60 min

🎯 addEventListener · keydown · keyup

🎮 WASD and arrow controls

1The addEventListener

keyboard.js — the basic structureJavaScript

// Adding an event listener
document.addEventListener('keydown', (e) => {
  console.log(e.key); // prints which key was pressed
});

// When a key is released
document.addEventListener('keyup', (e) => {
  console.log("Released: " + e.key);
});

3 examples from our games

🏰 Castle Siege

K object — tracks which keys are held:

castle_siege.html

const K = {}; // held keys

document.addEventListener('keydown', e => {
  K[e.key.toLowerCase()] = true;
  if (e.key === 'e') doInteract();
});
document.addEventListener('keyup', e => {
  K[e.key.toLowerCase()] = false;
});

// Checked continuously in the game loop:
if (K['a'] || K['arrowleft']) hero.vx -= speed;

🐸 Froggy Rush

Moving the frog with arrow keys:

froggy_rush.html

document.addEventListener('keydown', e => {
  const k = e.key;
  if (k === 'ArrowUp'   || k === 'w') {
    dpad(0, 1);  // up
  } else if (k === 'ArrowLeft' || k === 'a') {
    dpad(-1, 0); // left
  }
  // Space / Enter: restart
  if (k === ' ' || k === 'Enter') {
    e.preventDefault();
    startGame();
  }
});

🐢 Turtle Race

Jump and shield key handling:

turtle_race.html

document.addEventListener('keydown', e => {
  if (e.key === 'ArrowUp') {
    K.up = true;      // jump
    e.preventDefault();// prevent page scroll
  } if (e.key === 'ArrowDown') {
    K.down = true;    // shell
  }
});
document.addEventListener('keyup', e => {
  if (e.key === 'ArrowUp')   K.up   = false;
  if (e.key === 'ArrowDown') K.down = false;
});

✏️ Lesson 7 Task

Keyboard handling in your own HTML file:

Create an HTML file with a canvas, and listen for keydown with addEventListener
Press different keys and print the e.key value — what do you get for ArrowLeft?
Create a K = {} object and implement the keydown/keyup pair
Draw a small square on the canvas and move it with arrow keys based on the K object

🧠 What is the e.key value when the left arrow is pressed?

"left"

"LeftArrow"

"ArrowLeft"

Phase 2 · Lesson 8

Mouse and touch handling

In Castle Siege we click on tower placement spots; in Galactic Conquest we click on hex cells. On mobile we steer by touch. Both are event handling.

⏱ 60 min

🎯 click · touchstart · getBoundingClientRect

🎮 Canvas click · D-pad

1Mouse click on a canvas

mouse_canvas.js — coordinate calculationJavaScript

// The canvas isn't always 1:1 on screen
// getBoundingClientRect() gives its real position
canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();

  // Click position inside the canvas:
  const mx = (e.clientX - rect.left) * (W / rect.width);
  const my = (e.clientY - rect.top)  * (H / rect.height);

  console.log(`Clicked: ${mx}, ${my}`);
});

3 examples from our games

🏰 Castle Siege

Galactic Conquest — hex cell click:

galactic_conquest.html

CV.addEventListener('click', e => {
  const rect = CV.getBoundingClientRect();
  const mx = (e.clientX - rect.left) * (W/rect.width);
  const my = (e.clientY - rect.top)  * (H/rect.height);

  // Find the closest hex
  let best = null, bestD = HEX_SIZE * 1.1;
  G.hexes.forEach(h => {
    const {x,y} = hexCenter(h.col, h.row);
    const d = Math.hypot(mx-x, my-y);
    if (d < bestD) { bestD = d; best = h; }
  });
  if (best) selectHex(best.col, best.row);
});

🐸 Froggy Rush

Swipe touch handling on the canvas:

froggy_rush.html

let touchStart = null;

CV.addEventListener('touchstart', e => {
  touchStart = {
    x: e.touches[0].clientX,
    y: e.touches[0].clientY
  };
}, { passive: false });

CV.addEventListener('touchend', e => {
  const dx = e.changedTouches[0].clientX - touchStart.x;
  const dy = e.changedTouches[0].clientY - touchStart.y;
  if (Math.abs(dx) > Math.abs(dy))
    dpad(dx > 0 ? 1 : -1, 0); // horizontal
  else
    dpad(0, dy < 0 ? 1 : -1); // vertical
});

🐢 Turtle Race

D-pad buttons — touch controls:

turtle_race.html (HTML + JS)

<!-- HTML: touch button -->
<div class="dp"
  ontouchstart="K.left=true"
  ontouchend="K.left=false">⬅️</div>

// JS: the turtle moves based on K object
if (K.left)  turtle.vx -= accel;
if (K.right) turtle.vx += accel;

✏️ Lesson 8 Task

Click and touch handling:

Add a canvas click event to your HTML file — print the click coordinates
Draw a circle on the canvas wherever you clicked
Add 4 HTML buttons (⬆️⬅️🐢➡️) with ontouchstart/ontouchend attributes
Test on mobile or in Chrome DevTools mobile view (F12 → phone icon)

🧠 Why do we need getBoundingClientRect() for canvas clicks?

Because the canvas doesn't detect clicks by default

Because the canvas doesn't always start at (0,0) on the page — rect gives us its actual position

Because touch works differently on mobile

Only necessary in IE11

Phase 2 · Lesson 9

Math and randomness

Every egg appears in a random location. The enemy performs a sinusoidal motion. The shot follows a parabola. All of this is done with the Math object.

⏱ 60 min

🎯 Math.random · Math.floor · Math.sin

🎮 Spawn · Animation · Parabola arc

1The most important Math methods

Method	Returns	Used in game for
`Math.random()`	Random number between 0 and 1	Egg position, enemy delay
`Math.floor(x)`	Rounds down (integer)	Random number to integer
`Math.ceil(x)`	Rounds up	Ensuring a minimum value
`Math.round(x)`	Rounds to nearest integer	Displaying HP as whole number
`Math.min(a, b)`	The smaller value	Capping energy at 100
`Math.max(a, b)`	The larger value	Preventing HP from going below 0
`Math.abs(x)`	Absolute value (no sign)	Distance checks
`Math.hypot(dx, dy)`	Euclidean distance	Collision detection
`Math.sin(x)`	Sine (between -1 and 1)	Wave motion, jump arc, breathing
`Math.PI`	π = 3.14159...	Circles, angles

3 examples from our games

🏰 Castle Siege

Random enemy position on spawn:

castle_siege.html

// Random y position within the level height
const y = UIH + et.r + Math.random() * (GH - et.r * 2);

// Energy recharge — Math.min ensures
// it doesn't exceed 100
p.energy = Math.min(100, p.energy + 40);

// HP can't go below 0:
G.castle.hp = Math.max(0, G.castle.hp - dmg);

🐸 Froggy Rush

Frog jump arc — using Math.sin():

froggy_rush.html

// jumpT goes from 0 to 22
// Math.sin() traces a 0→1→0 parabola
p.jumpH = Math.sin(p.jumpT / 22 * Math.PI) * 38;
// jumpH: 0 → 38px (peak) → 0 back down

// If timer is up — landed
if (p.jumpT >= 22) {
  p.jumping = false;
  p.jumpH   = 0;
}

🐢 Turtle Race

Walking animation and log bobbing:

turtle_race.html

// frame increments continuously (0, 1, 2, 3...)
// sin(frame * 0.2) → oscillates between -1 and 1
// This produces the walking animation
const walk = Math.sin(frame * 0.2) * 2;

// The turtle's legs step in opposite phase:
ctx.ellipse(-10, 12 + walk, 7, 4, ...);
ctx.ellipse( 10, 12 - walk, 7, 4, ...);

The random number recipe

Between 0 and N: Math.floor(Math.random() * N)
Between MIN and MAX: MIN + Math.floor(Math.random() * (MAX - MIN))
e.g. 1–6 (dice): 1 + Math.floor(Math.random() * 6)

✏️ Lesson 9 Task

Math operations in the console:

Generate a random number between 1 and 100 — run it 5 times
Write a clamp(val, min, max) function that limits using Math.min and Math.max
Print the Math.sin() value from frame=0 to frame=62 (one full circle) — what pattern do you see?
Calculate the distance between (0,0) and (100, 150) using Math.hypot

🧠 How do we generate a random integer between 1 and 6 (dice roll)?

Math.random() * 6

Math.floor(Math.random() * 6)

1 + Math.floor(Math.random() * 6)

Math.random(1, 6)

Phase 2 · Lesson 10

🏆 Phase Project — Mini Quiz Game

A summary of all JavaScript basics in one small independent project. Variables, conditions, loops, functions, objects, events — all at once.

⏱ 2–3 hours

🎯 Independent work

📁 Single HTML file

1The project task

Build a browser quiz game using pure HTML + JavaScript (no Canvas — using the DOM). The game must be able to:

Minimum requirements

✓ At least 5 questions (stored in an array as objects)
✓ 4 answer options for each question
✓ Correct answer highlighted in green, wrong ones in red
✓ Score counting and display
✓ "Next question" button
✓ Final results screen with score

quiz.html — suggested data structureJavaScript

// Questions in an array, as objects
const questions = [
  {
    q:       "Which keyword creates a variable that cannot change?",
    options: ["var", "let", "const", "int"],
    answer:  2  // const (index)
  },
  {
    q:       "What does the filter() method do?",
    options: ["Sorts", "Filters", "Sums", "Searches"],
    answer:  1
  },
  // ... 3 more questions ...
];

// Game state
let currentQ = 0;
let score    = 0;

// Show a question
function showQuestion() {
  const q = questions[currentQ];
  document.getElementById('question').textContent = q.q;
  q.options.forEach((opt, i) => {
    document.getElementById('opt' + i).textContent = opt;
  });
}

// Check an answer
function checkAnswer(selectedIndex) {
  const correct = questions[currentQ].answer;
  if (selectedIndex === correct) {
    score++;
    // green highlight...
  }
  currentQ++;
  if (currentQ >= questions.length) {
    showResult();
  } else {
    showQuestion();
  }
}

✏️ Project Checklist

The finished project must include:

let and const used correctly (score = let, questions = const)
Questions stored as objects inside an array
Answer options displayed using forEach
if-else used to determine correct/wrong answers
Functions: showQuestion(), checkAnswer(), showResult()
Event listeners: clicking on answer buttons
Math.round() used to display final score as a percentage
CSS for a stylish appearance (at least dark background + coloured buttons)

Bonus challenges

⭐ Shuffle question order (Math.random() based shuffle)
⭐⭐ Time limit per question (setTimeout, countdown)
⭐⭐⭐ Save the best result in localStorage and reload it

← Previous phase

Phase 1 — HTML & CSS

Next phase →

Phase 3 — Canvas & Animation

Variables — storing data

1What is a variable?

3 examples from our games

2Data types

🧠 Which declaration is correct when the value changes multiple times?

Conditions — the program decides

1The if-else structure

3 examples from our games

Comparison operators

🧠 What is the result of if ("3" === 3)?

Loops — repetition

1The three main loops

3 examples from our games

🧠 Which loop is most common in our games for iterating arrays?

Functions — reusable code

1Function basics

3 examples from our games

🧠 What's the difference between a parameter and an argument?

Arrays — managing lists

1Array basics

The most important array methods

3 examples from our games

🧠 What does the filter() method do?

Objects — complex data

1Object basics

3 examples from our games

🧠 How do we access a property of a nested object?

Events — keyboard

1The addEventListener

3 examples from our games

🧠 What is the e.key value when the left arrow is pressed?

Mouse and touch handling

1Mouse click on a canvas

3 examples from our games

🧠 Why do we need getBoundingClientRect() for canvas clicks?

Math and randomness

1The most important Math methods

3 examples from our games

🧠 How do we generate a random integer between 1 and 6 (dice roll)?

🏆 Phase Project — Mini Quiz Game

1The project task

🧠 What is the result of `if ("3" === 3)`?