Game Design

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.

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.

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.

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.

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.

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.

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.

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.

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!