This tutorial by Richard Davey is a really nice introduction to Phaser 3, using it to make a simple game. Before I work with my son on using Phaser, I’ve rewritten it to use ES6 classes in JavaScript.

You can download the source code here. The assets are included and distributed with permission. Assuming you have nodejs installed, once you download the source, in the folder where you downloaded it, install express using npm install express.

Once express is installed, run node server.

Then go to http://localhost:1337 in your browser to play the game. The source contains an index.html file, an index.js file that creates the Game object and a Game.js file that contains all the source for the game in an ES6 class.

There are some small differences in the game config from the original tutorial in ES5. Notice scene below:

import Game from './game.js'

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [
    Game
  ],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  }
}

const game = new Phaser.Game(config)

In the Game.js file, notice that variables are defined as local variables in class methods or class members. Other than that, the code is mostly the the same.

Leave a Reply