HTML5 Games Workshop: Make a platformer game with JavaScript!

I have always wanted to run a game development workshop, and some weeks ago, thanks to AdaJS in Barcelona, I finally got my chance.


Best news? The materials that I created are available online! And you can use them to guide yourself or to design a game development workshop of your own.

The content I cover includes:

  • Setting up your machine to develop games with Phaser and JavaScript.
  • Loading the assets (images, audio files, etc.) you’ll use in your game.
  • Rendering animated sprites.
  • Getting the players’ input via the keyboard.
  • Using a physics engine to handle movement, jumps, gravity, etc.
  • Playing sound effects and background music.
  • Changing between different levels.
  • And more!

You can check out the final game here –and play it! Move the character and jump with the arrow keys. Your goal is to pick up the key and reach the door.

Platformer screenshot

Try the workshop at home

Do you want to try the workshop on your own and make a game? Please go ahead! There are indications at the beginning of each lesson, as well as explanations at every step, so that you can use this as a self-guided workshop, without a coach.

If you get lost, you can download the source code at the end of every chapter and compare it with your work. There is also a checklist to help ensure you are on the right track before advancing to the next step.

Run your own workshop

If you would like to replicate the workshop in your local community, please do. It’s really fun and inspiring to see how people create a game for the very first time. We’d love to hear from you!

The workshop website includes a guide for coaches and instructors that will help you set up run your own game-making workshop.

Source: Mozilla Hacks HTML5 Games Workshop: Make a platformer game with JavaScript!