Let's Build a Game Engine in HTML
Interactive curriculum

Let's Build a Game Engine in HTML

A pure-browser path from a blank canvas to a tiny physics playground — no frameworks, no installs, just HTML, CSS, and JavaScript.

Start chapter 1Jump to final engine

Nine progressive chapters

Canvas → loop → entities → input → dt → collision → physics → camera → full game.

Sliders on every setting

Gravity, speed, friction, camera lerp — tune feel live while you learn.

Triple lab workspace

Reference solution, editable tinker code, and a play iframe side by side.

Pure HTML demos

No engines, no npm inside the lab. Copy the final HTML and open it anywhere.

Chapters

Each chapter ends with a working engine stage you can play and edit.

  1. 01Canvas FoundationYour first surface — the HTML canvas elementCreate a full document with a canvas, grab a 2D drawing context, and paint a solid world so the browser becomes your game screen.
  2. 02The Game LoopTime becomes continuous with requestAnimationFrameDrive the canvas every frame so the world can animate. Learn clear → update → draw and how a simple elapsed-time clock powers motion.
  3. 03Entities & DrawingData first — objects that know how to paint themselvesStop hard-coding rectangles. Represent the player and platforms as data objects, then write draw functions that read that data.
  4. 04Input SystemsKeyboard state that the loop can read every frameCapture keydown/keyup into a keys map, then move the player from the game loop — never only inside event handlers.
  5. 05Velocity & Delta TimeFrame-rate independent motionMultiply movement by dt (seconds since last frame) so 200px/s feels the same at 30fps or 60fps.
  6. 06Collision DetectionAxis-aligned boxes that push each other apartDetect AABB overlaps and resolve the player against solid platforms so they stand and slide instead of falling through.
  7. 07Physics & JumpingGravity, jumps, and friction that feel intentionalLayer gravity, jump impulse, coyote-free grounded checks, and ground friction on top of collision for a snappy platformer feel.
  8. 08Camera & Scrolling WorldSeparate world space from screen spaceBuild a larger level than the canvas and a camera that follows the player so drawing uses (world - camera) offsets.
  9. 09The Full Mini EngineCompose loop, input, physics, collision, camera into one playable gem huntShip a tiny complete game: collect gems, avoid hazards, win when you grab them all. This is the architecture you can expand forever.

How each chapter works

  1. 01

    Read the goal

    Short concept list and step-by-step instructions for that engine layer.

  2. 02

    Tune with sliders

    Every numeric constant is exposed — change gravity mid-lesson and re-run.

  3. 03

    Lab: solution · tinker · play

    Study the chapter HTML, edit a fork, then play the result in the sandbox.