FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Learn JavaScript with Phaser

Introduction

Learning to code can be tricky, sometimes like a puzzle to solve. At times you get stuck. It helps to have a project you really want to get working. It can help you to keep you going to overcome your problems. That's why Javascript helps as it's the language of the web. It means that we can share our coding creations as part of web pages easily.

But learning Javascript can be tricky too. There are lot so different ways to do the same thing! And to make most web pages move around and be animated you need to also learn about HTML and CSS. For this reason a lot of beginner coders stick to python or similar languages. But there is another way.

Making Games for the Web using Phaser

Phaser is a Javascript library which supports the creation of web games. Real game developers made it and other game developers use it. They get paid for their games. It's a for real project. This is serious fun. 

Retro games have come back into fashion. Parents play them with children and they are fun and easy to play on home computer, consoles and especially on your phone.  They are a great way to start learning how to make digital games.

This book will help you create a game in a step by step way adding different game features along the way. It is inspired by and guided by some great free tutorials that are out there on various websites. Particularly the work of Richard Davey at Phaser, and Belen A at Mozilla. A full list is included at the appendix.

Phaser is also a good starting point for learning not only how to make games but also about the fundamentals of Javascript language and coding processes.

In addition to coding and game making, there are other skills that you may pick up through making games, especially if you do it with other people. These are explored more in the next chapter but include problem solving, communication and collaboratation skills, computational, systems and design thinking approaches.

What this Book is and isn't

It is:

  • a great way to get started making a simple 2D arcade style game
  • a fun way to find out about the basics of the coding process
  • an introduction to Javascript and some of the ways it does things
  • a partner guide to support more hands-on collaborative workshops

But this book has clear limits. It's a short book that you can progress through quickly. Here are some of the things that we don't cover;

  • more advanced 3D approaches to game making or any role playing elements
  • a systematic way to learn a programming language (we pick up concepts when we need them)
  • a complete guide to the most advanced approaches to writing game using the Phaser code library

 

Examples of phaser web games

There are some great games out there made with Phaser which we can look to for some inspiration. Here are a few of our favourites.

Dork Squad

Can you (and a partner) save the world from robots. Have you got what it takes?

https://eoinmcg.itch.io/dork-squad 

Grooow

Platformer game with puzzle elements! Pick up all the dots to advance to the next level. But be careful! The more you pick up, the heavier and bigger you get, and thus it'll be more difficult to move and jump!

https://ladybenko.itch.io/grooow

Cybertank

Guide the tank through the levels to collect the cubes and escape. Great sounds and retro graphics here.
http://cybertank.paulp.ws/

Knife Hit

This game is created as part of a fantastic tutorial. It's a bit advanced for beginners but is definately worth checking out.
https://www.emanueleferonato.com/tag/knife-hit/

About the Phaser Community and Code

Richard Davey is the lead coder on the phaser project. There are two main versions of Phaser in use Phaser 2 and Phaser 3. This book looks at Phaser 2 as it is a bit easier to start to learn.

One thing that the community of people using Phaser to make games is very good at is sharing how they do it and helping others who get stuck. There are some fantastic resources available for free. A lot of these resources are available on the main Phaser website.

To get started there is a great tutorial on making a platform game. This book draws on the approach here, altering the approach only a bit to allow for your projects to go a bit further. https://phaser.io/tutorials/making-your-first-phaser-2-game

Many people share tutorials on how to do particular types of games. There is a good list of them here althougth this can be a confusing place to start learning: https://phaser.io/news/category/tutorial 

There is also an online forum for when you get stuck as well here -  http://www.html5gamedevs.com/forum/14-phaser-2/

Welcome to the adventure

Learning to code by creating your own games is always going to have some ups and downs. If you are worried you are going to get stuck. We would reccomend trying out the exercises in this book and the challenges together with someone else. Maybe someone in your family or a friend. That way you can get past some of the challenges without getting to frustrated.

Read on to start the adventure.

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.