update

Author: coderATP

src/Base.js

@@ -0,0 +1,54 @@
+/**@type {import("../typings/phaser")} */
+
+export class BaseScene extends Phaser.Scene{
+    constructor(key, config){
+        super(key);
+        this.config =  config;
+        this.screenCenter= [this.config.width/2, this.config.height/2];
+        this.lineHeight = 72;
+        this.backButton = null;
+    }
+    
+    createBackButton(){
+        const backButtonPos= [this.config.bottomRight.x-10, this.config.bottomRight.y -10];
+        const backButton= this.add.image(...backButtonPos, 'backButton')
+            .setOrigin(1)
+            .setScale(2)
+            .setInteractive().setDepth(20)
+        backButton.on('pointerup', () =>{
+                this.scene.start('MenuScene');
+        })
+        
+        return backButton;
+    }
+    createMenu(menuItems){
+        const levels = this.registry.get("unlocked_levels")
+        let menuItemPosY= 0;
+        menuItems.forEach(item=>{
+            item.textObject= this.add.text(this.screenCenter[0], this.screenCenter[1]+ menuItemPosY, item.text, {font: '52px Serif'})
+            .setInteractive()
+            .setOrigin(0.5, 1)
+            .setStyle({fill: 'brown'}) 
+            menuItemPosY +=this.lineHeight;
+        })
+    }
+    
+    handleMenuEvents(){
+        this.menuItems.forEach(item=>{
+            //style texts
+          item.textObject.on('pointerover', ()=>{
+                item.textObject.setStyle({fill: 'yellow'});
+            });
+            item.textObject.on('pointerout', ()=>{
+                item.textObject.setStyle({fill: 'brown'});
+            });
+          //move to play scene
+            item.textObject.on('pointerup', ()=>{
+                this.scene.start(item.scene);
+                //destroy game on clicking Exit
+                if(item.text=='Exit')this.game.destroy(true);
+            })
+         })
+        
+    } 
+}

src/Levels.js

@@ -0,0 +1,35 @@
+/**@type {import("../typings/phaser")} */
+import { BaseScene } from "./Base.js";
+
+
+export class LevelScene extends BaseScene {
+    constructor(config) {
+        super('LevelScene', config);
+
+        this.menuItems =  [
+            {scene: "PlayScene", text: "Level 1"},
+            {scene: "PlayScene", text: "Level 2"},
+            ]
+    }
+
+    create() {
+        this.add.image(0, 0, 'bg-other')
+            .setOrigin(0, 0, )
+            .setScale(2.2);
+            
+        this.createMenu(this.menuItems);
+        this.handleMenuEvents()
+        this.createBackButton()
+            .setPosition(this.config.width-10, this.config.height-10)
+    }
+    
+    handleMenuEvents(){
+        super.handleMenuEvents();
+        this.menuItems.forEach((item, index)=>{
+            item.textObject.on("pointerup", ()=>{
+                this.registry.set("level", index+1)
+            })
+        })
+    }
+
+}

src/Menu.js

@@ -0,0 +1,28 @@
+/**@type {import("../typings/phaser")} */
+import { BaseScene } from "./Base.js";
+
+
+export class MenuScene extends BaseScene{
+    constructor(config){
+        super('MenuScene', config);
+
+        this.menuItems=[
+            {scene: 'PlayScene', text: 'Play'},
+            {scene: 'LevelScene', text: 'Levels'},
+            {scene: null, text: 'Exit'},
+       ]
+    }
+    
+    create(){
+        this.add.image(0,0,'bg-other')
+            .setOrigin(0,0,)
+            .setScale(2.2);
+        
+        this.createMenu(this.menuItems);
+        this.handleMenuEvents();
+    }
+
+    update(){
+        
+    }
+}