class MainMenu extends Phaser.Scene { constructor() { super('MainMenu'); } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/cosmo.jpg?07Vz'); this.load.audio('menuTheme', 'https://play.rosebud.ai/assets/Cosmic Defenders (1).mp3?JSHy'); this.load.image('particle', 'https://play.rosebud.ai/assets/circle.png?AGB1'); } create() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; const centerX = width / 2; const centerY = height / 2; this.cameras.main.fadeIn(1000, 0, 0, 0); // Stop any existing music if (this.menuTheme && this.menuTheme.isPlaying) { this.menuTheme.stop(); } // Create a new audio instance and start playing this.menuTheme = this.sound.add('menuTheme', { loop: true, volume: 0.5 // Reduce the volume to 50% }); this.menuTheme.play(); // Create a space background with stars this.createSpaceBackground(width, height); // Create a container for menu elements this.menuContainer = this.add.container(0, 0); this.createTitle(centerX, centerY, width, height); this.createHighScore(centerX, centerY, width, height); this.createButtons(centerX, centerY, width, height); this.createProfileButton(); // Add a pulsating glow effect to the menu container this.tweens.add({ targets: this.menuContainer, alpha: 0.8, duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } createSpaceBackground(width, height) { // Add a dark background this.add.rectangle(0, 0, width, height, 0x000000).setOrigin(0); // Create stars const starCount = Math.floor(width * height / 6000); for (let i = 0; i < starCount; i++) { const x = Phaser.Math.Between(0, width); const y = Phaser.Math.Between(0, height); const size = Phaser.Math.Between(1, 3); const alpha = Phaser.Math.FloatBetween(0.3, 1); const star = this.add.circle(x, y, size, 0xffffff, alpha); // Add twinkling effect this.tweens.add({ targets: star, alpha: 0, duration: Phaser.Math.Between(1000, 3000), repeat: -1, yoyo: true, ease: 'Sine.easeInOut' }); } } createTitle(centerX, centerY, width, height) { const title = this.add.text(centerX, -50, 'COSMIC DEFENDER', { fontSize: Math.floor(height / 10) + 'px', fontFamily: 'Arial', fontStyle: 'bold', fill: '#ffffff', stroke: '#4444aa', strokeThickness: Math.floor(height / 75) }).setOrigin(0.5); // Add glow effect title.setScrollFactor(0); this.tweens.add({ targets: title, alpha: 0.8, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 1000 }); // Animate title entrance this.tweens.add({ targets: title, y: centerY - height / 3, duration: 1500, ease: 'Sine.easeInOut' // This will make the bounce smoother }); // Add floating animation this.tweens.add({ targets: title, y: centerY - height / 3 + 5, duration: 2000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', delay: 1500 }); this.menuContainer.add(title); } createSpaceBackground() { // Add a dark background this.add.rectangle(0, 0, this.sys.game.config.width, this.sys.game.config.height, 0x000000).setOrigin(0); // Create stars for (let i = 0; i < 100; i++) { const x = Phaser.Math.Between(0, this.sys.game.config.width); const y = Phaser.Math.Between(0, this.sys.game.config.height); const size = Phaser.Math.Between(1, 3); const alpha = Phaser.Math.FloatBetween(0.3, 1); const star = this.add.circle(x, y, size, 0xffffff, alpha); // Add twinkling effect this.tweens.add({ targets: star, alpha: 0, duration: Phaser.Math.Between(1000, 3000), repeat: -1, yoyo: true, ease: 'Sine.easeInOut' }); } } createTitle(centerX, centerY) { const title = this.add.text(centerX, -50, 'COSMIC DEFENDER', { fontSize: '64px', fontFamily: 'Arial', fontStyle: 'bold', fill: '#ffffff', stroke: '#4444aa', strokeThickness: 8 }).setOrigin(0.5); // Add glow effect title.setScrollFactor(0); this.tweens.add({ targets: title, alpha: 0.8, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 1000 }); // Animate title entrance this.tweens.add({ targets: title, y: centerY - 200, duration: 1500, ease: 'Bounce.easeOut' }); // Add floating animation this.tweens.add({ targets: title, y: centerY - 195, duration: 2000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', delay: 1500 }); } createHighScore(centerX, centerY) { const highScore = localStorage.getItem('cosmicDefender_highScore') || 0; const highScoreText = this.add.text(centerX, centerY - 180, `Highest Score: ${highScore}`, { fontSize: '28px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0.5).setAlpha(0); this.tweens.add({ targets: highScoreText, alpha: 1, duration: 1000, ease: 'Linear' }); // Add player name input below high score this.createPlayerNameInput(centerX, centerY - 130); } createPlayerNameInput(centerX, centerY) { const playerName = localStorage.getItem('playerName') || 'Anonymous'; const playerNameText = this.add.text(centerX, centerY, playerName, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(0.5); const buttonWidth = 60; // Smaller fixed width for the button const buttonHeight = 30; // Smaller fixed height for the button const buttonX = centerX + playerNameText.width / 2 + buttonWidth / 2 + 10; // Position right next to the text const editButton = this.add.rectangle(buttonX, centerY, buttonWidth, buttonHeight, 0x4444aa) .setInteractive(); const editButtonText = this.add.text(buttonX, centerY, 'Edit', { fontSize: '16px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0.5); this.handlePlayerNameEditing(playerNameText, editButton, editButtonText, playerName); } // Remove this entire method handlePlayerNameEditing(playerNameText, editButton, editButtonText, playerName) { let isEditing = false; let inputText = ''; editButton.on('pointerdown', () => { isEditing = !isEditing; inputText = isEditing ? playerName : ''; playerNameText.setText(isEditing ? inputText + '|' : inputText); editButtonText.setText(isEditing ? 'Save' : 'Edit'); // Adjust button width based on text const newWidth = editButtonText.width + 20; editButton.setSize(newWidth, editButton.height); editButton.x = playerNameText.x + playerNameText.width / 2 + newWidth / 2 + 10; editButtonText.x = editButton.x; }); this.input.keyboard.on('keydown', (event) => { if (isEditing) { if (event.keyCode === 8 && inputText.length > 0) { // Backspace key inputText = inputText.slice(0, -1); } else if (event.keyCode === 13) { // Enter key isEditing = false; inputText = inputText.trim() || playerName; // Trim input and check if empty localStorage.setItem('playerName', inputText); // Save trimmed name playerNameText.setText(inputText); editButtonText.setText('Edit'); // Readjust button width const newWidth = editButtonText.width + 20; editButton.setSize(newWidth, editButton.height); editButton.x = playerNameText.x + playerNameText.width / 2 + newWidth / 2 + 10; editButtonText.x = editButton.x; } else if (event.key.length === 1) { // Add characters to input inputText += event.key; } playerNameText.setText(inputText + '|'); } }); } createButtons(centerX, centerY) { const buttonConfig = [{ text: 'PLAY', action: this.startSinglePlayer.bind(this) }, { text: 'SHOP', action: this.openShop.bind(this) }, { text: 'LEADERBOARD', action: this.showLeaderboard.bind(this) }, { text: 'CAMPAIGN', action: this.openCampaign.bind(this), comingSoon: true }, { text: 'SETTINGS', action: this.openSettings.bind(this) }, { text: 'FEEDBACK', action: this.openFeedback.bind(this) }]; const width = this.sys.game.config.width; const height = this.sys.game.config.height; const buttonWidth = 208; // Width of CustomButton const buttonHeight = 48; // Height of CustomButton const buttonSpacing = 20; // Spacing between buttons const buttonsPerColumn = 3; const columns = Math.ceil(buttonConfig.length / buttonsPerColumn); const totalButtonWidth = columns * buttonWidth + (columns - 1) * buttonSpacing; let scale = 1; if (totalButtonWidth > width * 0.9) { // If buttons exceed 90% of screen width scale = (width * 0.9) / totalButtonWidth; } const scaledTotalWidth = totalButtonWidth * scale; let startX = centerX - scaledTotalWidth / 2 + (buttonWidth * scale / 2); let startY = centerY + 50; // Moved the buttons 50 pixels down from the center buttonConfig.forEach((config, index) => { const column = Math.floor(index / buttonsPerColumn); const row = index % buttonsPerColumn; const x = startX + column * ((buttonWidth + buttonSpacing) * scale); const y = startY + row * ((buttonHeight + buttonSpacing) * scale); const button = new CustomButton(this, x, y, config.text); button.setScale(scale); button.on('click', config.action); this.add.existing(button); this.menuContainer.add(button); if (config.comingSoon) { const comingSoonText = this.add.text(x, y + (buttonHeight * scale / 2) + 5, 'Coming Soon', { fontSize: '16px', fontFamily: 'Arial', color: '#FFD700', stroke: '#000000', strokeThickness: 2 }).setOrigin(0.5, 0); comingSoonText.setVisible(false); this.menuContainer.add(comingSoonText); button.on('pointerover', () => { comingSoonText.setVisible(true); }); button.on('pointerout', () => { comingSoonText.setVisible(false); }); } this.tweens.add({ targets: button, alpha: { from: 0, to: 1 }, x: { from: x - 100, to: x }, ease: 'Power2', duration: 500, delay: column * 200 + row * 100 }); }); } createGalaxyGradient(width, height) { try { const texture = this.textures.createCanvas('galaxyGradient', width, height); const context = texture.getContext(); if (context) { const gradient = context.createLinearGradient(0, 0, width, height); gradient.addColorStop(0, '#1e3a8a'); gradient.addColorStop(0.5, '#3730a3'); gradient.addColorStop(1, '#5b21b6'); context.fillStyle = gradient; context.fillRect(0, 0, width, height); texture.refresh(); return texture; } else { console.warn('Failed to get canvas context. Using fallback color.'); return null; } } catch (error) { console.error('Error creating galaxy gradient:', error); return null; } } createButton(x, y, text, action, useGradient = true) { const buttonWidth = 220; const buttonHeight = 60; let button; if (useGradient) { const gradientTexture = this.createGalaxyGradient(buttonWidth, buttonHeight); if (gradientTexture) { button = this.add.image(x, y, gradientTexture).setInteractive(); } else { button = this.add.rectangle(x, y, buttonWidth, buttonHeight, 0x4444aa) .setInteractive(); } } else { button = this.add.rectangle(x, y, buttonWidth, buttonHeight, 0x000000, 0) .setInteractive(); } const buttonText = this.add.text(x, y, text, { fontSize: '28px', fontFamily: 'Arial, sans-serif', fontWeight: 'bold', fill: '#ffffff' }).setOrigin(0.5); this.setupButtonInteractions(button, buttonText, action); return [button, buttonText]; } setupButtonInteractions(button, buttonText, action) { button.on('pointerover', () => { if (button.type === 'Image') { button.setTint(0xdddddd); } else { button.setFillStyle(0x6666cc); } buttonText.setScale(1.05); }) .on('pointerout', () => { if (button.type === 'Image') { button.clearTint(); } else { button.setFillStyle(0x4444aa); } buttonText.setScale(1); }) .on('pointerdown', () => { if (button.type === 'Image') { button.setTint(0xaaaaaa); } else { button.setFillStyle(0x2222aa); } this.tweens.add({ targets: buttonText, scale: 0.95, duration: 50, yoyo: true, onComplete: action }); }); } animateButton(button, buttonText, index) { const buttonGroup = this.add.group([button, buttonText]); this.tweens.add({ targets: buttonGroup.getChildren(), scaleX: { from: 0, to: 1 }, scaleY: { from: 0, to: 1 }, alpha: { from: 0, to: 1 }, duration: 300, ease: 'Back.out', delay: index * 100 }); } startSinglePlayer() { const playerName = localStorage.getItem('playerName') || 'Anonymous'; this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.stopMusic(); this.scene.start('DifficultyScene', { playerName, menuMusic: this.menuTheme }); }); } showLeaderboard() { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.stopMusic(); this.scene.start('LeaderboardScene'); }); } openShop() { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.stopMusic(); this.scene.start('ShopScene'); }); } stopMusic() { if (this.menuTheme && this.menuTheme.isPlaying) { this.menuTheme.stop(); } } openCampaign() { console.log("Campaign opened!"); this.tweens.add({ targets: this.menuContainer, // Hide the whole menu container alpha: 0, duration: 500, onComplete: () => { this.menuContainer.setVisible(false); // Hides the buttons completely this.scene.launch('CampaignScene'); this.scene.moveAbove('MainMenu', 'CampaignScene'); } }); } openSettings() { this.scene.start('SettingsScene'); } openFeedback() { this.scene.start('FeedbackScene'); } createProfileButton() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; // Create a container for the button and 'Coming Soon' text const buttonContainer = this.add.container(20, height - 20); // Create a text-based button const buttonText = this.add.text(0, 0, 'PROFILE', { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff', backgroundColor: '#4444aa', padding: { left: 10, right: 10, top: 5, bottom: 5 } }).setOrigin(0, 1).setInteractive(); // Create 'Coming Soon' text const comingSoonText = this.add.text(buttonText.width / 2, -buttonText.height - 5, 'Work in Progress', { fontSize: '16px', fontFamily: 'Arial', fill: '#ffff00', backgroundColor: '#000000', padding: { left: 5, right: 5, top: 2, bottom: 2 } }).setOrigin(0.5, 1); // Add both texts to the container buttonContainer.add([buttonText, comingSoonText]); // Initially hide the 'Coming Soon' text comingSoonText.setVisible(false); // Add hover effects buttonText.on('pointerover', () => { buttonText.setStyle({ fill: '#ffff00' }); comingSoonText.setVisible(true); }); buttonText.on('pointerout', () => { buttonText.setStyle({ fill: '#ffffff' }); comingSoonText.setVisible(false); }); // Add click event buttonText.on('pointerdown', () => { this.showProfileMenu(); }); this.menuContainer.add(buttonContainer); } // Function to display the profile menu showProfileMenu() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; // Create a container for all profile menu elements this.profileContainer = this.add.container(); // Create a semi-transparent background for the profile menu const profileBackground = this.add.rectangle(width / 2, height / 2, width * 0.8, height * 0.8, 0x000000, 0.8) .setOrigin(0.5); this.profileContainer.add(profileBackground); // Defender icon (Placeholder for now, replace 'defenderIcon' with your asset) const defenderIcon = this.add.image(width * 0.1, height * 0.2, 'particle') .setOrigin(0.5) .setDisplaySize(100, 100); this.profileContainer.add(defenderIcon); // Player name const playerName = localStorage.getItem('playerName') || 'Anonymous'; const playerNameText = this.add.text(width * 0.3, height * 0.15, `Player: ${playerName}`, { fontSize: '28px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0, 0.5); this.profileContainer.add(playerNameText); // Highest score const highScore = localStorage.getItem('cosmicDefender_highScore') || 0; const highScoreText = this.add.text(width * 0.3, height * 0.25, `Highest Score: ${highScore}`, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0, 0.5); this.profileContainer.add(highScoreText); // Player stats const playerStats = [ `Enemies Killed: 120`, `Levels Completed: 5`, `Time Played: 1h 20m` ]; let startY = height * 0.4; playerStats.forEach((stat, index) => { const statText = this.add.text(width * 0.5, startY + index * 40, stat, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0.5); this.profileContainer.add(statText); }); // Add close button const closeButton = this.add.text(width / 2, height * 0.9, 'Close', { fontSize: '28px', fontFamily: 'Arial', fill: '#ff0000', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive(); this.profileContainer.add(closeButton); closeButton.on('pointerdown', this.closeProfileMenu, this); } closeProfileMenu() { if (this.profileContainer) { this.profileContainer.destroy(); this.profileContainer = null; } } // This closing brace separates the showProfileMenu method from the following class. } class SettingsScene extends Phaser.Scene { constructor() { super('SettingsScene'); } create() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; const centerX = width / 2; const centerY = height / 2; // Add background this.add.rectangle(0, 0, width, height, 0x000000, 0.8).setOrigin(0); // Add title this.add.text(centerX, 50, 'SETTINGS', { fontSize: '36px', fontFamily: 'Arial', color: '#ffffff' }).setOrigin(0.5); // Add mobile mode toggle const mobileMode = localStorage.getItem('mobileMode') === 'true'; this.mobileButton = this.add.text(centerX, centerY - 50, `Mobile Mode: ${mobileMode ? 'ON' : 'OFF'}`, { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: mobileMode ? '#00ff00' : '#ff0000', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive(); this.mobileButton.on('pointerdown', this.toggleMobileMode, this); // Add back button const backButton = this.add.text(centerX, height - 50, 'Back', { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive(); backButton.on('pointerdown', () => { this.scene.start('MainMenu'); }); } toggleMobileMode() { const currentMode = localStorage.getItem('mobileMode') === 'true'; const newMode = !currentMode; localStorage.setItem('mobileMode', newMode); this.mobileButton.setText(`Mobile Mode: ${newMode ? 'ON' : 'OFF'}`); this.mobileButton.setBackgroundColor(newMode ? '#00ff00' : '#ff0000'); } } class ShopScene extends Phaser.Scene { constructor() { super('ShopScene'); this.currentDefenderIndex = 0; this.defenders = [{ color: 0xFFFFFF, name: 'White', price: 0 }, { color: 0xFF0000, name: 'Red', price: 100 }, { color: 0x00FF00, name: 'Green', price: 100 }, { color: 0x0000FF, name: 'Blue', price: 100 }]; this.music = null; } preload() { this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'); this.load.audio('shop1', 'https://play.rosebud.ai/assets/Shop.mp3?YSzu'); this.load.audio('shop2', 'https://play.rosebud.ai/assets/Shop2.mp3?SIQ9'); } create() { this.cameras.main.fadeIn(500, 0, 0, 0); // Stop any existing music if (this.music) { this.music.stop(); } // Create new audio instances this.music1 = this.sound.add('shop1', { loop: false }); this.music2 = this.sound.add('shop2', { loop: false }); this.currentTrack = this.music1; this.playNextTrack(); WebFont.load({ google: { families: ['Orbitron'] }, active: () => { this.setupShopUI(); } }); } playNextTrack() { this.currentTrack.play(); this.currentTrack.once('complete', () => { this.currentTrack = (this.currentTrack === this.music1) ? this.music2 : this.music1; this.playNextTrack(); }); } setupShopUI() { const centerX = this.sys.game.config.width / 2; const centerY = this.sys.game.config.height / 2; // Black background this.add.rectangle(0, 0, this.sys.game.config.width, this.sys.game.config.height, 0x000000).setOrigin(0); // Title this.add.text(centerX, 50, 'DEFENDER SHOP', { fontFamily: 'Orbitron, Arial, sans-serif', fontSize: '36px', fontStyle: 'bold', color: '#ffffff', align: 'center', stroke: '#4444aa', strokeThickness: 6 }).setOrigin(0.5); // Defender in the middle this.currentDefender = this.add.circle(centerX, centerY, 20, this.defenders[this.currentDefenderIndex].color); // Arrows this.leftArrow = this.add.text(50, centerY, '<', { fontFamily: 'Orbitron', fontSize: '48px', color: '#fff' }).setInteractive().on('pointerdown', () => this.changeDefender(-1)); this.rightArrow = this.add.text(this.sys.game.config.width - 50, centerY, '>', { fontFamily: 'Orbitron', fontSize: '48px', color: '#fff' }).setOrigin(1, 0.5).setInteractive().on('pointerdown', () => this.changeDefender(1)); // Color name text this.colorText = this.add.text(centerX, centerY - 50, this.defenders[this.currentDefenderIndex].name, { fontFamily: 'Orbitron', fontSize: '28px', color: '#fff', align: 'center' }).setOrigin(0.5); // Buy button this.buyButton = this.add.text(centerX, centerY + 50, 'Buy', { fontFamily: 'Orbitron', fontSize: '24px', backgroundColor: Phaser.Display.Color.IntegerToColor(this.defenders[this.currentDefenderIndex].color).rgba, padding: { x: 20, y: 3 } }).setOrigin(0.5).setInteractive().on('pointerdown', () => this.buyDefender()); // Back button this.add.text(centerX, this.sys.game.config.height - 50, 'Back to Menu', { fontFamily: 'Orbitron', fontSize: '24px', color: '#fff' }).setOrigin(0.5).setInteractive().on('pointerdown', () => { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.stopMusic(); this.scene.start('MainMenu'); }); }); this.updateBuyButton(); } stopMusic() { if (this.music1) { this.music1.stop(); this.music1.removeAllListeners(); } if (this.music2) { this.music2.stop(); this.music2.removeAllListeners(); } this.currentTrack = null; } changeDefender(direction) { const newIndex = (this.currentDefenderIndex + direction + this.defenders.length) % this.defenders.length; const oldDefender = this.currentDefender; const newDefender = this.add.circle( direction > 0 ? this.sys.game.config.width + 20 : -20, this.sys.game.config.height / 2, 20, this.defenders[newIndex].color ); this.tweens.add({ targets: oldDefender, x: direction > 0 ? -20 : this.sys.game.config.width + 20, duration: 500, ease: 'Power2', onComplete: () => oldDefender.destroy() }); this.tweens.add({ targets: newDefender, x: this.sys.game.config.width / 2, duration: 500, ease: 'Power2' }); this.currentDefenderIndex = newIndex; this.currentDefender = newDefender; this.colorText.setText(this.defenders[this.currentDefenderIndex].name); this.updateBuyButton(); } buyDefender() { console.log(`Bought ${this.defenders[this.currentDefenderIndex].name} defender`); } updateBuyButton() { const defender = this.defenders[this.currentDefenderIndex]; const bgColor = Phaser.Display.Color.IntegerToColor(defender.color); this.buyButton.setBackgroundColor(bgColor.rgba); // Set text color to black for all buttons this.buyButton.setColor('#000000'); if (defender.price === 0) { this.buyButton.setText('Equipped'); this.buyButton.setInteractive(false); } else { this.buyButton.setText(`Buy: ${defender.price}`); this.buyButton.setInteractive(); } } } class DifficultyScene extends Phaser.Scene { constructor() { super('DifficultyScene'); this.difficultyMusic = null; } preload() { this.load.audio('difficultyMenu1', 'https://play.rosebud.ai/assets/DifficultyMenu.mp3?foFA'); this.load.audio('difficultyMenu2', 'https://play.rosebud.ai/assets/DifficultyMenu 2.mp3?Fx7c'); } init(data) { this.playerName = data.playerName; this.menuMusic = data.menuMusic; } create() { this.cameras.main.fadeIn(500, 0, 0, 0); // Stop the menu music if it's still playing if (this.menuMusic && this.menuMusic.isPlaying) { this.menuMusic.stop(); } // Start playing the difficulty menu music this.playDifficultyMusic(); const centerX = this.sys.game.config.width / 2; const centerY = this.sys.game.config.height / 2; const title = this.add.text(centerX, -50, 'Choose Difficulty', { fontSize: '32px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0.5); this.tweens.add({ targets: title, y: centerY - 100, duration: 1000, ease: 'Bounce' }); const createButton = (y, text, difficulty) => { const button = this.add.rectangle(centerX, y, 200, 50, 0x4444aa, 0.8) .setInteractive() .on('pointerover', () => button.setFillStyle(0x6666cc)) .on('pointerout', () => button.setFillStyle(0x4444aa)) .on('pointerdown', () => { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.stopDifficultyMusic(); this.scene.start('CutsceneScene', { difficulty, playerName: this.playerName }); }); }); const buttonText = this.add.text(centerX, y, text, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0.5); return [button, buttonText]; }; const [easyButton, easyText] = createButton(centerY, 'Easy', 'easy'); const [normalButton, normalText] = createButton(centerY + 70, 'Normal', 'normal'); const [hardButton, hardText] = createButton(centerY + 140, 'Hard', 'hard'); const backButton = this.add.text(centerX, centerY + 210, 'Back', { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0.5).setInteractive(); backButton.on('pointerdown', () => { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.scene.start('MainMenu'); }); }); // Add slide-in animations for buttons this.tweens.add({ targets: [easyButton, easyText], x: centerX, duration: 500, ease: 'Back', from: { x: -200 } }); this.tweens.add({ targets: [normalButton, normalText], x: centerX, duration: 500, ease: 'Back', from: { x: this.sys.game.config.width + 200 }, delay: 100 }); this.tweens.add({ targets: [hardButton, hardText], x: centerX, duration: 500, ease: 'Back', from: { x: -200 }, delay: 200 }); this.tweens.add({ targets: backButton, y: centerY + 210, duration: 500, ease: 'Back', from: { y: this.sys.game.config.height + 50 }, delay: 300 }); } playDifficultyMusic() { if (this.difficultyMusic) { this.difficultyMusic.stop(); } // Randomly choose between the two tracks const trackKey = Math.random() < 0.5 ? 'difficultyMenu1' : 'difficultyMenu2'; this.difficultyMusic = this.sound.add(trackKey, { loop: true, volume: 0.7 }); this.difficultyMusic.play(); } stopDifficultyMusic() { if (this.difficultyMusic) { this.difficultyMusic.stop(); this.difficultyMusic = null; } } } class GameScene extends Phaser.Scene { constructor() { super('GameScene'); this.circle = null; this.guard = null; this.enemies = null; this.score = 0; this.scoreBar = null; this.healthBar = null; this.health = 100; this.isGuardPowered = false; this.powerUpTimer = null; this.difficulty = 'normal'; this.level = 1; this.notesDestroyed = 0; this.survivalTime = 0; this.playerName = ''; this.gameMusic = null; this.beatIndex = 0; this.isMobile = false; this.graphicsQuality = 'high'; this.soundVolume = 1; this.controlSensitivity = 1; this.backgroundParticles = null; this.noteTypes = null; } init(data) { this.difficulty = data.difficulty || 'normal'; this.playerName = data.playerName || 'Anonymous'; this.health = 100; this.score = 0; this.level = 1; this.notesDestroyed = 0; this.survivalTime = 0; this.beatIndex = 0; this.isMobile = localStorage.getItem('mobileMode') === 'true'; this.mobileControls = null; } preload() { this.load.image('note', 'https://play.rosebud.ai/assets/circle.png?AGB1'); this.load.image('background', 'https://play.rosebud.ai/assets/cosmo.jpg?07Vz'); this.load.audio('gameMusic', 'https://play.rosebud.ai/assets/Cosmic Defenders.mp3?VPQK'); this.load.image('particle', 'https://play.rosebud.ai/assets/circle.png?AGB1'); this.load.image('speedstar', 'https://play.rosebud.ai/assets/tri.png?avCN'); this.load.image('explosion', 'https://play.rosebud.ai/assets/tri.png?avCN'); } create() { this.cameras.main.fadeIn(500, 0, 0, 0); // Play game music const musicVolume = this.game.registry.get('musicVolume') || 0.5; this.gameMusic = this.sound.add('gameMusic', { loop: true, volume: musicVolume }); this.gameMusic.play(); // Create mobile controls this.createMobileControls(); // Set up the background const background = this.add.image(0, 0, 'background').setOrigin(0, 0); const scaleX = this.sys.game.config.width / background.width; const scaleY = this.sys.game.config.height / background.height; const scale = Math.max(scaleX, scaleY); background.setScale(scale).setScrollFactor(0); const centerX = this.sys.game.config.width / 2; const centerY = this.sys.game.config.height / 2; // Set beat duration based on difficulty switch (this.difficulty) { case 'easy': this.beatDuration = 600; break; case 'normal': this.beatDuration = 500; break; case 'hard': this.beatDuration = 400; // Faster tempo for hard difficulty break; default: this.beatDuration = 500; } const playerRadius = 20; this.circle = this.add.circle(centerX, centerY, playerRadius, 0xFFFFFF); this.circle.setInteractive(new Phaser.Geom.Circle(0, 0, playerRadius), Phaser.Geom.Circle.Contains); // Store the player size for reference this.playerSize = playerRadius * 2; const guardRadius = playerRadius + 30; const guardArcLength = 90; this.guard = this.add.arc(centerX, centerY, guardRadius, -guardArcLength / 2, guardArcLength / 2, false, 0xFFFFFF); this.guard.setStrokeStyle(2, 0xFFFFFF); this.input.on('pointermove', (pointer) => { const angle = Phaser.Math.Angle.Between(centerX, centerY, pointer.x, pointer.y); this.guard.rotation = angle; }); this.enemies = this.physics.add.group(); // Set up beat-based note spawning this.beatDuration = 500; // Adjust this value to match your song's tempo (in milliseconds) this.time.addEvent({ delay: this.beatDuration, callback: this.onBeat, callbackScope: this, loop: true }); // UI Container const uiContainer = this.add.container(10, 10); // Score this.scoreText = this.add.text(0, 0, 'Score: 0', { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }); uiContainer.add(this.scoreText); // Health bar const healthBarWidth = 200; const healthBarHeight = 20; this.healthBarBackground = this.add.rectangle(0, 40, healthBarWidth, healthBarHeight, 0x808080); this.healthBar = this.add.rectangle(0, 40, healthBarWidth, healthBarHeight, 0x00ff00); this.healthBarOutline = this.add.rectangle(0, 40, healthBarWidth, healthBarHeight, 0xffffff, 0); this.healthBarOutline.setStrokeStyle(2, 0xffffff); [this.healthBarBackground, this.healthBar, this.healthBarOutline].forEach(el => { el.setOrigin(0, 0); uiContainer.add(el); }); this.healthText = this.add.text(0, 70, 'Health: 100', { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }); uiContainer.add(this.healthText); this.difficultyText = this.add.text(0, 100, `Difficulty: ${this.difficulty}`, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }); uiContainer.add(this.difficultyText); // Add home button const homeButton = this.add.text(this.sys.game.config.width - 10, 10, 'Home', { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(1, 0).setInteractive(); homeButton.on('pointerdown', () => { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.gameMusic.stop(); this.scene.start('MainMenu'); }); }); // Add level text this.levelText = this.add.text(this.sys.game.config.width - 10, 40, `Level: ${this.level}`, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(1, 0); // Timer for survival time this.time.addEvent({ delay: 1000, callback: this.updateSurvivalTime, callbackScope: this, loop: true }); // Add fade-in animation for UI elements this.tweens.add({ targets: [this.scoreText, this.healthBarBackground, this.healthBar, this.healthBarOutline, this.healthText, this.difficultyText, homeButton, this.levelText], alpha: { from: 0, to: 1 }, duration: 1000, ease: 'Linear' }); } createMobileControls() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; this.mobileControls = this.add.container(0, 0); const joystickBase = this.add.circle(100, height - 100, 50, 0x888888, 0.5); const joystick = this.add.circle(100, height - 100, 25, 0xcccccc, 0.8); joystickBase.setInteractive(); joystickBase.on('pointermove', (pointer) => { const dx = pointer.x - joystickBase.x; const dy = pointer.y - joystickBase.y; const angle = Math.atan2(dy, dx); this.guard.rotation = angle; const distance = Math.min(50, Math.sqrt(dx * dx + dy * dy)); joystick.x = joystickBase.x + Math.cos(angle) * distance; joystick.y = joystickBase.y + Math.sin(angle) * distance; }); joystickBase.on('pointerup', () => { joystick.x = joystickBase.x; joystick.y = joystickBase.y; }); this.mobileControls.add([joystickBase, joystick]); this.mobileControls.setVisible(this.isMobile); } update() { this.enemies.getChildren().forEach(enemy => { if (Phaser.Geom.Intersects.CircleToCircle( new Phaser.Geom.Circle(enemy.x, enemy.y, enemy.displayWidth / 2), new Phaser.Geom.Circle(this.circle.x, this.circle.y, this.circle.radius) )) { this.enemyReachedCircle(enemy); } // Update enemy rotation to face the defender const angle = Phaser.Math.Angle.Between(enemy.x, enemy.y, this.circle.x, this.circle.y); enemy.setRotation(angle + Math.PI / 2); }); this.enemies.getChildren().forEach(enemy => { if (this.checkGuardEnemyCollision(enemy, this.guard)) { this.enemyHitGuard(enemy); } }); // Update health bar const healthBarWidth = 200; this.healthBar.width = (this.health / 100) * healthBarWidth; this.healthText.setText(`Health: ${this.health}`); // Check for level up if (this.score >= this.level * 100) { this.levelUp(); } } onBeat() { let beatPattern; let enemiesToSpawn; switch (this.difficulty) { case 'easy': beatPattern = [1, 0, 1, 0, 1, 0, 0, 1]; enemiesToSpawn = 1; break; case 'normal': beatPattern = [1, 0, 1, 1, 1, 0, 1, 1]; enemiesToSpawn = 1; break; case 'hard': beatPattern = [1, 1, 1, 1, 1, 1, 1, 1]; enemiesToSpawn = 2; break; default: beatPattern = [1, 0, 1, 0, 1, 1, 0, 1]; enemiesToSpawn = 1; } if (beatPattern[this.beatIndex]) { for (let i = 0; i < enemiesToSpawn; i++) { this.spawnEnemy(); } } this.beatIndex = (this.beatIndex + 1) % beatPattern.length; } getSpawnInterval() { switch (this.difficulty) { case 'easy': return 1500; case 'normal': return 1000; case 'hard': return 400; // Decreased spawn interval for hard difficulty default: return 1000; } } getEnemySpeed() { const baseSpeed = 100; // Adjust this value to match your desired enemy speed switch (this.difficulty) { case 'easy': return baseSpeed * 0.7; case 'normal': return baseSpeed; case 'hard': return baseSpeed * 1.5; default: return baseSpeed; } } spawnEnemy() { const { width, height } = this.sys.game.config; let x, y; const side = Phaser.Math.Between(0, 3); switch (side) { case 0: x = Phaser.Math.Between(0, width); y = 0; break; case 1: x = width; y = Phaser.Math.Between(0, height); break; case 2: x = Phaser.Math.Between(0, width); y = height; break; case 3: x = 0; y = Phaser.Math.Between(0, height); break; } const enemy = this.enemies.create(x, y, 'note'); enemy.setDisplaySize(this.circle.displayWidth, this.circle.displayHeight); enemy.setTint(0xFFFFFF); const angle = Phaser.Math.Angle.Between(x, y, this.circle.x, this.circle.y); enemy.setRotation(angle + Math.PI / 2); // Rotate to face the defender const speed = this.getEnemySpeed(); const velocity = this.physics.velocityFromAngle(Phaser.Math.RadToDeg(angle), speed); enemy.setVelocity(velocity.x, velocity.y); } enemyHitGuard(enemy) { this.createExplosionEffect(enemy.x, enemy.y); enemy.destroy(); this.enemiesDestroyed++; this.incrementScore(1); } createExplosionEffect(x, y) { // Get the size of the enemy (assuming it's the same as the player size) const enemySize = this.playerSize; const particles = this.add.particles('note'); const emitter = particles.createEmitter({ x: x, y: y, speed: { min: enemySize / 8, max: enemySize / 4 }, scale: { start: enemySize / 400, end: 0 }, rotate: { min: 0, max: 360 }, angle: { min: 0, max: 360 }, blendMode: 'ADD', lifespan: { min: 100, max: 200 }, tint: [0x8080ff, 0xffffff], quantity: Math.floor(enemySize / 8) }); emitter.explode(); this.tweens.add({ targets: particles, alpha: 0, duration: 200, ease: 'Power2', onComplete: () => { particles.destroy(); } }); } enemyReachedCircle(enemy) { enemy.destroy(); this.decreaseHealth(10); if (this.health <= 0) { this.updateLeaderboard(); this.resetGame(); } } resetGame() { // Update leaderboard this.updateLeaderboard(); // Fade out the scene this.cameras.main.fadeOut(1000, 0, 0, 0); // Transition to MainMenu after fade out this.time.delayedCall(1000, () => { if (this.gameMusic) { this.gameMusic.stop(); } this.scene.start('MainMenu'); }); } createSplashEffect(x, y, color) { const particles = this.add.particles('note'); const emitter = particles.createEmitter({ x: x, y: y, speed: { min: 30, max: 60 }, scale: { start: 0.1, end: 0 }, angle: { min: 0, max: 360 }, lifespan: 150, quantity: 1 }); emitter.setTint(color); emitter.explode(4); this.time.delayedCall(150, () => { particles.destroy(); }); } checkGuardEnemyCollision(enemy, guard) { const enemyCircle = new Phaser.Geom.Circle(enemy.x, enemy.y, this.playerSize / 2); const guardCenter = new Phaser.Geom.Point(guard.x, guard.y); const guardStartAngle = guard.startAngle + guard.rotation; const guardEndAngle = guard.endAngle + guard.rotation; // Check if the enemy is within the guard's radius range const distanceToCenter = Phaser.Math.Distance.Between(enemy.x, enemy.y, guard.x, guard.y); if (distanceToCenter < guard.radius - enemyCircle.radius || distanceToCenter > guard.radius + enemyCircle.radius) { return false; } // Check if the enemy is within the guard's arc let angleToEnemy = Phaser.Math.Angle.Between(guard.x, guard.y, enemy.x, enemy.y); angleToEnemy = Phaser.Math.Angle.Normalize(angleToEnemy); let startAngle = Phaser.Math.Angle.Normalize(guardStartAngle); let endAngle = Phaser.Math.Angle.Normalize(guardEndAngle); if (startAngle > endAngle) { return angleToEnemy >= startAngle || angleToEnemy <= endAngle; } else { return angleToEnemy >= startAngle && angleToEnemy <= endAngle; } } incrementScore(amount) { this.score += amount; this.scoreText.setText(`Score: ${this.score}`); // Update high score const highScore = localStorage.getItem('cosmicDefender_highScore') || 0; if (this.score > highScore) { localStorage.setItem('cosmicDefender_highScore', this.score); } // Add score pop-up animation const scorePopup = this.add.text(this.scoreText.x + 100, this.scoreText.y, `+${amount}`, { fontSize: '20px', fontFamily: 'Arial', fill: '#00ff00' }); this.tweens.add({ targets: scorePopup, y: scorePopup.y - 50, alpha: 0, duration: 1000, onComplete: () => scorePopup.destroy() }); } decreaseHealth(amount) { this.health = Math.max(0, this.health - amount); this.healthText.setText(`Health: ${this.health}`); // Add health decrease animation this.tweens.add({ targets: this.healthBar, width: (this.health / 100) * 200, duration: 200, ease: 'Linear' }); // Add screen shake effect this.cameras.main.shake(200, 0.005); } powerUpGuard() { this.isGuardPowered = true; this.guard.setStrokeStyle(2, 0xff8800); const particles = this.add.particles('note'); const emitter = particles.createEmitter({ follow: this.guard, scale: { start: 0.02, end: 0 }, blendMode: 'ADD', lifespan: 200, tint: 0xff8800 }); this.powerUpTimer = this.time.delayedCall(10000, () => { this.isGuardPowered = false; this.guard.setStrokeStyle(1, 0xFFFFFF); emitter.stop(); particles.destroy(); }, [], this); } levelUp() { this.level++; this.levelText.setText(`Level: ${this.level}`); this.beatDuration *= 0.95; // Increase game speed as level progresses const difficultyPopup = this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height / 2, `Level Up! Difficulty: ${this.difficulty}`, { fontSize: '32px', fontFamily: 'Arial', fill: '#ffff00' }).setOrigin(0.5); this.tweens.add({ targets: difficultyPopup, alpha: 1, duration: 1000, ease: 'Linear', onComplete: () => { this.time.delayedCall(2000, () => { this.tweens.add({ targets: difficultyPopup, alpha: 0, duration: 1000, onComplete: () => difficultyPopup.destroy() }); }); } }); } updateSurvivalTime() { this.survivalTime++; this.checkAchievements(); } checkAchievements() { const achievements = [{ name: 'Survivor', condition: () => this.survivalTime >= 60, message: 'Survived for 1 minute!' }, { name: 'Sharpshooter', condition: () => this.enemiesDestroyed >= 100, message: 'Destroyed 100 enemies!' }, { name: 'Master Defender', condition: () => this.level >= 5, message: 'Reached level 5!' }]; achievements.forEach(achievement => { if (achievement.condition() && !localStorage.getItem(achievement.name)) { localStorage.setItem(achievement.name, 'true'); this.showAchievementPopup(achievement.message); } }); } showAchievementPopup(message) { const popup = this.add.text(this.sys.game.config.width / 2, 100, message, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(0.5).setAlpha(0); this.tweens.add({ targets: popup, alpha: 1, y: 150, duration: 1000, ease: 'Back', onComplete: () => { this.time.delayedCall(2000, () => { this.tweens.add({ targets: popup, alpha: 0, y: 100, duration: 1000, ease: 'Back.easeIn', onComplete: () => popup.destroy() }); }); } }); } updateLeaderboard() { let leaderboard = JSON.parse(localStorage.getItem('cosmicDefender_leaderboard') || '[]'); const playerNameLower = this.playerName.toLowerCase(); const existingEntry = leaderboard.find(entry => entry.name.toLowerCase() === playerNameLower); if (existingEntry) { existingEntry.score = Math.max(this.score, existingEntry.score); } else { leaderboard.push({ name: this.playerName, score: this.score }); } leaderboard = leaderboard.sort((a, b) => b.score - a.score).slice(0, 5); localStorage.setItem('cosmicDefender_leaderboard', JSON.stringify(leaderboard)); } } class LeaderboardScene extends Phaser.Scene { constructor() { super('LeaderboardScene'); this.currentPage = 0; this.entriesPerPage = 5; this.nextButton = null; this.prevButton = null; this.music = null; } preload() { this.load.audio('leaderboard1', 'https://play.rosebud.ai/assets/Leaderboard.mp3?xvQp'); this.load.audio('leaderboard2', 'https://play.rosebud.ai/assets/Leaderboard2.mp3?cqVI'); } create() { try { console.log('LeaderboardScene: create method started'); this.cameras.main.fadeIn(500, 0, 0, 0); const centerX = this.sys.game.config.width / 2; const centerY = this.sys.game.config.height / 2; // Stop any existing music if (this.music) { this.music.stop(); } // Create a new audio instance and start playing this.music = this.sound.add('leaderboard1', { loop: false }); this.playNextTrack(); // Check if 'background' image is loaded if (this.textures.exists('background')) { console.log('LeaderboardScene: Background image exists'); this.add.tileSprite(0, 0, this.sys.game.config.width, this.sys.game.config.height, 'background') .setOrigin(0) .setAlpha(0.5); } else { console.warn('LeaderboardScene: Background image not found, using fallback'); this.cameras.main.setBackgroundColor(0x000000); } // Add a semi-transparent panel for the leaderboard this.add.rectangle(centerX, centerY, 500, 450, 0x000000, 0.7) .setStrokeStyle(2, 0xffffff); const title = this.add.text(centerX, 50, 'COSMIC LEADERBOARD', { fontSize: '36px', fontFamily: 'Arial', fontStyle: 'bold', fill: '#ffffff', align: 'center', stroke: '#4444aa', strokeThickness: 6 }).setOrigin(0.5); this.tweens.add({ targets: title, y: 50, duration: 1000, ease: 'Bounce', from: { y: -50 } }); console.log('LeaderboardScene: Creating buttons'); const createButton = (x, y, text, onClick) => { const button = new CustomButton(this, x, y, text); button.on('click', onClick); return button; }; this.nextButton = createButton(centerX + 100, centerY + 200, 'NEXT', () => { this.currentPage++; this.displayLeaderboardPage(this.currentPage); }); this.prevButton = createButton(centerX - 100, centerY + 200, 'PREVIOUS', () => { this.currentPage = Math.max(0, this.currentPage - 1); this.displayLeaderboardPage(this.currentPage); }); const backButton = createButton(centerX, centerY + 250, 'BACK TO MENU', () => { this.cameras.main.fadeOut(500, 0, 0, 0); this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.stopLeaderboardMusic(); this.scene.start('MainMenu'); }); }); this.add.existing(this.nextButton); this.add.existing(this.prevButton); this.add.existing(backButton); console.log('LeaderboardScene: Displaying leaderboard page'); this.displayLeaderboardPage(this.currentPage); console.log('LeaderboardScene: Updating button states'); this.updateButtonStates(); } catch (error) { console.error('LeaderboardScene: Error in create method', error); } } playLeaderboardMusic() { if (!this.sound.get('leaderboard1') && !this.sound.get('leaderboard2')) { this.music = this.sound.add('leaderboard1', { loop: false }); this.playNextTrack(); } } playNextTrack() { if (this.music.key === 'leaderboard1') { this.music.stop(); this.music = this.sound.add('leaderboard2', { loop: false }); } else { this.music.stop(); this.music = this.sound.add('leaderboard1', { loop: false }); } this.music.play(); this.music.once('complete', () => { this.playNextTrack(); }); } stopLeaderboardMusic() { if (this.music) { this.music.stop(); this.music.removeAllListeners(); } } displayLeaderboardPage(page) { try { console.log('LeaderboardScene: Displaying page', page); const centerX = this.sys.game.config.width / 2; const leaderboardData = JSON.parse(localStorage.getItem('cosmicDefender_leaderboard') || '[]'); console.log('LeaderboardScene: Leaderboard data', leaderboardData); const startIndex = page * this.entriesPerPage; const pageData = leaderboardData.slice(startIndex, startIndex + this.entriesPerPage); this.clearLeaderboardDisplay(); pageData.forEach((entry, index) => { const startY = 120 + index * 60; const rank = startIndex + index + 1; const medal = rank <= 3 ? ['🥇', '🥈', '🥉'][rank - 1] : ''; const color = rank <= 3 ? ['#FFD700', '#C0C0C0', '#CD7F32'][rank - 1] : '#ffffff'; // Rank and Medal this.add.text(centerX - 220, startY, `${rank}. ${medal}`, { fontSize: '24px', fontFamily: 'Arial', fill: color }).setOrigin(0, 0.5); // Player Name this.add.text(centerX - 150, startY, entry.name, { fontSize: '24px', fontFamily: 'Arial', fill: '#ffffff' }).setOrigin(0, 0.5); // Score this.add.text(centerX + 150, startY, entry.score, { fontSize: '24px', fontFamily: 'Arial', fill: color }).setOrigin(1, 0.5); // Add a line separator if (index < pageData.length - 1) { this.add.line(centerX, startY + 30, -200, 0, 200, 0, 0x444444).setOrigin(0.5); } }); // Update button states this.updateButtonStates(); } catch (error) { console.error('LeaderboardScene: Error in displayLeaderboardPage', error); } } clearLeaderboardDisplay() { this.children.each((child) => { if (child.type === 'Text' || child.type === 'Line') { child.destroy(); } }); } updateButtonStates() { try { console.log('LeaderboardScene: Updating button states'); const leaderboardData = JSON.parse(localStorage.getItem('cosmicDefender_leaderboard') || '[]'); const totalPages = Math.ceil(leaderboardData.length / this.entriesPerPage); if (this.prevButton) { this.prevButton.setAlpha(this.currentPage > 0 ? 1 : 0.5); this.prevButton.setInteractive(this.currentPage > 0); } if (this.nextButton) { this.nextButton.setAlpha(this.currentPage < totalPages - 1 ? 1 : 0.5); this.nextButton.setInteractive(this.currentPage < totalPages - 1); } } catch (error) { console.error('LeaderboardScene: Error in updateButtonStates', error); } } } class CampaignScene extends Phaser.Scene { constructor() { super('CampaignScene'); this.selectedChapter = null; this.chapterCircles = []; } preload() { this.load.image('campaignBackground', 'https://play.rosebud.ai/assets/StoryMode.jpeg?nm42'); this.load.image('particle', 'https://play.rosebud.ai/assets/circle.png?AGB1'); } create() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; // Add background this.add.image(0, 0, 'campaignBackground').setOrigin(0).setDisplaySize(width, height); // Add semi-transparent overlay this.add.rectangle(0, 0, width, height, 0x000000, 0.5).setOrigin(0); // Add title const title = this.add.text(width / 2, 50, 'CAMPAIGN MAP', { fontSize: '48px', fontFamily: 'Arial', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5); // Create campaign map this.createCampaignMap(); // Add back arrow this.createBackArrow(); } createCampaignMap() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; const chapters = [{ title: 'Chapter 1: The Awakening', x: 100, y: height - 100 }, { title: 'Chapter 2: The Rising Threat', x: 300, y: height - 250 }, { title: 'Chapter 3: The Galactic Alliance', x: 500, y: height - 150 }, { title: 'Chapter 4: The Dark Nebula', x: 700, y: height - 300 }, { title: 'Chapter 5: The Final Stand', x: 900, y: height - 200 }]; // Create dotted line path const graphics = this.add.graphics(); graphics.lineStyle(2, 0xffffff, 1); graphics.beginPath(); if (chapters.length > 0 && chapters[0].x !== undefined && chapters[0].y !== undefined) { graphics.moveTo(chapters[0].x, chapters[0].y); } for (let i = 1; i < chapters.length; i++) { const prevChapter = chapters[i - 1]; const currentChapter = chapters[i]; if (prevChapter && currentChapter && prevChapter.x !== undefined && prevChapter.y !== undefined && currentChapter.x !== undefined && currentChapter.y !== undefined) { const startPoint = new Phaser.Math.Vector2(prevChapter.x, prevChapter.y); const endPoint = new Phaser.Math.Vector2(currentChapter.x, currentChapter.y); const controlPoint = new Phaser.Math.Vector2( (startPoint.x + endPoint.x) / 2, startPoint.y - 100 + Math.random() * 200 ); const curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint, endPoint); const points = curve.getPoints(20); for (let j = 0; j < points.length - 1; j += 2) { if (points[j] && points[j + 1]) { graphics.lineBetween(points[j].x, points[j].y, points[j + 1].x, points[j + 1].y); } } } } graphics.strokePath(); // Create interactive circles for each chapter chapters.forEach((chapter, index) => { if (chapter && chapter.x !== undefined && chapter.y !== undefined) { const circle = this.add.circle(chapter.x, chapter.y, 20, 0xffffff); circle.setInteractive({ useHandCursor: true }); const chapterText = this.add.text(chapter.x, chapter.y + 40, chapter.title, { fontSize: '18px', fontFamily: 'Arial', fill: '#ffffff', align: 'center' }).setOrigin(0.5).setVisible(false); circle.on('pointerover', () => { circle.setFillStyle(0xffff00); chapterText.setVisible(true); }); circle.on('pointerout', () => { circle.setFillStyle(0xffffff); chapterText.setVisible(false); }); circle.on('pointerdown', () => { this.selectChapter(index); }); this.chapterCircles.push({ circle, text: chapterText }); } }); } selectChapter(index) { this.chapterCircles.forEach((chapter, i) => { if (i === index) { chapter.circle.setFillStyle(0x00ff00); const baseText = chapter.text.text.split('\n')[0]; chapter.text.setVisible(true).setText(`${baseText}\nSelected!`); } else { chapter.circle.setFillStyle(0xffffff); chapter.text.setVisible(false).setText(chapter.text.text.split('\n')[0]); } }); console.log(`Chapter ${index + 1} selected`); // Here you can add logic to start the selected chapter } createBackArrow() { const arrowX = 50; const arrowY = 50; const arrowWidth = 40; const arrowHeight = 40; const arrow = this.add.triangle(arrowX, arrowY, 0, arrowHeight / 2, arrowWidth, 0, arrowWidth, arrowHeight, 0xff0000) .setOrigin(0, 0.5) .setInteractive() .on('pointerover', () => arrow.setFillStyle(0xff3333)) .on('pointerout', () => arrow.setFillStyle(0xff0000)) .on('pointerdown', this.goBackToMainMenu, this); } goBackToMainMenu() { this.scene.start('MainMenu'); } } class CutsceneScene extends Phaser.Scene { constructor() { super('CutsceneScene'); } init(data) { this.difficulty = data.difficulty; this.playerName = data.playerName; } preload() { this.load.image('galaxy', 'https://play.rosebud.ai/assets/cosmo.jpg?07Vz'); this.load.image('particle', 'https://play.rosebud.ai/assets/circle.png?AGB1'); this.load.image('note', 'https://play.rosebud.ai/assets/circle.png?AGB1'); } create() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; const centerX = width / 2; const centerY = height / 2; // Create a galaxy background this.galaxy = this.add.image(centerX, centerY, 'galaxy') .setDisplaySize(width, height); // Add skip button this.skipButton = this.add.text(width - 10, 10, 'Skip', { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(1, 0).setInteractive(); this.skipButton.on('pointerdown', this.skipCutscene, this); this.skipButton.on('pointerover', () => this.skipButton.setStyle({ fill: '#ff0' })); this.skipButton.on('pointerout', () => this.skipButton.setStyle({ fill: '#ffffff' })); // Create a starfield this.starfield = this.add.group({ key: 'particle', repeat: Math.floor(width * height / 6000) }); Phaser.Actions.RandomRectangle(this.starfield.getChildren(), this.cameras.main.getBounds()); // Zoom effect this.cameras.main.setZoom(0.5); this.tweens.add({ targets: this.cameras.main, zoom: 1, duration: 3000, ease: 'Sine.easeInOut' }); // Narration text this.narrationText = this.add.text(centerX, height - 50, '', { fontSize: Math.floor(height / 25) + 'px', fontFamily: 'Arial', color: '#ffffff', align: 'center', wordWrap: { width: width * 0.8 } }).setOrigin(0.5, 1); // Start the cutscene sequence this.time.delayedCall(500, () => this.showNarration('In a universe protected by the Cosmic Defenders, darkness stirs...')); // Animate stars this.tweens.add({ targets: this.starfield.getChildren(), y: '+=600', duration: 10000, repeat: -1 }); } showNarration(text) { this.narrationText.setText(text); this.narrationText.alpha = 0; this.tweens.add({ targets: this.narrationText, alpha: 1, duration: 1000, ease: 'Linear', onComplete: () => { this.time.delayedCall(2000, () => this.fadeOutNarration()); } }); } fadeOutNarration() { this.tweens.add({ targets: this.narrationText, alpha: 0, duration: 1000, ease: 'Linear', onComplete: () => { this.showEnemyNote(); } }); } showEnemyNote() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; const enemyNote = this.add.image(width * 1.5, height / 2, 'note') .setScale(0.2 * (width / 600)) .setTint(0xFF0000); this.tweens.add({ targets: enemyNote, x: width / 2, duration: 2000, ease: 'Sine.easeInOut', onComplete: () => { this.showNarration('Join the defenders and restore balance before it\'s too late!'); this.time.delayedCall(3000, () => this.startGameScene()); } }); } startGameScene() { this.cameras.main.fadeOut(1000, 0, 0, 0); this.time.delayedCall(1000, () => { this.scene.start('GameScene', { difficulty: this.difficulty, playerName: this.playerName }); }); } skipCutscene() { // Stop all ongoing tweens and timers this.tweens.killAll(); this.time.removeAllEvents(); // Fade out the scene this.cameras.main.fadeOut(500, 0, 0, 0); // Start the game scene after fade out this.time.delayedCall(500, () => { this.scene.start('GameScene', { difficulty: this.difficulty, playerName: this.playerName }); }); } } class FeedbackScene extends Phaser.Scene { constructor() { super('FeedbackScene'); } create() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; const centerX = width / 2; const centerY = height / 2; // Add background this.add.rectangle(0, 0, width, height, 0x000000, 0.8).setOrigin(0); // Add title this.add.text(centerX, 50, 'FEEDBACK', { fontSize: '32px', fontFamily: 'Arial', color: '#ffffff' }).setOrigin(0.5); // Create feedback input const feedbackInput = document.createElement('textarea'); feedbackInput.placeholder = "Report any bugs/issues here, feel free to add suggestions"; feedbackInput.style.width = '80%'; feedbackInput.style.height = '150px'; feedbackInput.style.padding = '10px'; feedbackInput.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; feedbackInput.style.color = '#ffffff'; feedbackInput.style.border = '1px solid #ffffff'; feedbackInput.style.borderRadius = '5px'; feedbackInput.style.resize = 'none'; const inputElement = this.add.dom(centerX, centerY - 50, feedbackInput); inputElement.setOrigin(0.5); // Create send button const sendButton = new CustomButton(this, centerX, centerY + 100, 'SEND'); this.add.existing(sendButton); sendButton.on('click', () => { const feedback = feedbackInput.value.trim(); if (feedback) { this.sendFeedbackEmail(feedback); } }); // Create back button const backButton = new CustomButton(this, centerX, height - 50, 'BACK'); this.add.existing(backButton); backButton.on('click', () => { this.scene.start('MainMenu'); }); } sendFeedbackEmail(feedback) { const subject = encodeURIComponent('Cosmic Defender Feedback'); const body = encodeURIComponent(feedback); const mailtoLink = `mailto:danielpcini@gmail.com?subject=${subject}&body=${body}`; window.location.href = mailtoLink; // Show a confirmation message this.showConfirmation('Thank you for your feedback!'); } showConfirmation(message) { const confirmationText = this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height / 2, message, { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#000000', padding: { x: 20, y: 10 } }).setOrigin(0.5).setAlpha(0); this.tweens.add({ targets: confirmationText, alpha: 1, duration: 500, ease: 'Power2', yoyo: true, hold: 2000, onComplete: () => { confirmationText.destroy(); } }); } } function calculateGameSize() { const width = window.innerWidth; const height = window.innerHeight; const aspectRatio = 16 / 9; let gameWidth, gameHeight; if (width / height > aspectRatio) { gameHeight = height; gameWidth = height * aspectRatio; } else { gameWidth = width; gameHeight = width / aspectRatio; } return { width: Math.round(gameWidth), height: Math.round(gameHeight) }; } const gameSize = calculateGameSize(); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.RESIZE, width: gameSize.width, height: gameSize.height, autoCenter: Phaser.Scale.CENTER_BOTH }, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } }, dom: { createContainer: true }, scene: [MainMenu, DifficultyScene, CutsceneScene, GameScene, LeaderboardScene, ShopScene, CampaignScene, SettingsScene, FeedbackScene] }; window.phaserGame = new Phaser.Game(config); // Add event listener for window resize window.addEventListener('resize', () => { if (window.phaserGame) { const newGameSize = calculateGameSize(); window.phaserGame.scale.resize(newGameSize.width, newGameSize.height); } }); // Add CSS to center the game and style the custom button const style = document.createElement('style'); style.textContent = ` #renderDiv { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } canvas { max-width: 100%; max-height: 100%; } /* Custom button styles */ .btn { display: flex; justify-content: center; align-items: center; width: 13rem; overflow: hidden; height: 3rem; background-size: 300% 300%; backdrop-filter: blur(1rem); border-radius: 5rem; transition: 0.5s; animation: gradient_301 5s ease infinite; border: double 4px transparent; background-image: linear-gradient(#212121, #212121), linear-gradient( 137.48deg, #ffdb3b 10%, #fe53bb 45%, #8f51ea 67%, #0044ff 87% ); background-origin: border-box; background-clip: content-box, border-box; } #container-stars { position: absolute; z-index: -1; width: 100%; height: 100%; overflow: hidden; transition: 0.5s; backdrop-filter: blur(1rem); border-radius: 5rem; } strong { z-index: 2; font-family: 'Avalors Personal Use'; font-size: 12px; letter-spacing: 5px; color: #FFFFFF; text-shadow: 0 0 4px white; } #glow { position: absolute; display: flex; width: 12rem; } .circle { width: 100%; height: 30px; filter: blur(2rem); animation: pulse_3011 4s infinite; z-index: -1; } .circle:nth-of-type(1) { background: rgba(254, 83, 186, 0.636); } .circle:nth-of-type(2) { background: rgba(142, 81, 234, 0.704); } .btn:hover #container-stars { z-index: 1; background-color: #212121; } .btn:hover { transform: scale(1.1) } .btn:active { border: double 4px #FE53BB; background-origin: border-box; background-clip: content-box, border-box; animation: none; } .btn:active .circle { background: #FE53BB; } #stars { position: relative; background: transparent; width: 200rem; height: 200rem; } #stars::after { content: ""; position: absolute; top: -10rem; left: -100rem; width: 100%; height: 100%; animation: animStarRotate 90s linear infinite; } #stars::after { background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size: 50px 50px; } #stars::before { content: ""; position: absolute; top: 0; left: -50%; width: 170%; height: 500%; animation: animStar 60s linear infinite; } #stars::before { background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size: 50px 50px; opacity: 0.5; } @keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-135rem); } } @keyframes animStarRotate { from { transform: rotate(360deg); } to { transform: rotate(0); } } @keyframes gradient_301 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulse_3011 { 0% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } `; document.head.appendChild(style); // Custom Button class class CustomButton extends Phaser.GameObjects.Container { constructor(scene, x, y, text) { super(scene, x, y); this.buttonElement = document.createElement('button'); this.buttonElement.className = 'btn'; this.buttonElement.innerHTML = ` ${text}

`; this.button = scene.add.dom(0, 0, this.buttonElement); this.add(this.button); this.button.addListener('click'); this.button.on('click', () => { this.emit('click'); }); this.setSize(208, 48); // Set a fixed size for the button (13rem x 3rem) this.setInteractive(new Phaser.Geom.Rectangle(0, 0, 208, 48), Phaser.Geom.Rectangle.Contains); this.on('pointerover', this.onPointerOver); this.on('pointerout', this.onPointerOut); this.on('pointerdown', this.onPointerDown); this.on('pointerup', this.onPointerUp); } onPointerOver() { this.buttonElement.style.transform = 'scale(1.1)'; } onPointerOut() { this.buttonElement.style.transform = 'scale(1)'; } onPointerDown() { this.buttonElement.style.border = 'double 4px #FE53BB'; } onPointerUp() { this.buttonElement.style.border = 'double 4px transparent'; } } // The duplicate FeedbackScene class definition has been removed.