HTML5 Games Workshop

Also available in fr.

Start here

We are going to create a classic one-screen platformer game! It will feature a main character, who can run and jump to platforms. There will also be enemies that this character will have to avoid –or kill! The goal of the game is to fetch the key and open the door that leads to the next level.

Screenshot

You can play the game here.

We will be implementing the following game development concepts:

We will focus on game development concepts and the Phaser API in a way that is accessible to as many people as possible. This means that some good practises, like modules, that require of additional tools or a better understanding of JavaScript will not be seen here.

That said, if you are familiar with this tools/concepts and want to use them in this workshop, by all means, do it.

Important!

This guide uses Phaser CE version 2.7.7. This version is what it's included in the project template provided in the next step.

It is possible that later on some changes in Phaser API in future versions might make this guide not 100% compatible with the latest Phaser version. We will try to keep this updated, though.

About the art assets

The graphic and audio assets of the game in this guide have been released in the public domain under a CC0 license. These assets are:

Contents of this guide

  1. Start here
  2. Initialise Phaser
  3. The game loop
  4. Creating platforms
  5. The main character sprite
  6. Keyboard controls
  7. Moving sprites with physics
  8. Gravity
  9. Jumps
  10. Pickable coins
  11. Walking enemies
  12. Death
  13. Scoreboard
  14. Animations for the main character
  15. Win condition
  16. Switching levels
  17. Moving forward…