Lets add some asteroids

src/classes/Asteroid.ts

@@ -0,0 +1,66 @@
+import Phaser from 'phaser'
+
+export default class Asteroid extends Phaser.Physics.Arcade.Sprite {
+  static unbornAge = 1000 // asteroid can't kill player
+                          // if younger than 1000ms
+  readonly wrapMargin = 30
+
+  age = 0
+
+  constructor(scene: Phaser.Scene) {
+    super(
+      scene,
+      Phaser.Math.RND.integerInRange(0, scene.physics.world.bounds.width),
+      Phaser.Math.RND.integerInRange(0, scene.physics.world.bounds.height),
+      'asteroids'
+    )
+
+    scene.add.existing(this)
+    scene.physics.add.existing(this)
+
+    this.anims.play(Asteroid.getRandomAnimationName())
+    this.setCircle(30, 30, 30)
+    this.setScale(Phaser.Math.RND.realInRange(0.7, 1.3))
+    this.setVelocity(
+      Phaser.Math.RND.realInRange(-100, 100),
+      Phaser.Math.RND.realInRange(-100, 100)
+    )
+    this.setRandomShade()
+  }
+
+  preUpdate(time: number, delta: number) {
+    super.preUpdate(time, delta)
+    
+    this.scene.physics.world.wrap(this, this.scale * this.wrapMargin)
+    this.age += delta
+  }
+
+  private setRandomShade() {
+    const color = new Phaser.Display.Color()
+    color.randomGray(0xa0) //the darkest possible dye is 0xa0a0a0
+    this.setTint(color.color)
+  }
+
+  static createAnimations(scene: Phaser.Scene) {
+    ["a", "b", "c", "d"].forEach((animationName, i) => {
+      const frames = scene.anims.generateFrameNames('asteroids', {
+        start: 0, end: 15,
+        zeroPad: 4,
+        prefix: `${animationName}4`
+      });
+
+      scene.anims.create({
+        key: `asteroid${i}`,
+        frames: frames,
+        frameRate: 16,
+        repeat: -1
+      })
+    })
+  }
+
+  static getRandomAnimationName() {
+    const animationsAmount = 3
+    const id = Phaser.Math.RND.integerInRange(0, animationsAmount)
+    return `asteroid${id}`
+  }
+}

src/scenes/DefaultScene.ts

@@ -1,8 +1,12 @@
 import Phaser from 'phaser'
 import Ship from '../classes/Ship'
+import Asteroid from '../classes/Asteroid'
 
 export default class DefaultScene extends Phaser.Scene {
+  readonly maxGameObjects = 100
+
   player?: Ship
+  rotFrames?: Phaser.Types.Animations.AnimationFrame[]
 
   constructor() {
     super('default-scene')
@@ -14,12 +18,24 @@ export default class DefaultScene 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.multiatlas('asteroids', 'assets/img/asteroids.json', 'assets/img');
   }
 
   create() {
+    Asteroid.createAnimations(this)
     this.add.image(400, 300, 'sky')
 
-    
     this.player = new Ship(this)
+    this.time.addEvent({
+      delay: 1500,  // ms
+      callback: this.spawnAsteroids,
+      callbackScope: this,
+      repeat: -1
+    });
+  }
+
+  spawnAsteroids() {
+    if (this.children.length < this.maxGameObjects)
+      new Asteroid(this)
   }
 }