🎮beginner

Game Loops — The Heartbeat of Every Game

Learn about the game loop, the fundamental concept that makes every video game tick, update, and render frame by frame.

What Makes a Game Run?

Every video game — from Minecraft to Mario to Fortnite — runs on something called a game loop. It is the heartbeat of the game, repeating over and over, usually 60 times per second. The game loop does three things on each cycle: 1. Input — Check what the player is doing (pressing keys, moving the mouse, tapping the screen) 2. Update — Change the game state (move characters, check collisions, update scores) 3. Render — Draw everything on screen in its new position This happens so fast that it looks like smooth, continuous movement — just like how a flipbook with drawings on each page looks like animation when you flip quickly.

A Simple Game Loop

javascript

// The basic structure of every game loop
function gameLoop() {
  // 1. INPUT - Check what the player is doing
  handleInput();

  // 2. UPDATE - Move things, check collisions
  updateGameState();

  // 3. RENDER - Draw everything on screen
  drawEverything();

  // Do it again! (aims for 60 times per second)
  requestAnimationFrame(gameLoop);
}

// Start the game
gameLoop();

60 Frames Per Second

When gamers talk about 'FPS' (frames per second), they are talking about how many times the game loop runs each second. At 60 FPS, the loop runs 60 times per second — that means each cycle has only about 16 milliseconds to complete! If the update and render steps take too long, the game drops below 60 FPS and starts feeling 'laggy' or 'choppy.' That is why game developers spend so much time optimizing their code — every millisecond counts.

Pro Tip

The requestAnimationFrame function in JavaScript is the best way to create a game loop in the browser. It automatically syncs with your monitor's refresh rate (usually 60Hz) and pauses when the tab is not visible, saving battery and CPU power.

Spot the Loop

Think about your favorite video game. Can you identify what happens in each part of the game loop? What inputs does it check (keyboard, mouse, controller, touch)? What gets updated each frame (player position, enemy AI, physics, timers)? What gets drawn on screen? Write down the input-update-render cycle for your game!

Sprite Movement — Making Characters Move

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free