diff --git a/src/MenuScene.js b/src/MenuScene.js new file mode 100644 index 0000000..dc65692 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index f8b5a9c..8b6a79d 100644 --- a/src/main.js +++ b/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: {