Creating the main menu

src/MenuScene.js

@@ -0,0 +1,105 @@
+export class MenuScene extends Phaser.Scene {
+
+    constructor() {
+        super({ key: 'MenuScene' });
+    }
+
+    preload() {
+        this.load.spritesheet('jewels', 'assets/jewels.png', {
+            frameWidth: 100,
+            frameHeight: 100
+        });
+
+        this.load.image('menuBackground', 'assets/menuBackground.png');
+        this.load.image('menuLogo', 'assets/menuLogo.png');
+    }
+
+    create() {
+        // Set background image to full screen size
+        const background = this.add.image(0, 0, 'menuBackground');
+        background.setOrigin(0, 0);
+        background.setScale(
+            this.game.config.width / background.width,
+            this.game.config.height / background.height
+        );
+
+        // Create array to store jewel objects
+        this.jewels = [];
+        
+        // Set up timer for spawning jewels
+        this.spawnTimer = this.time.addEvent({
+            delay: Phaser.Math.Between(500, 2000),
+            callback: this.spawnJewel,
+            callbackScope: this,
+            loop: true
+        });
+
+        // Create and animate menu logo
+        this.menuLogo = this.add.image(-300, -300, 'menuLogo');
+        this.menuLogo.setOrigin(0.5, 0.5);
+        
+        // Animate logo flying in from top left corner
+        this.tweens.add({
+            targets: this.menuLogo,
+            x: this.game.config.width / 2,
+            y: 350,
+            scale: .9,
+            duration: 2000,
+            ease: 'Back.out',
+            delay: 500,
+            onComplete: () => {
+                this.tweens.add({
+                    targets: this.menuLogo,
+                    scale: .8,
+                    duration: 2000,
+                    yoyo: true,
+                    repeat: -1
+                });
+            }
+        });
+    }
+
+    update(time, delta) {
+        // Update jewel positions
+        this.jewels.forEach((jewel, index) => {
+            if (jewel.active) {
+                // Apply gravity effect (move upward then downward)
+                jewel.y += jewel.velocityY;
+                jewel.velocityY += 0.5; // Gravity effect
+                jewel.x += jewel.velocityX;
+                
+                // Rotate the jewel
+                jewel.rotation += jewel.rotationSpeed;
+                
+                // Remove jewels that go off screen
+                if (jewel.y > this.game.config.height + 100) {
+                    jewel.active = false;
+                    jewel.setVisible(false);
+                    this.jewels.splice(index, 1);
+                }
+            }
+        });
+    }
+
+    spawnJewel() {
+        // Create a new jewel at random position at bottom of screen
+        const x = Phaser.Math.Between(50, this.game.config.width - 50);
+        const frame = Phaser.Math.Between(0, 4);
+        
+        // Create jewel sprite
+        const jewel = this.add.sprite(x, this.game.config.height + 50, 'jewels', frame);
+        jewel.setScale(0.8); // Make them slightly smaller
+        
+        // Set initial velocity (moving upward)
+        jewel.velocityY = -25; // Initial upward speed
+        jewel.velocityX = Phaser.Math.Between(-2, 2);
+        jewel.rotationSpeed = Phaser.Math.FloatBetween(-0.1, 0.1); // Random rotation speed
+        jewel.active = true;
+        
+        // Add to jewels array
+        this.jewels.push(jewel);
+        
+        // Set next spawn timer
+        this.spawnTimer.delay = Phaser.Math.Between(500, 2000);
+    }
+}

src/main.js

@@ -1,3 +1,4 @@
+import { MenuScene } from './MenuScene.js';
 import { GameScene } from './GameScene.js';
 
 const GAME_CONFIG = {
@@ -12,6 +13,7 @@ const GAME_CONFIG = {
     parent: 'game-container',
     backgroundColor: '#2c3e50',
     scene: [
+        MenuScene,
         GameScene
     ],
     physics: {