Back to Learn Hub Getting Started
Beginner Track

Your First HTML5 Game

Follow this order: setup, drawing, the game loop, input, collision, then state. The last step is a small Snake you can play.

1

Tools & Setup

5 min

Setting up VS Code and creating your project structure.

Start Tutorial
2

Drawing & Movement

10 min

Coordinate systems, clearing the canvas, and moving rectangles.

Start Tutorial
3

The Game Loop

15 min

Understanding requestAnimationFrame and the heartbeat of every game.

Start Tutorial

Optional: delta time ยท fixed timestep.

4

Input Controls

15 min

Record keyboard and touch input, then read that state in the game loop.

Start Tutorial
5

Collision Detection

20 min

AABB collision after you can already steer the player.

Start Tutorial
6

Game State & Score

10 min

Keep score, restart cleanly, and know when a game has ended.

Start Tutorial
7

Build Snake

Project

Combine the pieces in a small game you can play and improve.

Build Snake