Game Over screen

src/main.ts

@@ -1,6 +1,7 @@
-import Phaser from 'phaser'
+import Phaser, { Game } from 'phaser'
 
 import PlayScene from './scenes/PlayScene'
+import GameOverScene from './scenes/GameOverScene'
 
 const config: Phaser.Types.Core.GameConfig = {
 	type: Phaser.AUTO,
@@ -14,7 +15,7 @@ const config: Phaser.Types.Core.GameConfig = {
 			debug: false
 		}
 	},
-	scene: [PlayScene]
+	scene: [PlayScene, GameOverScene]
 }
 
 export default new Phaser.Game(config)

src/scenes/GameOverScene.ts

@@ -0,0 +1,43 @@
+import Phaser from 'phaser'
+
+export default class PlayScene extends Phaser.Scene {
+
+  constructor() {
+    super('game-over-scene')
+  }
+
+  preload() {
+    this.load.image('phaser-logo', 'assets/img/phaser3-logo.png')
+    this.load.image('hs3-logo', 'assets/img/hs3-logo.png')
+  }
+
+  create(data) {
+    console.log("Show end screen with data:", data)
+
+    this.add.image(250, 550, 'phaser-logo').setScale(0.5)
+    this.add.image(550, 550, 'hs3-logo').setScale(0.5)
+
+    this.add.text(
+      this.cameras.main.centerX,
+      this.cameras.main.centerY - 100,
+      "KONIEC GRY", {
+      font: '64px Arial',
+    }).setOrigin(0.5, 0.5)
+
+    const rank = 0
+    const pts = data.points || 0
+    const lvl = data.level || 0
+    const time = Math.ceil(data.elapsedTime || 0)
+
+    this.add.text(this.cameras.main.centerX, this.cameras.main.centerY, [
+      "Miejsce w rankingu: #" + rank,
+      "Punkty: " + pts,
+      "Poziom: " + lvl,
+      "Czas Gry: " + time + 's',
+    ], {
+      font: '32px Arial',
+      align: 'center',
+      color: 'cyan'
+    }).setOrigin(0.5, 0.5)
+  }
+}

src/scenes/PlayScene.ts

@@ -15,6 +15,7 @@ export default class PlayScene extends Phaser.Scene {
   background?: Phaser.GameObjects.Image
   backgroundOrder: number[] = []
   backgroundId = 0
+  startTimestamp: number = 0
 
   constructor() {
     super('play-scene')
@@ -28,7 +29,6 @@ export default class PlayScene extends Phaser.Scene {
   preload() {
     for (let i = 1; i < 10; i++)
       this.load.image(`sky${i}`, `assets/img/nebula0${i}.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 })
@@ -53,6 +53,7 @@ export default class PlayScene extends Phaser.Scene {
     })
     this.progressLabel.setDepth(1)
 
+    this.startTimestamp = this.time.now
     this.changeBackground()
     this.updateLabel()
     this.hookupCollisions()
@@ -61,6 +62,11 @@ export default class PlayScene extends Phaser.Scene {
   gameOver() {
     console.log("%cU ded", "color:red")
     console.log("points: ", this.difficulty!.getPoints())
+    this.scene.start('game-over-scene', {
+      points: this.difficulty!.getPoints(),
+      level: this.difficulty!.getLevel(),
+      elapsedTime: (this.time.now - this.startTimestamp) / 1000
+    })
   }
 
   changeBackground() {