Add bullets

src/classes/Bullet.ts

@@ -0,0 +1,25 @@
+import Phaser from 'phaser'
+
+export default class Bullet extends Phaser.Physics.Arcade.Sprite {
+  constructor(scene, x, y) {
+    super(scene, x, y, 'bullet');
+  }
+
+  fire(x, y) {
+    this.body.reset(x, y);
+
+    this.setActive(true);
+    this.setVisible(true);
+
+    this.setVelocityY(-300);
+  }
+
+  preUpdate(time, delta) {
+    super.preUpdate(time, delta);
+
+    if (this.y <= -32) {
+      this.setActive(false);
+      this.setVisible(false);
+    }
+  }
+}

src/classes/Bullets.ts

@@ -0,0 +1,24 @@
+import Phaser from 'phaser'
+import Bullet from './Bullet'
+
+export default class Bullets extends Phaser.Physics.Arcade.Group {
+  constructor(scene: Phaser.Scene) {
+    super(scene.physics.world, scene);
+
+    this.createMultiple({
+      frameQuantity: 5,
+      key: 'bullet',
+      active: false,
+      visible: false,
+      classType: Bullet
+    });
+  }
+
+  fireBullet(x: number, y: number) {
+    let bullet = this.getFirstDead(false);
+
+    if (bullet) {
+      bullet.fire(x, y);
+    }
+  }
+}

src/classes/Ship.ts

@@ -1,4 +1,5 @@
 import Phaser from 'phaser'
+import Bullets from './Bullets'
 
 export default class Ship extends Phaser.Physics.Arcade.Sprite {
   readonly acceleration = 5
@@ -7,6 +8,8 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite {
   readonly colliderRadiusRatio = 0.43
   readonly wrapMargin = 10
 
+  bullets?: Bullets
+
   constructor(scene: Phaser.Scene) {
     super(
       scene,
@@ -25,6 +28,8 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite {
     this.setDamping(true)
     this.setDrag(this.dragForce)
     this.body.setCircle(this.width * this.colliderRadiusRatio)
+
+    this.bullets = new Bullets(scene)
   }
 
   preUpdate(time, delta) {
@@ -35,6 +40,8 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite {
     const keyLeft = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A)
     const keyRight = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D)
 
+    const keyShoot = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)
+
     const vec = new Phaser.Math.Vector2(0, 0)
 
     if (keyUp.isDown) vec.y = -this.acceleration
@@ -42,7 +49,10 @@ export default class Ship extends Phaser.Physics.Arcade.Sprite {
     if (keyRight.isDown) vec.x = this.acceleration
     if (keyLeft.isDown) vec.x = -this.acceleration
 
+    if (keyShoot.isDown) this.bullets.fireBullet(this.x, this.y);
+
     this.body.velocity.add(vec)
     this.scene.physics.world.wrap(this, this.wrapMargin)
   }
+
 }

src/scenes/DefaultScene.ts

@@ -2,38 +2,39 @@ import Phaser from 'phaser'
 import Ship from '../classes/Ship'
 
 export default class DefaultScene extends Phaser.Scene {
-    player?: Ship
+  player?: Ship
 
-    constructor() {
-        super('default-scene')
-    }
+  constructor() {
+    super('default-scene')
+  }
 
-    preload() {
-        this.load.image('sky', 'assets/img/nebula10.png')
-        this.load.image('logo', 'assets/img/phaser3-logo.png')
-        this.load.image('ship', 'assets/img/ship.png')
-        this.load.spritesheet('particles', 'assets/img/boom.png', { frameWidth: 192, frameHeight: 192 })
-    }
+  preload() {
+    this.load.image('sky', 'assets/img/nebula10.png')
+    this.load.image('logo', 'assets/img/phaser3-logo.png')
+    this.load.image('ship', 'assets/img/ship.png')
+    this.load.image('bullet', 'assets/img/bullet.png')
+    this.load.spritesheet('particles', 'assets/img/boom.png', { frameWidth: 192, frameHeight: 192 })
+  }
 
-    create() {
-        this.add.image(400, 300, 'sky')
+  create() {
+    this.add.image(400, 300, 'sky')
 
-        const particles = this.add.particles('particles', 21)
+    const particles = this.add.particles('particles', 21)
 
-        const emitter = particles.createEmitter({
-            speed: 300,
-            scale: { start: 1, end: 0 },
-            blendMode: 'ADD',
-        })
+    const emitter = particles.createEmitter({
+      speed: 300,
+      scale: { start: 1, end: 0 },
+      blendMode: 'ADD',
+    })
 
-        const logo = this.physics.add.image(400, 100, 'logo')
+    const logo = this.physics.add.image(400, 100, 'logo')
 
-        logo.setVelocity(100, 200)
-        logo.setBounce(1, 1)
-        logo.setCollideWorldBounds(true)
+    logo.setVelocity(100, 200)
+    logo.setBounce(1, 1)
+    logo.setCollideWorldBounds(true)
 
-        emitter.startFollow(logo)
+    emitter.startFollow(logo)
 
-        this.player = new Ship(this)
-    }
+    this.player = new Ship(this)
+  }
 }