The game loop

Learn the game loop with its update and render steps.

What Is a Game Loop?

A game loop is a set of basic operations that repeat while a game is running. Through this loop, the game processes player input, updates object states, and prepares new images for the screen.

Game starts
    ↓
Game loop
    ↓
Update → Render
    ↑        |
    └────────┘

Because the loop repeats continuously, the game world appears animated and interactive.

The Update and Render Stages

The Update stage is where game objects' position, state, and movement information are updated. The Render stage creates the image of the updated game world and draws it on the screen.

Update:
  character.x = character.x + 1

Render:
  draw character on screen

As these two stages repeat, player movements and visual changes appear on the screen.

Exercise Create a Simple Game Loop

Inside the gameLoop function, call update() first and then render(). In this example, both operations should print a message. The order of the messages matters.

Show example solution

function update() {
    console.log("Update");
}

function render() {
    console.log("Render");
}

function gameLoop() {
    update();
    render();
}

gameLoop();

Test yourself

In which stage of the game loop is the character's new position calculated?
- Game installation
- Update
- Render
- Screen resolution
Show answer

Update — During the Update stage, the states of characters and other game objects are calculated and updated.

Draw the Image on the Screen

function gameLoop() {
    update();
    ____();
}

Show answer

function gameLoop() {
    update();
    render();
}

Game Loop Concepts

Game Loop

Repeated game operations
Update

Updates the game state
Render

Creates the image
Framerate

Number of frames per second

Next lesson: The scene concept

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies