HanuLab HanuLab
🗺️ Map🛡️ Warrior › 🎮 Web Game Dev

Lesson 1 — The Canvas and the Game Loop

⏱ 30–40 minutes 💻 Write HTML/CSS/JS with live preview in the browser 💡 A game is a still picture erased and redrawn 60 times a second (the game loop) on a canvas
💡 Play away! To save stars, ask a parent to log in
👨‍👩‍👧 Notes for parents

Level: Warrior — roughly Grade 8 / ages 13–14 Duration: 30–40 minutes Format: Write HTML/CSS/JS with live preview in the browser Concept: A game is a still picture erased and redrawn 60 times a second (the game loop) on a canvas

Learning Objective

Kids create a canvas and explain the erase-draw-move cycle, tweaking values to change how the object moves.

Do It Together (Parent-Child Co-participation)

Make a paper flip book: draw a dot moving a little on each page and flip fast — that is a game loop on paper.