🎮

Game Design for Kids

intermediate · 9 lessons

Design and build playable games — mechanics, levels, sprites, and sound.

Try in Applaa Builder — Free

9 lessons

  1. 1

    The Game Loop — The Heartbeat of Every Game

    Every game runs a game loop: clear the screen → update positions → draw everything → repeat. In JavaScript we use requestAnimationFrame() to call our loop ~60 times per second. This makes animations smooth and responsive.

    3 min10 XPQuiz
  2. 2

    Player Movement — Keyboard Controls

    Track which keys are currently held down using keydown and keyup events. Store them in an object. Every game loop frame, check the object and move the player. This gives smooth, responsive movement.

    3 min10 XPQuiz
  3. 3

    Collision Detection — When Things Touch

    Axis-Aligned Bounding Box (AABB) collision checks if two rectangles overlap. Two rectangles collide if they overlap on BOTH the x-axis AND the y-axis. This is the most common collision used in 2D games.

    3 min10 XPQuiz
  4. 4

    Score & Lives — The Reward System

    Every game has a scoring system and a way to lose. Track score (goes up) and lives (goes down when you get hit). When lives reach 0, the game ends. Let's build this system with functions.

    3 min10 XPQuiz
  5. 5

    Gravity & Jumping — Physics in Games

    Real gravity accelerates things downward. In games, we simulate this by adding a velocity variable. Each frame, gravity increases the downward velocity. Pressing jump sets a negative (upward) velocity. When the player hits the ground, velocity resets.

    3 min10 XPQuiz
  6. 6

    Enemies — Spawning & Moving Foes

    Enemies make games challenging! They can be stored in an array. Each enemy has a position and moves every frame. When the player collides with one, the player loses a life. When an enemy goes off-screen, remove it and maybe spawn a new one.

    3 min10 XPQuiz
  7. 7

    Game States — Title, Play, Game Over

    Most games have multiple screens: a title screen, the actual gameplay, and a game-over screen. Use a 'state' variable and a switch statement to control which screen is showing. Events (like pressing SPACE or clicking) transition between states.

    3 min10 XPQuiz
  8. 8

    Particle Effects — Explosions & Sparkles

    Particles are small short-lived visual effects — sparks, smoke, coins flying. You spawn many tiny objects at once, each with a random velocity and a limited lifetime. Each frame, move them and reduce their life. When life reaches 0, remove them.

    3 min10 XPQuiz
  9. 9

    Mini Project — Build a Complete Dodge Game

    Let's put it all together! A dodge game where the player moves left/right to avoid falling enemies. It has a game loop, movement, collision, score, lives, spawning, and game states — all the skills from this track!

    3 min10 XPQuiz