manage HighScore

Games/TutoPhaser/src/App.vue

@@ -1,66 +1,41 @@
 <script setup lang="ts">
 import Phaser from "phaser";
-import { ref, toRaw } from "vue";
-import type { MainMenu } from "./game/scenes/MainMenu";
+import { onMounted, ref, toRaw } from "vue";
+import { EventBus } from "./game/EventBus";
+import { Game } from "./game/scenes/Game";
 import PhaserGame from "./game/PhaserGame.vue";
 
-// The sprite can only be moved in the MainMenu Scene
-const canMoveSprite = ref();
-
 //  References to the PhaserGame component (game and scene are exposed)
 const phaserRef = ref();
-const spritePosition = ref({ x: 0, y: 0 });
-
-const changeScene = () => {
-    const scene = toRaw(phaserRef.value.scene) as MainMenu;
-
-    if (scene) {
-        //  Call the changeScene method defined in the `MainMenu`, `Game` and `GameOver` Scenes
-        scene.changeScene();
-    }
-};
-
-const moveSprite = () => {
-    if (phaserRef.value !== undefined) {
-        const scene = toRaw(phaserRef.value.scene) as MainMenu;
-
-        if (scene) {
-            // Get the update logo position
-            (scene as MainMenu).moveLogo(({ x, y }) => {
-                spritePosition.value = { x, y };
+const scene = ref();
+const data = ref({ highScore: 0 });
+
+onMounted(() => {
+    EventBus.on("highscore", (scene_instance: Phaser.Scene) => {
+        scene.value = scene_instance;
+        // Manage High Score
+        if (scene.value instanceof Game) {
+            (scene.value as Game).updateHighScore(({ highScore }: { highScore: number }) => {
+                if (highScore > data.value.highScore) {
+                    data.value = { highScore };
+                }
             });
         }
-    }
-};
+    });
+});
 
-const addSprite = () => {
-    const scene = toRaw(phaserRef.value.scene) as Phaser.Scene;
+const changeScene = () => {
+    const scene = toRaw(phaserRef.value.scene) as Game;
 
     if (scene) {
-        // Add a new sprite to the current scene at a random position
-        const x = Phaser.Math.Between(64, scene.scale.width - 64);
-        const y = Phaser.Math.Between(64, scene.scale.height - 64);
-
-        // `add.sprite` is a Phaser GameObjectFactory method and it returns a Sprite Game Object instance
-        const star = scene.add.sprite(x, y, "star");
-
-        //  ... which you can then act upon. Here we create a Phaser Tween to fade the star sprite in and out.
-        //  You could, of course, do this from within the Phaser Scene code, but this is just an example
-        //  showing that Phaser objects and systems can be acted upon from outside of Phaser itself.
-        scene.add.tween({
-            targets: star,
-            duration: 500 + Math.random() * 1000,
-            alpha: 0,
-            yoyo: true,
-            repeat: -1,
-        });
+        scene.changeScene();
     }
 };
 
 // Event emitted from the PhaserGame component
-const currentScene = (scene: MainMenu) => {
-    canMoveSprite.value = scene.scene.key !== "MainMenu";
-};
+const currentScene = (scene: Game) => {};
+
+defineExpose({ scene });
 </script>
 
 <template>
@@ -69,15 +44,6 @@ const currentScene = (scene: MainMenu) => {
         <div>
             <button class="button" @click="changeScene">Restart Game</button>
         </div>
-        <div>
-            <button :disabled="canMoveSprite" class="button" @click="moveSprite">Toggle Movement</button>
-        </div>
-        <div class="spritePosition">
-            Sprite Position:
-            <pre>{{ spritePosition }}</pre>
-        </div>
-        <div>
-            <button class="button" @click="addSprite">Add New Sprite</button>
-        </div>
+        <div class="spritePosition">High Score: {{ data.highScore }}</div>
     </div>
 </template>

Games/TutoPhaser/src/game/PhaserGame.vue

@@ -1,43 +1,35 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-import { EventBus } from './EventBus';
-import StartGame from './main';
-import Phaser from 'phaser';
+import { onMounted, onUnmounted, ref } from "vue";
+import { EventBus } from "./EventBus";
+import StartGame from "./main";
+import Phaser from "phaser";
 
 // Save the current scene instance
 const scene = ref();
 const game = ref();
 
-const emit = defineEmits(['current-active-scene']);
+const emit = defineEmits(["current-active-scene"]);
 
 onMounted(() => {
+    game.value = StartGame("game-container");
+
+    EventBus.on("current-scene-ready", (scene_instance: Phaser.Scene) => {
+        emit("current-active-scene", scene_instance);
 
-    game.value = StartGame('game-container');
-    
-    EventBus.on('current-scene-ready', (scene_instance: Phaser.Scene) => {
-        
-        emit('current-active-scene', scene_instance);
-    
         scene.value = scene_instance;
-    
     });
-
 });
 
 onUnmounted(() => {
-
-    if (game.value)
-    {
+    if (game.value) {
         game.value.destroy(true);
         game.value = null;
     }
-
 });
 
 defineExpose({ scene, game });
-
 </script>
 
 <template>
     <div id="game-container"></div>
-</template>
+</template>

Games/TutoPhaser/src/game/scenes/Game.ts

@@ -191,6 +191,7 @@ export class Game extends Scene {
         star.disableBody(true, true);
         this.score += 10;
         this.scoreText.setText("Score: " + this.score);
+        EventBus.emit("highscore", this);
 
         if (this.stars.countActive(true) === 0) {
             this.stars.children.iterate((child) => {
@@ -227,4 +228,10 @@ export class Game extends Scene {
             this.scene.start("Boot");
         }
     }
+
+    public updateHighScore(vueCallback: ({ highScore }: { highScore: number }) => void) {
+        if (vueCallback) {
+            vueCallback({ highScore: this.score });
+        }
+    }
 }