Organize your game code with this tutorial

Posted on 3rd Jun 2015. Follow @phaser_ and get the Phaser World newsletter.


From the Perplexing Technology blog: "Developing a game using states, allows you to organize your code, while also adding a more complete and dynamic gaming experience for the player.

In this tutorial I’m going to walk you through creating a very simple JavaScript game using game states and the Phaser framework.

Using states allows you to break your game up into smaller pieces that can handle different mechanics of the game, such as a menu. In this tutorial we’re going to create five states that will function as follows:

  1. The Boot State - We are simply going to start the physics system, and then call the Load State

  2. The Load State - We display a ‘loading’ text, load our assets, and call the Menu State

  3. The Menu State - We display the game name, get player input and call the Play State

  4. The Play State - This is where the game logic is actually handled. When the player wins (there is no way to lose), we call the Win State

  5. The Win State - This state will display a simple ‘You Won’ message, get player input, and re-call the Menu State"

Read the full tutorial

Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a PC role-playing game inspired by classics of the 16-bit era. Free forever, and available now for Windows, Mac, and Linux.

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now