diff --git a/src/index.ts b/src/index.ts index 12dbfd5..90e5e40 100644 --- a/src/index.ts +++ b/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,8 +17,6 @@ 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() { @@ -32,8 +24,8 @@ class ShooterScene extends Scene { 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 = { diff --git a/src/shooterImage.ts b/src/shooterImage.ts new file mode 100644 index 0000000..653a14b --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/spaceship.ts b/src/spaceship.ts new file mode 100644 index 0000000..5284136 --- /dev/null +++ b/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); + } +}