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.

About Belén Albeza

Belén is an engineer and game developer working at Mozilla Developer Relations. She cares about web standards, high-quality code, accesibility and game development.

More articles by Belén Albeza…


3 comments

  1. sudhir meena

    This workshop is awesome….learned very much…..but got some problems in between somewhere that code was same but game was running as needed.
    But after copying from your source code then it was running….i checked many times code was same….but after i redo that and use my own and run that.

    April 19th, 2017 at 08:53

    Reply

  2. PM7268

    Would love to hear more info about html5 web development and what it takes to be mentored!

    April 22nd, 2017 at 19:48

    Reply

    1. Belén Albeza

      Hi, we have a lot of content to get people started in Web development at the Mozilla Developer Network. Check out: https://developer.mozilla.org/en-US/docs/Learn

      April 24th, 2017 at 08:30

      Reply

Post Your Comment