Move spaceship to separate class

src/index.ts

@@ -1,10 +1,5 @@
-import { Scene, Types, CANVAS, Game, GameObjects } from 'phaser';
-
-/** Possible movement directions */
-export enum Direction {
-    Left = -1, 
-    Right = 1 
-}
+import { Scene, Types, CANVAS, Game } from 'phaser';
+import { Spaceship, Direction } from './spaceship';
 
 /**
  * Space shooter scene
@@ -13,8 +8,7 @@ export enum Direction {
  * https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.Systems.html.
  */
 class ShooterScene extends Scene {
-    private spaceShip: GameObjects.Image;
-    private speed: number;
+    private spaceShip: Spaceship;
     private cursors: Types.Input.Keyboard.CursorKeys;
 
     preload() {
@@ -23,17 +17,15 @@ class ShooterScene extends Scene {
         this.load.image('bullet', 'images/scratch-laser.png');
         this.load.image('ship', 'images/scratch-spaceship.png');
         this.load.image('meteor', 'images/scratch-meteor.png');
-
-        this.speed = Phaser.Math.GetSpeed(200, 1);
     }
 
     create() {
         //  Add a background
         this.add.tileSprite(0, 0, this.game.canvas.width, this.game.canvas.height, 'space').setOrigin(0, 0);
 
         // Add the sprite for our space ship.
-        this.spaceShip = this.add.image(0, 0, 'ship');
-        this.physics.add.existing(this.spaceShip);
+        this.spaceShip = new Spaceship(this);
+        this.physics.add.existing(this.children.add(this.spaceShip));
 
         // Position the spaceship horizontally in the middle of the screen
         // and vertically at the bottom of the screen.
@@ -46,21 +38,12 @@ class ShooterScene extends Scene {
     update(_, delta: number) {
         // Move ship if cursor keys are pressed
         if (this.cursors.left.isDown) {
-            this.move(delta, Direction.Left);
+            this.spaceShip.move(delta, Direction.Left);
         }
         else if (this.cursors.right.isDown) {
-            this.move(delta, Direction.Right);
+            this.spaceShip.move(delta, Direction.Right);
         }
     }
-
-    move(delta: number, direction: Direction) {
-        // Change position
-        this.spaceShip.x += this.speed * delta * direction;
-
-        // Make sure spaceship cannot leave world boundaries
-        this.spaceShip.x = Phaser.Math.Clamp(this.spaceShip.x, this.spaceShip.width / 2,
-            this.game.canvas.width - this.spaceShip.width / 2);
-    }
 }
 
 const config = {

src/shooterImage.ts

@@ -0,0 +1,35 @@
+import { GameObjects } from 'phaser';
+
+/**
+* ShooterImage is the base class for all images in our space shooter game.
+* 
+* Technically, a shooter image is a Phaser Image. Learn more about images at
+* https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Image.html.
+**/
+export class ShooterImage extends GameObjects.Image {
+    protected speed: number;
+    protected sceneHeight: number;
+    protected sceneWidth: number;
+
+    constructor(scene: Phaser.Scene, texture: string, speedDistance: number) {
+        // Initialize the Phaser image
+        super(scene, 0, 0, texture);
+
+        // Store the size of the scene, we will need it later
+        this.sceneHeight = scene.game.canvas.height;
+        this.sceneWidth = scene.game.canvas.width;
+
+        // Calculate the speed
+        this.speed = Phaser.Math.GetSpeed(speedDistance, 1);
+    }
+
+    protected activate() {
+        this.setActive(true);
+        this.setVisible(true);
+    }
+
+    kill() {
+        this.setActive(false);
+        this.setVisible(false);
+    }
+}

src/spaceship.ts

@@ -0,0 +1,27 @@
+import { ShooterImage } from './shooterImage';
+
+/** Possible movement directions */
+export enum Direction {
+    Left = -1, 
+    Right = 1 
+}
+
+/** Spaceship that can move left and right */
+export class Spaceship extends ShooterImage {
+    constructor(scene: Phaser.Scene) {
+        super(scene, 'ship', 200);
+
+        // Position the spaceship horizontally in the middle of the screen
+        // and vertically at the bottom of the screen.
+        this.setPosition(scene.game.canvas.width / 2, scene.game.canvas.height * 0.9);
+    }
+
+    move(delta: number, direction: Direction) {
+        // Change position
+        this.x += this.speed * delta * direction;
+
+        // Make sure spaceship cannot leave world boundaries
+        this.x = Phaser.Math.Clamp(this.x, this.width / 2,
+            this.sceneWidth - this.width / 2);
+    }
+}