Finally asteroids exploding!!

game/src/classes/Asteroid.ts

@@ -60,6 +60,12 @@ export default class Asteroid extends Phaser.Physics.Arcade.Sprite {
     if (!(bullet instanceof Bullet)) return
     if (bullet.active == false) return
     
+    const exp = me.scene.add.sprite(me.x, me.y, "explosion")
+    exp.play('explode', false)
+    exp.once('animationcomplete', () => {
+      exp.destroy()
+    })
+
     me.scene.events.emit("asteroid:destroy")
     me.destroy()
     bullet.setActive(false)
@@ -87,6 +93,13 @@ export default class Asteroid extends Phaser.Physics.Arcade.Sprite {
         repeat: -1
       })
     })
+
+    scene.anims.create({
+      key: "explode",
+      frames: scene.anims.generateFrameNumbers("explosion", { first: 0, end: 13 }),
+      frameRate: 16,
+      repeat: 0
+    });
   }
 
   static getRandomAnimationName() {

game/src/scenes/PlayScene.ts

@@ -33,6 +33,7 @@ export default class PlayScene extends Phaser.Scene {
     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 })
+    this.load.spritesheet('explosion', 'assets/img/explosion.png', { frameWidth: 64, frameHeight: 64 })
     this.load.multiatlas('asteroids', 'assets/img/asteroids.json', 'assets/img');
   }