Merge pull request #32 from owencooke/find_zebra

[MINIGAME] Find the Zebra (iSpy Zebra)

src/game/scenes/Preloader.js

@@ -109,6 +109,10 @@ export class Preloader extends Scene {
             frameWidth: 321,
             frameHeight: 80,
         });
+
+        // Load find zebra images
+        this.load.image("zebra","./assets/zebra.png");
+        this.load.image("find_zebra","./assets/find_zebra.png");
     }
 
     create() {

src/game/scenes/SpyGame.js

@@ -0,0 +1,79 @@
+import { Phaser,Scene } from "phaser";
+
+export class SpyGame extends Scene {
+    constructor() {
+        super("SpyGame");
+        this.background
+    }
+
+    create() {
+        this.cameras.main.fadeIn(1000, 0, 0, 0);
+        this.background = this.add.image(0,0,"find_zebra").setOrigin(0);
+        this.background.x -=200;
+
+        const zebra = this.add.sprite(200,300,"zebra").setInteractive();
+        zebra.setScale(0.7); 
+        zebra.on("pointerdown", this.onZebraClicked, this);
+
+        this.box = this.add.graphics();
+        this.box.fillStyle(0x000000, 0.7);
+        this.box.fillRect(this.cameras.main.centerX - 300, this.cameras.main.centerY - 50, 600, 100);
+
+        this.startText = this.add.text(
+            this.cameras.main.centerX, 
+            this.cameras.main.centerY, 
+            'Find the Zebra', { fontSize: '42px', fill: '#ffffff', fontStyle: 'bold', fontFamily: "Arial Black" }
+            )
+        .setOrigin(0.5);
+
+        // Remove the text and box after 2 seconds
+        this.time.delayedCall(2000, () => {
+            this.startText.destroy(); 
+            this.box.destroy();
+        });
+
+        this.homeButton = this.add
+            .image(this.cameras.main.width - 32, 32, "home")
+            .setScrollFactor(0)
+            .setOrigin(1, 0)
+            .setScale(0.2)
+            .setInteractive();
+
+        this.scale.on("resize", (gameSize) => {
+            this.cameras.main.setSize(gameSize.width, gameSize.height);
+            this.homeButton.setPosition(this.cameras.main.width - 32, 32);
+        });
+
+        this.homeButton.on("pointerover", () => {
+            this.game.canvas.style.cursor = "pointer";
+        });
+
+        this.homeButton.on("pointerout", () => {
+            this.game.canvas.style.cursor = "default";
+        });
+
+        this.homeButton.on("pointerdown", () => {
+            this.scene.start("Hospital");
+        });
+
+    }
+
+    onZebraClicked() {
+
+        // Create a box sprite as the background for the text
+        const box = this.add.graphics();
+        box.fillStyle(0x000000, 0.7);
+        box.fillRect(this.cameras.main.centerX - 300, this.cameras.main.centerY - 50, 600, 100);
+
+        this.add.text(
+            this.cameras.main.centerX, 
+            this.cameras.main.centerY, 
+            'Congratulations!', { fontSize: '42px', fill: '#ffffff', fontStyle: 'bold', fontFamily: "Arial Black" }
+            )
+        .setOrigin(0.5);
+
+        this.time.delayedCall(2000, () => {
+            this.scene.start("Hospital");
+        })
+    }
+}

src/game/scenes/index.js

@@ -9,6 +9,7 @@ import { TileJump } from "./TileJump";
 import { GameOverTileJump } from "./GameOverTileJump";
 import { Maze } from "./Maze";
 import { Pong, gameEnd } from "./Pong";
+import { SpyGame } from "./SpyGame";
 import { ZebraCatcher } from "./ZebraCatcher";
 
 // IMPORTANT: you must import and add your new scene to this array for it to be renderable!!
@@ -25,5 +26,6 @@ export const scenes = [
     Maze,
     Pong,
     gameEnd,
+    SpyGame,
     ZebraCatcher
 ];