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. Part one of this book gives you a structured start to give you the basics and part two encourages you to start your own project and to use some commons game elements that we explain.

As we make our games on the web in code playgroungs. It means that we can easily share our coding creations as part of web pages. You'll be able to share your creations with friends and family.

 

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 tutorials that are out there on various websites. Particularly the work of Richard Davey at Phaser, end3r, Belen Albeza and Chris Mills at Mozilla and Thomas Palef at lessmilk.com.

Why use Javascript as a language?

In short, because Javascript is the language of the web. And web games are great fun to play, make and share!

But we admit that in many ways Javascript is not a good way to start to learn how to code. Even fans would admit that learning Javascript can be tricky. There are lot so different ways to do the same thing! And to make your own real web pages you also need to also learn about HTML and CSS. For this reason, a lot of beginner text coders and teachers stick to Python or similar more consistent text code languages. There are other ways to learn the concepts behind coding. Kodu, Scratch and Blockly and Game Start Mechanic use a visual approach to coding, where you snap together colour coded blocks.

If you have already done some coding using these tools then you are in a great place to start coding using Javascript and the Phaser library. But even if you haven't we think that using the approach we outline in this book allows new comer to coding to start coding and sharing games with Javascript right from the start of their journey.

While there are lots of ways to write code things in Javascript, we have created to some coding guidelines1 to approach it in a simple and consistent way. 

The Phaser game library helps. Making games lets us focus on simple but acheivable tasks that are easy to grasp. We can pick up but also about the fundamentals of Javascript language and coding processes.

We are collecting a range of starter games that are available on our project home page here - https://github.com/webgameclubs/edlab-gamemakers-club

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 collaboration 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

This book has 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.

  1. https://github.com/webgameclubs/edlab-gamemakers-club/blob/master/CODE_GUIDE.md ^

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

You should refresh this page.