In this exercise, we’re going to refactor the code from the Learn Phaser: Physics Lesson.

One major change that we’re going to implement is the inclusion of JavaScript’s class syntax. Each class will represent a Scene and contain the familiar preload(), create(), and update() functions. We’re going to refer to these functions as methods since they’re functions that belong to a class. Below is a sample template:

class ExampleScene extends Phaser.Scene {
  constructor(){
    super({ key: 'ExampleScene' });
  }
  preload() {
    // ...
  }
  create() {
    // ...
  }
  update() {
    // ...
  }
}

Our ExampleScene class is a subclass of Phaser.Scene:

• It has a constructor() method that is used to create an initialize the Scene object.
• Inside the constructor() method, we call super() which calls the constructor() of the Phaser.Scene.
  • We provide super() with the object { key: 'ExampleScene' } so that we can refer to this class in our config object.
• preload(), create(), and update() are included but are now methods, notice the lack of the function keyword.

In order for our Phaser game to know about this class, we’ll also need to change the config object:

const config = {
  // …
  scene: [ExampleScene]
};

In the code above, our config object’s scene property has a value of an array. While the only element currently inside the array is ExampleScene, we can later add more scenes to this array.

By refactoring our code, we’re laying the groundwork to include more scenes in this existing game. In later exercises, we can add scenes for starting and ending the game!