Embedded Files
Lesson: Loops + Console Game in JavaScript
Lesson: Loops + Console Game in JavaScript
Grade level: HS (intro CS)
Time: ~50 minutes
Prereqs: Variables, comparison operators, basic if/else
Learning targets
I can use for, while, and do…while loops to repeat code.
I can use input (prompt) and output (console.log) to make a console game.
1) Mini-lesson (10–12 min)
1) Mini-lesson (10–12 min)
What is a loop?
What is a loop?
A loop repeats code until a condition is false (or for a set number of times).
// for loop: known number of repeats
for (let i = 1; i <= 5; i++) {
console.log("For count:", i);
}
// while loop: repeat while condition is true
let n = 3;
while (n > 0) {
console.log("While countdown:", n);
n--;
}
// do...while: runs AT LEAST once, then checks the condition
let input;
do {
input = prompt("Type YES to continue:");
} while (input !== "YES");
console.log("Thanks!");
Common pitfalls
Infinite loops: condition never becomes false.
Off-by-one errors: stop one too early/late.
Type coercion: "5" == 5 is true; prefer strict equality ===.
2) Guided practice (8–10 min)
2) Guided practice (8–10 min)
Students paste and run in the console:
// Count 10 to 1
for (let i = 10; i >= 1; i--) {
console.log(i);
}
// Sum 1..100 with a while loop
let total = 0, x = 1;
while (x <= 100) {
total += x;
x++;
}
console.log("Total =", total); // 5050
Ask:
Which loop was best when we knew how many times to repeat?
How would we stop early if a condition is met?
3) Project: Console Number Guessing Game (20–25 min)
3) Project: Console Number Guessing Game (20–25 min)
Goal: Build a simple game that picks a random number and gives the player limited attempts.
Students copy this starter into the console and then improve it.
// ===== Number Guessing Game (Console) =====
// Runs in the browser console. Uses prompt() for input.
// Try refreshing the page to play again.
const MAX = 100; // highest possible number
const MAX_TRIES = 7; // attempts allowed
const secret = Math.floor(Math.random() * MAX) + 1;
console.clear();
console.log("🎯 Number Guessing Game");
console.log(`I'm thinking of a number from 1 to ${MAX}.`);
console.log(`You have ${MAX_TRIES} tries. Good luck!\n`);
let tries = 0;
let won = false;
while (tries < MAX_TRIES && !won) {
const raw = prompt(`Attempt ${tries + 1} of ${MAX_TRIES}: Enter a number 1–${MAX}`);
if (raw === null) { // user pressed Cancel
console.log("Game cancelled. Bye!");
break;
}
// convert to number and validate
const guess = Number(raw);
if (!Number.isInteger(guess) || guess < 1 || guess > MAX) {
console.log("⚠️ Please enter a whole number in range.");
continue; // don't count invalid input as a try
}
tries++;
if (guess === secret) {
console.log(`✅ Correct! ${secret} in ${tries} tries. You win!`);
won = true;
} else if (guess < secret) {
console.log("📉 Too low. Try again.");
} else {
console.log("📈 Too high. Try again.");
}
}
if (!won && tries >= MAX_TRIES) {
console.log(`❌ Out of tries. The number was ${secret}.`);
}
console.log("\nThanks for playing!");
Extension challenges (choose 1–3)
Extension challenges (choose 1–3)
Hot/Cold hints: say “very close” if the difference ≤ 3.
Scorekeeping: award points based on remaining tries; track best score across plays.
Difficulty select: before the loop, ask for Easy (1–50/10 tries), Normal (1–100/7), Hard (1–200/8).
No repeats mode: store previous guesses in an array; warn if the player repeats a guess.
Hot/Cold sample snippet
const diff = Math.abs(guess - secret);
if (diff <= 3 && guess !== secret) console.log("🔥 Very close!");
4) Quick formative check (3–5 min)
4) Quick formative check (3–5 min)
Have students answer verbally or in the console comments:
When would you choose for vs while?
How did we prevent invalid inputs from wasting attempts?
Where could an infinite loop happen in this program?
8-25-25
Objective: Students will be able to learn the basics of how loops work using JavaScript.
TBA
Objective: Students will be able to practice writing JavaScript using the digital worksheet. All code segments must be commented properly. This may require additional research at w3schools.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block Coding Example
File Digital Worksheet for the lesson
https://www.jslint.com JS Debugger/Error Finder
https://developer.mozilla.org/en-US/docs/Web/JavaScript JS Resource
Page updated
Google Sites
Report abuse