← All courses

Make a Platformer

Build a scrolling jump-and-run game from rectangles.

This course builds one game in four stages. Each stage gives you the two files it needs, beside the guide: the page and the game code. Edit them and the game restarts with your changes.

The whole game is made of rectangles. That is on purpose. Once you can move a rectangle, land it on another rectangle, and scroll the view to follow it, everything else is artwork.

Every stage runs right here in the lesson. Click the game first, then use the arrow keys, or A, D, and W.

Who it's for
Students who have finished the JavaScript lessons in Basic Web Development, or anyone who is comfortable with variables, functions, and if statements.

Lessons

  1. The Game Loop

    A canvas, a red rectangle, and arrow keys that move it. This is the skeleton for every later stage.

    <canvas>getContextupdate and drawrequestAnimationFrame

  2. Gravity and Jumping

    Add one number for vertical speed. The rectangle gets weight, an arc, and a landing.

    VelocityGravityGround collisionStopping the double jump

  3. Platforms and Collisions

    Replace the single floor with a list of platforms. Then write the overlap test that every 2D game uses.

    A list of objects as level dataRectangle overlapOne-way platformsforEach

  4. A Camera That Follows

    The world becomes wider than the screen. Move the view instead of the player.

    World and screen positionsctx.save and ctx.restorectx.translateLimiting the camera