Skip to main content
← 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. They sit beside the guide. One file is the page. The other file is the game code. Edit them and the game restarts with your changes.

The whole game is made of rectangles. That is on purpose. First you learn to move a rectangle. Then you learn to land it on another rectangle. Then you learn to scroll the view to follow it. Once you can do those three things, the rest of a game is artwork.

Every stage runs right here in the lesson. Click the game first. Then use the arrow keys. You can also use the A, D, and W keys.

Who it's for
This course is for students who have finished JavaScript. It is also for 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. Every later stage starts from this code.

    <canvas>getContextupdate and drawrequestAnimationFrame

  2. Gravity and Jumping

    Add one number for up and down speed. The rectangle now has weight. It jumps in a curve and lands.

    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 is now wider than the screen. You move the view instead of the player.

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