class MainMenu extends Phaser.Scene { constructor() { super('MainMenu'); } addBackToMenuButton() { // This method is not needed in the MainMenu scene, but we'll add it to prevent errors console.log('Back to Menu button not applicable in MainMenu scene'); } preload() { this.load.image('menuBackground', 'https://play.rosebud.ai/assets/image_2024-07-21_042316836.png?88mo'); this.load.bitmapFont('pixelFont', 'https://labs.phaser.io/assets/fonts/bitmap/carrier_command.png', 'https://labs.phaser.io/assets/fonts/bitmap/carrier_command.xml'); this.load.bitmapFont('pixelFont', 'https://labs.phaser.io/assets/fonts/bitmap/carrier_command.png', 'https://labs.phaser.io/assets/fonts/bitmap/carrier_command.xml'); this.load.audio('menuMusic', 'https://play.rosebud.ai/assets/SUMO MAIN MENU MUSIC.mp3?nPN0'); this.load.audio('sampleSFX', 'https://play.rosebud.ai/assets/eliminated.mp3?tguO'); this.load.audio('buttonHover', 'https://play.rosebud.ai/assets/click-for-game-menu-131903.mp3?uvCM'); this.load.audio('buttonSelect', 'https://play.rosebud.ai/assets/select.mp3?Md62'); } create() { // Add this method to play the select sound this.playSelectSound = () => { this.sound.play('buttonSelect', { volume: 0.4 }); }; // Initialize stats if they don't exist if (!localStorage.getItem('wins')) { localStorage.setItem('wins', '0'); } if (!localStorage.getItem('losses')) { localStorage.setItem('losses', '0'); } const centerX = this.cameras.main.width / 2; const centerY = this.cameras.main.height / 2; // Stop any currently playing music this.sound.stopAll(); // Play main menu music this.menuMusic = this.sound.add('menuMusic', { loop: true, volume: 0.4 }); this.menuMusic.play(); // Add the background image const background = this.add.image(centerX, centerY, 'menuBackground'); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); // Add "Connect to Multiplayer" button (greyed out) const connectButton = this.add.text(20, 20, 'Connect to Multiplayer', { fontSize: '16px', fontStyle: 'bold', fill: '#888888', // Grey text color backgroundColor: '#666666', // Darker grey background padding: { x: 8, y: 4 } }); // Add "Coming Soon!" text with pixel font const comingSoonText = this.add.bitmapText(20, 50, 'pixelFont', 'Coming Soon!', 8) .setTint(0xFF0000); // Red text color // Remove interactivity and hover effects // connectButton.setInteractive() and related event listeners are removed // Add a slight gray background inside the SUMO title's red neon outline const borderWidth = 400; const borderHeight = 100; const borderX = centerX - borderWidth / 2; const borderY = centerY - 170 - borderHeight / 2; // Moved down 30 pixels const backgroundGraphics = this.add.graphics(); backgroundGraphics.fillStyle(0x333333, 0.5); // Slight gray color with 50% opacity backgroundGraphics.fillRoundedRect(borderX, borderY, borderWidth, borderHeight, 20); // Add a neon glowing red border for the "SUMO." text const borderGraphics = this.add.graphics(); borderGraphics.lineStyle(4, 0xFF0000, 1); borderGraphics.strokeRoundedRect(borderX, borderY, borderWidth, borderHeight, 20); // Add a glow effect to the border const glowGraphics = this.add.graphics(); glowGraphics.lineStyle(16, 0xFF0000, 0.3); glowGraphics.strokeRoundedRect(borderX, borderY, borderWidth, borderHeight, 20); // Add the neon pixel text title "SUMO." with different colors for each letter const letters = ['S', 'U', 'M', 'O', '.']; const colors = [0xFF00FF, 0x00FFFF, 0xFFFF00, 0xFF1493, 0x39FF14]; // Neon colors const titleGroup = this.add.group(); letters.forEach((letter, index) => { const x = centerX + (index - 2) * 70 - 20; // Moved 20 pixels to the left const y = centerY - 200; // Moved letters up const letterText = this.add.bitmapText(x, y, 'pixelFont', letter, 64); letterText.setTint(colors[index]); titleGroup.add(letterText); }); // Add a pulsing effect to each letter titleGroup.getChildren().forEach((letter) => { this.tweens.add({ targets: letter, scale: 1.1, duration: 1000, yoyo: true, repeat: -1 }); }); // Add a pulsing glow effect to the border this.tweens.add({ targets: glowGraphics, alpha: 0.1, duration: 1500, yoyo: true, repeat: -1 }); // Create a neon green rounded rectangle const buttonWidth = 200; const buttonHeight = 60; const buttonX = centerX - buttonWidth / 2; const buttonY = centerY - 50 - buttonHeight / 2; // Moved down by 50 pixels const graphics = this.add.graphics(); graphics.fillStyle(0x39FF14, 0.3); // Neon green with 30% opacity graphics.lineStyle(4, 0x39FF14, 1); // Neon green border graphics.fillRoundedRect(buttonX, buttonY, buttonWidth, buttonHeight, 15); graphics.strokeRoundedRect(buttonX, buttonY, buttonWidth, buttonHeight, 15); // Add the play button text const playButton = this.add.text(centerX, centerY - 50, 'PLAY', { // Moved down by 50 pixels fontSize: '32px', fill: '#FF00FF', // Neon purple fontStyle: 'bold' }).setOrigin(0.5); // Create an invisible interactive zone for the entire button area const hitArea = new Phaser.Geom.Rectangle(buttonX, buttonY, buttonWidth, buttonHeight); const hitAreaGraphics = this.add.graphics({ fillStyle: { color: 0xffffff, alpha: 0 } }); hitAreaGraphics.fillRectShape(hitArea); hitAreaGraphics.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains); // Add hover effect hitAreaGraphics.on('pointerover', () => { playButton.setStyle({ fill: '#FF69B4' }); // Light pink on hover graphics.clear(); graphics.fillStyle(0x39FF14, 0.5); // Increased opacity on hover graphics.lineStyle(4, 0x39FF14, 1); graphics.fillRoundedRect(buttonX, buttonY, buttonWidth, buttonHeight, 15); graphics.strokeRoundedRect(buttonX, buttonY, buttonWidth, buttonHeight, 15); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 20% }); hitAreaGraphics.on('pointerout', () => { playButton.setStyle({ fill: '#FF00FF' }); // Back to purple graphics.clear(); graphics.fillStyle(0x39FF14, 0.3); // Original opacity graphics.lineStyle(4, 0x39FF14, 1); graphics.fillRoundedRect(buttonX, buttonY, buttonWidth, buttonHeight, 15); graphics.strokeRoundedRect(buttonX, buttonY, buttonWidth, buttonHeight, 15); }); // Start the game when the button is clicked hitAreaGraphics.on('pointerdown', () => { this.playSelectSound(); this.scene.start('GameSetup'); }); // Add Controls button const controlsButtonWidth = 200; const controlsButtonHeight = 60; const controlsButtonX = centerX - controlsButtonWidth / 2; const controlsButtonY = centerY + 50 - controlsButtonHeight / 2; // Moved down by 50 pixels const controlsGraphics = this.add.graphics(); controlsGraphics.fillStyle(0xFF00FF, 0.3); // Neon purple with 30% opacity controlsGraphics.lineStyle(4, 0xFF00FF, 1); // Neon purple border controlsGraphics.fillRoundedRect(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight, 15); controlsGraphics.strokeRoundedRect(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight, 15); const controlsButton = this.add.text(centerX, centerY + 50, 'CONTROLS', { // Moved down by 50 pixels fontSize: '28px', fill: '#39FF14', // Neon green fontStyle: 'bold' }).setOrigin(0.5); const controlsHitArea = new Phaser.Geom.Rectangle(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight); const controlsHitAreaGraphics = this.add.graphics({ fillStyle: { color: 0xffffff, alpha: 0 } }); controlsHitAreaGraphics.fillRectShape(controlsHitArea); controlsHitAreaGraphics.setInteractive(controlsHitArea, Phaser.Geom.Rectangle.Contains); controlsHitAreaGraphics.on('pointerover', () => { controlsButton.setStyle({ fill: '#00FF00' }); // Lighter green on hover controlsGraphics.clear(); controlsGraphics.fillStyle(0xFF00FF, 0.5); // Increased opacity on hover controlsGraphics.lineStyle(4, 0xFF00FF, 1); controlsGraphics.fillRoundedRect(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight, 15); controlsGraphics.strokeRoundedRect(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight, 15); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); controlsHitAreaGraphics.on('pointerout', () => { controlsButton.setStyle({ fill: '#39FF14' }); // Back to neon green controlsGraphics.clear(); controlsGraphics.fillStyle(0xFF00FF, 0.3); // Original opacity controlsGraphics.lineStyle(4, 0xFF00FF, 1); controlsGraphics.fillRoundedRect(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight, 15); controlsGraphics.strokeRoundedRect(controlsButtonX, controlsButtonY, controlsButtonWidth, controlsButtonHeight, 15); }); controlsHitAreaGraphics.on('pointerdown', () => { this.playSelectSound(); this.showControlsPopup(); }); // Add Stats button const statsButtonWidth = 200; const statsButtonHeight = 60; const statsButtonX = centerX - statsButtonWidth / 2; const statsButtonY = centerY + 150 - statsButtonHeight / 2; // Moved down by 50 pixels const statsGraphics = this.add.graphics(); statsGraphics.fillStyle(0xFF0000, 0.3); // Red with 30% opacity statsGraphics.lineStyle(4, 0xFF0000, 1); // Red border statsGraphics.fillRoundedRect(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight, 15); statsGraphics.strokeRoundedRect(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight, 15); const statsButton = this.add.text(centerX, centerY + 150, 'STATS', { // Moved down by 50 pixels fontSize: '28px', fill: '#FFFF00', // Yellow text fontStyle: 'bold' }).setOrigin(0.5); const statsHitArea = new Phaser.Geom.Rectangle(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight); const statsHitAreaGraphics = this.add.graphics({ fillStyle: { color: 0xffffff, alpha: 0 } }); statsHitAreaGraphics.fillRectShape(statsHitArea); statsHitAreaGraphics.setInteractive(statsHitArea, Phaser.Geom.Rectangle.Contains); statsHitAreaGraphics.on('pointerover', () => { statsButton.setStyle({ fill: '#FFFFFF' }); // White on hover statsGraphics.clear(); statsGraphics.fillStyle(0xFF0000, 0.5); // Increased opacity on hover statsGraphics.lineStyle(4, 0xFF0000, 1); statsGraphics.fillRoundedRect(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight, 15); statsGraphics.strokeRoundedRect(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight, 15); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); statsHitAreaGraphics.on('pointerout', () => { statsButton.setStyle({ fill: '#FFFF00' }); // Back to yellow statsGraphics.clear(); statsGraphics.fillStyle(0xFF0000, 0.3); // Original opacity statsGraphics.lineStyle(4, 0xFF0000, 1); statsGraphics.fillRoundedRect(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight, 15); statsGraphics.strokeRoundedRect(statsButtonX, statsButtonY, statsButtonWidth, statsButtonHeight, 15); }); statsHitAreaGraphics.on('pointerdown', () => { this.playSelectSound(); this.showStatsPopup(); }); // Add options button const optionsButtonWidth = 200; const optionsButtonHeight = 60; const optionsButtonX = centerX - optionsButtonWidth / 2; const optionsButtonY = centerY + 250 - optionsButtonHeight / 2; // Moved down by 50 pixels const optionsGraphics = this.add.graphics(); optionsGraphics.fillStyle(0x00FFFF, 0.3); // Cyan with 30% opacity optionsGraphics.lineStyle(4, 0x00FFFF, 1); // Cyan border optionsGraphics.fillRoundedRect(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight, 15); optionsGraphics.strokeRoundedRect(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight, 15); const optionsButton = this.add.text(centerX, centerY + 250, 'OPTIONS', { // Moved down by 50 pixels fontSize: '28px', fill: '#FFFFFF', // White text fontStyle: 'bold' }).setOrigin(0.5); const optionsHitArea = new Phaser.Geom.Rectangle(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight); const optionsHitAreaGraphics = this.add.graphics({ fillStyle: { color: 0xffffff, alpha: 0 } }); optionsHitAreaGraphics.fillRectShape(optionsHitArea); optionsHitAreaGraphics.setInteractive(optionsHitArea, Phaser.Geom.Rectangle.Contains); optionsHitAreaGraphics.on('pointerover', () => { optionsButton.setStyle({ fill: '#00FFFF' }); // Cyan on hover optionsGraphics.clear(); optionsGraphics.fillStyle(0x00FFFF, 0.5); // Increased opacity on hover optionsGraphics.lineStyle(4, 0x00FFFF, 1); optionsGraphics.fillRoundedRect(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight, 15); optionsGraphics.strokeRoundedRect(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight, 15); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); optionsHitAreaGraphics.on('pointerout', () => { optionsButton.setStyle({ fill: '#FFFFFF' }); // Back to white optionsGraphics.clear(); optionsGraphics.fillStyle(0x00FFFF, 0.3); // Original opacity optionsGraphics.lineStyle(4, 0x00FFFF, 1); optionsGraphics.fillRoundedRect(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight, 15); optionsGraphics.strokeRoundedRect(optionsButtonX, optionsButtonY, optionsButtonWidth, optionsButtonHeight, 15); }); optionsHitAreaGraphics.on('pointerdown', () => { this.playSelectSound(); this.showOptionsPopup(); }); // Add mute button this.addMuteButton(); // Play main menu music if it's not already playing if (!this.sound.get('menuMusic')) { this.sound.play('menuMusic', { loop: true, volume: 0.4 }); } } showControlsPopup() { const centerX = this.cameras.main.width / 2; const centerY = this.cameras.main.height / 2; // Hide all game elements except background this.children.list.forEach(child => { if (child !== this.background) { child.setVisible(false); } }); // Create an invisible overlay to block interactions const overlay = this.add.rectangle(0, 0, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.01); overlay.setOrigin(0); overlay.setInteractive(); // Create a semi-transparent black background with neon border const background = this.add.rectangle(centerX, centerY, 600, 400, 0x000000, 0.8); background.setStrokeStyle(4, 0xFF00FF); // Purple border to match the Controls button // Add title const title = this.add.text(centerX, centerY - 160, ' CONTROLS', { fontSize: '36px', fontStyle: 'bold', fill: '#FF00FF', // Purple text to match the Controls button align: 'center' }).setOrigin(0.5); // Add controls text with icons const controlsText = this.add.text(centerX, centerY - 40, "Player 1: Arrow Keys (←↑↓→)\nPlayer 2: WASD\n\nPush opponents out\nof the arena!", { fontSize: '24px', fontStyle: 'bold', // Make text bold fill: '#39FF14', // Neon green text to match the Controls button text align: 'center', lineSpacing: 10 }).setOrigin(0.5); // Add close button with neon effect const closeButton = this.add.text(centerX, centerY + 160, 'CLOSE', { fontSize: '28px', fontStyle: 'bold', fill: '#39FF14' // Neon green to match the Controls button text }).setOrigin(0.5); closeButton.setInteractive(); this.add.tween({ targets: closeButton, alpha: 0.5, duration: 1000, yoyo: true, repeat: -1 }); closeButton.on('pointerover', () => { closeButton.setStyle({ fill: '#00FF00' // Lighter green on hover }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); closeButton.on('pointerout', () => closeButton.setStyle({ fill: '#39FF14' // Back to neon green })); closeButton.on('pointerdown', () => { this.playSelectSound(); [overlay, background, title, controlsText, closeButton].forEach(obj => obj.destroy()); this.children.list.forEach(child => child.setVisible(true)); }); } showStatsPopup() { const centerX = this.cameras.main.width / 2; const centerY = this.cameras.main.height / 2; // Hide all game elements except background this.children.list.forEach(child => { if (child !== this.background) { child.setVisible(false); } }); // Create an invisible overlay to block interactions const overlay = this.add.rectangle(0, 0, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.01); overlay.setOrigin(0); overlay.setInteractive(); // Create a semi-transparent black background with neon border const background = this.add.rectangle(centerX, centerY, 600, 400, 0x000000, 0.8); background.setStrokeStyle(4, 0xFF0000); // Red border to match the Stats button // Add title const title = this.add.text(centerX, centerY - 160, 'STATS', { fontSize: '36px', fontStyle: 'bold', fill: '#FF0000', // Red text to match the Stats button align: 'center' }).setOrigin(0.5); // Get stats from localStorage const wins = parseInt(localStorage.getItem('wins') || '0'); const losses = parseInt(localStorage.getItem('losses') || '0'); const totalGames = wins + losses; const winRate = totalGames > 0 ? (wins / totalGames * 100).toFixed(1) : 0; // Add stats text const statsText = this.add.text(centerX, centerY - 20, `Wins: ${wins}\nLosses: ${losses}\nTotal Games: ${totalGames}\nWin Rate: ${winRate}%`, { fontSize: '28px', fontStyle: 'bold', // Make text bold fill: '#FFFF00', // Yellow text to match the Stats button text align: 'center', lineSpacing: 10 }).setOrigin(0.5); // Add animated neon chart const chartGraphics = this.add.graphics(); const chartCenterX = centerX; const chartCenterY = centerY + 100; const chartRadius = 60; const drawChart = (progress) => { chartGraphics.clear(); chartGraphics.lineStyle(8, 0xFFFF00); // Yellow to match the Stats button text chartGraphics.beginPath(); chartGraphics.arc(chartCenterX, chartCenterY, chartRadius, -Math.PI / 2, -Math.PI / 2 + (Math.PI * 2 * progress)); chartGraphics.strokePath(); }; this.tweens.add({ targets: {}, duration: 1500, ease: 'Cubic.easeOut', onUpdate: (tween) => { const progress = Math.min(winRate / 100, tween.progress); drawChart(progress); } }); // Add close button with neon effect const closeButton = this.add.text(centerX, centerY + 180, 'CLOSE', { fontSize: '28px', fontStyle: 'bold', fill: '#FFFF00' // Yellow to match the Stats button text }).setOrigin(0.5); closeButton.setInteractive(); this.add.tween({ targets: closeButton, alpha: 0.5, duration: 1000, yoyo: true, repeat: -1 }); closeButton.on('pointerover', () => { closeButton.setStyle({ fill: '#FFFFFF' // White on hover }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); closeButton.on('pointerout', () => closeButton.setStyle({ fill: '#FFFF00' // Back to yellow })); closeButton.on('pointerdown', () => { this.playSelectSound(); [overlay, background, title, statsText, chartGraphics, closeButton, resetButton].forEach(obj => obj.destroy()); this.children.list.forEach(child => child.setVisible(true)); }); // Add reset stats button in the top left const resetButton = this.add.text(centerX - 290, centerY - 190, 'RESET STATS', { fontSize: '20px', fontStyle: 'bold', fill: '#FFFF00', // Yellow text backgroundColor: '#FF0000', // Red background padding: { x: 10, y: 5 } }).setOrigin(0, 0); resetButton.setInteractive({ useHandCursor: true }); resetButton.on('pointerover', () => { resetButton.setStyle({ fill: '#FFFFFF' }); // White on hover this.sound.play('buttonHover', { volume: 0.2 }); }); resetButton.on('pointerout', () => { resetButton.setStyle({ fill: '#FFFF00' }); // Back to yellow }); // Add a subtle pulsing effect to the reset button this.tweens.add({ targets: resetButton, alpha: 0.8, duration: 1000, yoyo: true, repeat: -1 }); resetButton.on('pointerdown', () => { this.playSelectSound(); // Reset stats in localStorage localStorage.setItem('wins', '0'); localStorage.setItem('losses', '0'); // Update the stats display statsText.setText('Wins: 0\nLosses: 0\nTotal Games: 0\nWin Rate: 0%'); // Redraw the chart drawChart(0); }); } showOptionsPopup() { const centerX = this.cameras.main.width / 2; const centerY = this.cameras.main.height / 2; // Create an invisible overlay to block interactions with elements behind const overlay = this.add.rectangle(0, 0, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.01); overlay.setOrigin(0); overlay.setInteractive(); // Create a semi-transparent background const bg = this.add.rectangle(centerX, centerY, 600, 400, 0x000000, 0.8); bg.setOrigin(0.5); bg.setStrokeStyle(4, 0x00FFFF); // Add title const title = this.add.text(centerX, centerY - 150, 'OPTIONS', { fontSize: '36px', fill: '#00FFFF', fontStyle: 'bold' }).setOrigin(0.5); // Add music volume slider const musicText = this.add.text(centerX - 200, centerY - 50, 'Music Volume:', { fontSize: '24px', fill: '#FFFFFF' }).setOrigin(0, 0.5); const musicSlider = this.add.rectangle(centerX + 50, centerY - 50, 200, 10, 0xFFFFFF); musicSlider.setOrigin(0, 0.5); const musicVolume = localStorage.getItem('musicVolume') || 0.4; const musicHandle = this.add.circle(centerX + 50 + musicVolume * 200, centerY - 50, 15, 0x00FFFF); musicHandle.setInteractive({ draggable: true }); // Add SFX volume slider const sfxText = this.add.text(centerX - 200, centerY + 50, 'SFX Volume:', { fontSize: '24px', fill: '#FFFFFF' }).setOrigin(0, 0.5); const sfxSlider = this.add.rectangle(centerX + 50, centerY + 50, 200, 10, 0xFFFFFF); sfxSlider.setOrigin(0, 0.5); const sfxVolume = localStorage.getItem('sfxVolume') || 1; const sfxHandle = this.add.circle(centerX + 50 + sfxVolume * 200, centerY + 50, 15, 0x00FFFF); sfxHandle.setInteractive({ draggable: true }); // Handle music slider drag musicHandle.on('drag', (pointer, dragX) => { dragX = Phaser.Math.Clamp(dragX, musicSlider.x, musicSlider.x + musicSlider.width); musicHandle.x = dragX; const volume = (musicHandle.x - musicSlider.x) / musicSlider.width; this.sound.get('menuMusic').setVolume(volume); localStorage.setItem('musicVolume', volume); }); // Handle SFX slider drag sfxHandle.on('drag', (pointer, dragX) => { dragX = Phaser.Math.Clamp(dragX, sfxSlider.x, sfxSlider.x + sfxSlider.width); sfxHandle.x = dragX; const volume = (sfxHandle.x - sfxSlider.x) / sfxSlider.width; localStorage.setItem('sfxVolume', volume); }); sfxHandle.on('dragend', () => { const volume = (sfxHandle.x - sfxSlider.x) / sfxSlider.width; const sampleSFX = this.sound.add('sampleSFX'); sampleSFX.setVolume(volume); sampleSFX.play(); }); // Add close button const closeButton = this.add.text(centerX, centerY + 150, 'CLOSE', { fontSize: '28px', fill: '#00FFFF', fontStyle: 'bold' }).setOrigin(0.5); closeButton.setInteractive(); closeButton.on('pointerover', () => { closeButton.setStyle({ fill: '#FFFFFF' }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); closeButton.on('pointerout', () => closeButton.setStyle({ fill: '#00FFFF' })); closeButton.on('pointerdown', () => { this.playSelectSound(); overlay.destroy(); bg.destroy(); title.destroy(); musicText.destroy(); musicSlider.destroy(); musicHandle.destroy(); sfxText.destroy(); sfxSlider.destroy(); sfxHandle.destroy(); closeButton.destroy(); }); } addMuteButton() { const isMuted = localStorage.getItem('isMuted') === 'true'; const muteButton = this.add.text(20, this.cameras.main.height - 40, isMuted ? 'UNMUTE' : 'MUTE', { fontSize: '24px', fill: '#FFFFFF' }); muteButton.setInteractive(); muteButton.on('pointerdown', () => { this.playSelectSound(); const newMuteState = !this.game.sound.mute; this.game.sound.mute = newMuteState; localStorage.setItem('isMuted', newMuteState); muteButton.setText(newMuteState ? 'UNMUTE' : 'MUTE'); }); muteButton.on('pointerover', () => { this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); // Set initial mute state this.game.sound.mute = isMuted; } } class GameSetup extends Phaser.Scene { constructor() { super('GameSetup'); this.totalPlayers = 4; this.humanPlayers = 1; this.maxHumanPlayers = 2; // Add this line to set the maximum number of human players } addBackToMenuButton() { const backButton = this.add.text(20, 20, 'Back to Menu', { fontSize: '24px', fill: '#FFFFFF' }).setInteractive(); backButton.on('pointerover', () => { backButton.setStyle({ fill: '#FF69B4' }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); backButton.on('pointerout', () => backButton.setStyle({ fill: '#FFFFFF' })); backButton.on('pointerdown', () => { this.sound.play('buttonSelect', { volume: 0.4 }); this.scene.start('MainMenu'); }); } create() { const centerX = this.cameras.main.width / 2; const centerY = this.cameras.main.height / 2; // Add background const background = this.add.image(centerX, centerY, 'menuBackground'); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); // Add title this.add.text(centerX, 100, 'Game Setup', { fontSize: '48px', fill: '#39FF14', fontStyle: 'bold' }).setOrigin(0.5); // Add "Back to Menu" button const backButton = this.add.text(20, 20, 'Back to Menu', { fontSize: '24px', fill: '#FFFFFF' }).setInteractive(); backButton.on('pointerover', () => { backButton.setStyle({ fill: '#FF69B4' }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); backButton.on('pointerout', () => backButton.setStyle({ fill: '#FFFFFF' })); backButton.on('pointerdown', () => this.scene.start('MainMenu')); // Total players selection this.add.text(centerX - 150, centerY - 100, 'Total Players:', { fontSize: '24px', fill: '#FFFFFF' }); const totalPlayersText = this.add.text(centerX + 100, centerY - 100, this.totalPlayers, { fontSize: '24px', fill: '#FFFFFF' }); const decreaseTotalBtn = this.add.text(centerX + 50, centerY - 100, '-', { fontSize: '24px', fill: '#FFFFFF' }).setInteractive(); const increaseTotalBtn = this.add.text(centerX + 150, centerY - 100, '+', { fontSize: '24px', fill: '#FFFFFF' }).setInteractive(); // Human players selection this.add.text(centerX - 150, centerY, 'Human Players:', { fontSize: '24px', fill: '#FFFFFF' }); const humanPlayersText = this.add.text(centerX + 100, centerY, this.humanPlayers, { fontSize: '24px', fill: '#FFFFFF' }); const decreaseHumanBtn = this.add.text(centerX + 50, centerY, '-', { fontSize: '24px', fill: '#FFFFFF' }).setInteractive(); const increaseHumanBtn = this.add.text(centerX + 150, centerY, '+', { fontSize: '24px', fill: '#FFFFFF' }).setInteractive(); // Button interactions decreaseTotalBtn.on('pointerdown', () => { if (this.totalPlayers > 2) { this.totalPlayers--; totalPlayersText.setText(this.totalPlayers); if (this.humanPlayers > this.totalPlayers) { this.humanPlayers = this.totalPlayers; humanPlayersText.setText(this.humanPlayers); } } }); increaseTotalBtn.on('pointerdown', () => { if (this.totalPlayers < 4) { this.totalPlayers++; totalPlayersText.setText(this.totalPlayers); } }); decreaseHumanBtn.on('pointerdown', () => { if (this.humanPlayers > 1) { this.humanPlayers--; humanPlayersText.setText(this.humanPlayers); } }); increaseHumanBtn.on('pointerdown', () => { if (this.humanPlayers < Math.min(this.totalPlayers, this.maxHumanPlayers)) { this.humanPlayers++; humanPlayersText.setText(this.humanPlayers); } }); // Start game button const startButton = this.add.text(centerX, centerY + 150, 'Start Game', { fontSize: '32px', fill: '#FF00FF', fontStyle: 'bold' }).setOrigin(0.5).setInteractive(); startButton.on('pointerover', () => { startButton.setStyle({ fill: '#FF69B4' }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); startButton.on('pointerout', () => { startButton.setStyle({ fill: '#FF00FF' }); }); startButton.on('pointerdown', () => { this.sound.play('buttonSelect', { volume: 0.4 }); this.sound.stopAll(); // Stop the main menu music this.scene.start('SUMOGame', { totalPlayers: this.totalPlayers, humanPlayers: this.humanPlayers }); }); // Continue playing the main menu music if it's already playing if (!this.sound.get('menuMusic')) { this.sound.play('menuMusic', { loop: true, volume: 0.4 }); } // Add hover sound to all interactive buttons [decreaseTotalBtn, increaseTotalBtn, decreaseHumanBtn, increaseHumanBtn].forEach(btn => { btn.on('pointerover', () => { this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); }); } } class SUMOGame extends Phaser.Scene { constructor() { super('SUMOGame'); this.players = []; this.arena; this.arenaMask; this.arenaRadius = 250; this.shrinkTimer = 0; this.countdownText; this.gameStarted = false; this.gameOver = false; this.layersFallen = 0; this.layerWidth = 59.3; // Width of each layer this.timerCircle; // Graphics object for the timer circle this.background; // Property for the background image this.winner = null; // Property to store the winner this.backgroundMusic; // Property for the background music this.layerFallingSound; // New property for the layer falling sound this.eliminationText; // New property for the elimination message this.startButton; // New property for the start button this.readyToStart = false; // New property to check if the game is ready to start this.nextLayerRadius = 250 - this.layerWidth; // New property to track the next layer to fall } addBackToMenuButton() { const backButton = this.add.text( this.cameras.main.width - 10, this.cameras.main.height - 10, 'Back to Menu', { fontSize: '24px', fill: '#FFFFFF' } ).setOrigin(1, 1).setInteractive().setScrollFactor(0).setDepth(1000); backButton.on('pointerover', () => { backButton.setStyle({ fill: '#FF69B4' }); this.sound.play('buttonHover', { volume: 0.2 }); // Set volume to 40% }); backButton.on('pointerout', () => backButton.setStyle({ fill: '#FFFFFF' })); backButton.on('pointerdown', () => { this.sound.play('buttonSelect', { volume: 0.2 }); if (this.backgroundMusic) { this.backgroundMusic.stop(); } this.scene.start('MainMenu'); }); } init(data) { this.totalPlayers = data.totalPlayers; this.humanPlayers = data.humanPlayers; } preload() { this.load.image('arena', 'https://play.rosebud.ai/assets/top down circular arena neon.png?LGXQ'); this.load.image('background', 'https://play.rosebud.ai/assets/image_2024-07-21_042316836.png?88mo'); this.load.audio('backgroundMusic', 'https://play.rosebud.ai/assets/Popping Fantasy.mp3?1cL4'); this.load.audio('layerFalling', 'https://play.rosebud.ai/assets/Layer falling.mp3?YGHn'); this.load.bitmapFont('pixelFont', 'https://labs.phaser.io/assets/fonts/bitmap/carrier_command.png', 'https://labs.phaser.io/assets/fonts/bitmap/carrier_command.xml'); // Load countdown sound effects with full URLs this.load.audio('countdown3', 'https://play.rosebud.ai/assets/COuntdown 3.mp3?9UFr'); this.load.audio('countdown2', 'https://play.rosebud.ai/assets/COuntdown 2.mp3?zqIZ'); this.load.audio('countdown1', 'https://play.rosebud.ai/assets/Countdown 1.mp3?bV6O'); this.load.audio('countdownGo', 'https://play.rosebud.ai/assets/couintdown go.mp3?xFa0'); // Load elimination sound this.load.audio('eliminated', 'https://play.rosebud.ai/assets/eliminated.mp3?tguO'); // Load button hover sound this.load.audio('buttonHover', 'https://play.rosebud.ai/assets/click-for-game-menu-131903.mp3?uvCM'); } create() { // Stop any currently playing music (including main menu music) this.sound.stopAll(); // Reset game state variables this.gameStarted = false; this.gameOver = false; this.layersFallen = 0; this.shrinkTimer = 0; this.arenaRadius = 250; this.winner = null; this.readyToStart = false; this.nextLayerRadius = 250 - this.layerWidth; this.players = []; this.setupGame(); this.addMuteButton(); } setupGame() { // Clear existing game objects this.players.forEach(player => { player.nameText.destroy(); player.destroy(); }); this.players = []; if (this.arena) this.arena.destroy(); if (this.background) this.background.destroy(); if (this.timerCircle) this.timerCircle.destroy(); if (this.countdownText) this.countdownText.destroy(); if (this.eliminationText) this.eliminationText.destroy(); if (this.startButton) this.startButton.destroy(); // Stop the background music if it's already playing if (this.backgroundMusic) { this.backgroundMusic.stop(); } this.layerFallingSound = this.sound.add('layerFalling'); this.layerFallingSound.setVolume(0.3); // Set volume to 30% // Add elimination sound this.eliminationSound = this.sound.add('eliminated'); this.eliminationSound.setVolume(0.5); // Set volume to 50% this.addBackToMenuButton(); // Add this line to create the back button // Get the screen dimensions const screenWidth = this.sys.game.config.width; const screenHeight = this.sys.game.config.height; // Calculate the scale factor to fit the game in the screen const scaleX = screenWidth / 800; const scaleY = screenHeight / 600; const scale = Math.min(scaleX, scaleY); // Set the zoom of the main camera to scale the game this.cameras.main.setZoom(scale); // Center the camera this.cameras.main.centerOn(400, 300); // Add the background image this.background = this.add.image(400, 300, 'background'); this.background.setDisplaySize(screenWidth / scale, screenHeight / scale); this.background.setDepth(0); // Create the arena using the loaded image this.arena = this.add.image(400, 300, 'arena'); this.arena.setDisplaySize(500, 500); this.arena.setDepth(1); // Create a circular mask this.arenaMask = this.make.graphics(); this.updateArenaMask(); // Apply the mask to the arena const mask = this.arenaMask.createGeometryMask(); this.arena.setMask(mask); // Create players const colors = [0xFF0000, 0x0000FF, 0xFFFF00, 0xFF69B4]; const playerNames = ['P1', 'P2', 'P3', 'P4']; for (let i = 0; i < this.totalPlayers; i++) { const angle = (i / this.totalPlayers) * Math.PI * 2; const x = 400 + Math.cos(angle) * 150; const y = 300 + Math.sin(angle) * 150; const isHuman = i < this.humanPlayers; const name = isHuman ? playerNames[i] : `${playerNames[i]} (CPU)`; this.players.push(this.createPlayer(x, y, colors[i], name, isHuman)); } // Set up collision this.playerCollider = this.physics.add.collider(this.players); // Set up input for human players this.cursors = this.input.keyboard.createCursorKeys(); this.wasd = { W: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W), A: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), S: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S), D: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D) }; // Create countdown text this.countdownText = this.add.text(400, 300, '3', { fontSize: '64px', fill: '#39FF14' }).setOrigin(0.5); this.countdownText.setDepth(2); // Create timer circle this.timerCircle = this.add.graphics(); this.timerCircle.setDepth(2); // Set depth to 2 (above arena, below player sprites) // Reset game state this.gameStarted = false; this.gameOver = false; this.layersFallen = 0; this.shrinkTimer = 0; this.arenaRadius = 250; this.winner = null; // Play background music this.backgroundMusic = this.sound.add('backgroundMusic', { loop: true }); const musicVolume = localStorage.getItem('musicVolume') || 0.4; this.backgroundMusic.setVolume(musicVolume); const isMuted = localStorage.getItem('isMuted') === 'true'; this.backgroundMusic.setMute(isMuted); this.backgroundMusic.play(); // Update SFX volume const sfxVolume = localStorage.getItem('sfxVolume') || 1; [this.layerFallingSound, this.eliminationSound].forEach(sound => { if (sound) { sound.setVolume(sfxVolume); } }); // Create elimination text this.eliminationText = this.add.bitmapText(400, 30, 'pixelFont', '', 16); this.eliminationText.setOrigin(0.5); this.eliminationText.setDepth(4); // Create start button // Create start button background const buttonWidth = 200; const buttonHeight = 60; const buttonX = 400 - buttonWidth / 2; const buttonY = 300 - buttonHeight / 2; // Create an interactive zone for the entire button area const buttonZone = this.add.zone(400, 300, buttonWidth, buttonHeight) .setOrigin(0.5) .setInteractive() .setDepth(4); // Create button background const buttonBackground = this.add.graphics(); buttonBackground.fillStyle(0x000000, 1); buttonBackground.fillRect(buttonX, buttonY, buttonWidth, buttonHeight); buttonBackground.setDepth(4); // Create start button text with pixel font this.startButton = this.add.bitmapText(400, 300, 'pixelFont', 'START', 32) .setOrigin(0.5) .setTint(0x39FF14) .setDepth(5); // Add hover effects to the zone buttonZone.on('pointerover', () => { this.startButton.setTint(0xFF69B4); buttonBackground.clear(); buttonBackground.fillStyle(0x333333, 1); buttonBackground.fillRect(buttonX, buttonY, buttonWidth, buttonHeight); }); buttonZone.on('pointerout', () => { this.startButton.setTint(0x39FF14); buttonBackground.clear(); buttonBackground.fillStyle(0x000000, 1); buttonBackground.fillRect(buttonX, buttonY, buttonWidth, buttonHeight); }); buttonZone.on('pointerdown', () => { buttonZone.destroy(); this.startButton.destroy(); buttonBackground.destroy(); this.startCountdown(); }); this.readyToStart = false; this.gameStarted = false; } createPlayer(x, y, color, name, isHuman) { const player = this.add.circle(x, y, 15, color); this.physics.add.existing(player); player.body.setCircle(15); player.body.setCollideWorldBounds(false); player.body.setBounce(1); player.body.setDamping(true); player.body.setDrag(0.75); player.isHuman = isHuman; player.isAlive = true; player.isFalling = false; player.setDepth(2); // Set initial depth above arena player.color = color; // Store the player's color player.collisionTimes = {}; // New property to track collision times // Add player name const nameText = this.add.text(x, y, name, { fontSize: '12px', fill: '#39FF14' }); nameText.setOrigin(0.5); nameText.setDepth(2); // Set initial depth above arena player.nameText = nameText; return player; } startCountdown() { let count = 3; const countdownSounds = { 3: this.sound.add('countdown3', { volume: 1 }), 2: this.sound.add('countdown2', { volume: 1 }), 1: this.sound.add('countdown1', { volume: 1 }), 'go': this.sound.add('countdownGo', { volume: 1 }) }; const updateCountdown = () => { if (this.countdownText) { this.countdownText.destroy(); } if (count > 0) { this.countdownText = this.add.bitmapText(400, 300, 'pixelFont', count.toString(), 64) .setOrigin(0.5) .setDepth(5) .setTint(0x39FF14); // Neon green color try { if (countdownSounds[count]) { countdownSounds[count].play(); } } catch (error) { console.error(`Error playing countdown sound: ${error.message}`); } count--; this.time.delayedCall(1000, updateCountdown); } else if (count === 0) { this.countdownText = this.add.bitmapText(400, 300, 'pixelFont', 'GO!', 64) .setOrigin(0.5) .setDepth(5) .setTint(0x39FF14); // Neon green color try { if (countdownSounds['go']) { countdownSounds['go'].play(); } } catch (error) { console.error(`Error playing 'GO' sound: ${error.message}`); } this.readyToStart = true; this.gameStarted = true; this.time.delayedCall(1000, () => { this.countdownText.destroy(); }); } }; updateCountdown(); } update(time, delta) { if (this.gameStarted && !this.gameOver) { // Move all players (both human and AI) this.players.forEach((player, index) => { if (player.isAlive && !player.isFalling) { if (index < this.humanPlayers) { // Move human-controlled players if (index === 0) { this.movePlayer(player, this.cursors); } else if (index === 1) { this.movePlayer(player, this.wasd); } } else { // Move AI-controlled players this.moveAIPlayer(player); } } }); // Handle collisions for all players for (let i = 0; i < this.players.length; i++) { for (let j = i + 1; j < this.players.length; j++) { const player1 = this.players[i]; const player2 = this.players[j]; if (player1.isAlive && !player1.isFalling && player2.isAlive && !player2.isFalling) { this.handlePlayerCollision(player1, player2); } } } // Shrink arena every 7 seconds if (this.layersFallen < 5) { this.shrinkTimer += delta; if (this.shrinkTimer >= 7000) { this.shrinkArena(); this.shrinkTimer = 0; this.layersFallen++; this.layerFallingSound.play(); // Play the layer falling sound } else { // Update timer circle this.updateTimerCircle(); } } // Check win condition or draw this.checkGameEnd(); } // Update player name positions and handle falling this.players.forEach((player, index) => { if (player.isAlive) { player.nameText.setPosition(player.x, player.y - 20); if (player.isFalling) { this.handleFallingPlayer(player, delta); } else if (this.isPlayerMostlyOutOfBounds(player) && !this.gameOver) { this.startPlayerFalling(player); this.showEliminationMessage(index + 1, player.color); } } }); } updateTimerCircle() { const progress = this.shrinkTimer / 7000; const nextLayerRadius = this.arenaRadius - this.layerWidth; const centerX = 400; const centerY = 300; this.timerCircle.clear(); this.timerCircle.lineStyle(5, 0xFFA500, 1); // Increased line thickness from 3 to 8 this.timerCircle.beginPath(); this.timerCircle.arc(centerX, centerY, nextLayerRadius, -Math.PI / 2, -Math.PI / 2 + (2 * Math.PI * progress), false); this.timerCircle.strokePath(); } checkGameEnd() { const alivePlayers = this.players.filter(player => player.isAlive && !player.isFalling); const fallingPlayers = this.players.filter(player => player.isAlive && player.isFalling); if (alivePlayers.length === 1 && !this.winner) { // One player remains, they are the winner this.winner = alivePlayers[0]; this.declareWinner(this.winner); } else if (alivePlayers.length === 0 && fallingPlayers.length === 1 && !this.winner) { // All players are falling or eliminated, but one is still falling this.winner = fallingPlayers[0]; this.declareWinner(this.winner); } else if (alivePlayers.length === 0 && fallingPlayers.length === 0 && !this.winner) { // All players were eliminated at the exact same time this.declareDraw(); } } declareWinner(winner) { winner.body.setVelocity(0, 0); winner.body.setAcceleration(0, 0); // Add the winner text using pixel font const winnerText = this.add.bitmapText(400, 100, 'pixelFont', `${winner.nameText.text} Wins!`, 40) .setOrigin(0.5) .setDepth(4) .setTint(winner.color); // Set the text color to match the winner's color this.timerCircle.clear(); this.gameOver = true; // Update stats if (winner.isHuman) { const wins = parseInt(localStorage.getItem('wins') || '0') + 1; localStorage.setItem('wins', wins); } else { const losses = parseInt(localStorage.getItem('losses') || '0') + 1; localStorage.setItem('losses', losses); } // Add a button to play again this.addPlayAgainButton(); } declareDraw() { this.gameOver = true; // Add the draw text using pixel font const drawText = this.add.bitmapText(400, 100, 'pixelFont', "It's a Draw!", 40) .setOrigin(0.5) .setDepth(4) .setTint(0xFFFFFF); // White color for draw text this.timerCircle.clear(); // Add a button to play again this.addPlayAgainButton(); } addPlayAgainButton() { const playAgainButton = this.add.text(400, 400, 'Play Again', { fontSize: '32px', fill: '#FF00FF', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive().setDepth(1000); // Set depth to a high value playAgainButton.on('pointerover', () => playAgainButton.setStyle({ fill: '#FF69B4' })); playAgainButton.on('pointerout', () => playAgainButton.setStyle({ fill: '#FF00FF' })); playAgainButton.on('pointerdown', () => { this.sound.play('buttonSelect', { volume: 0.4 }); // Stop all sounds this.sound.stopAll(); // Reset game state this.gameStarted = false; this.gameOver = false; this.layersFallen = 0; this.shrinkTimer = 0; this.arenaRadius = 250; this.winner = null; this.readyToStart = false; this.nextLayerRadius = 250 - this.layerWidth; // Clear existing game objects this.players.forEach(player => { if (player.nameText) player.nameText.destroy(); player.destroy(); }); this.players = []; if (this.arena) this.arena.destroy(); if (this.background) this.background.destroy(); if (this.timerCircle) this.timerCircle.destroy(); if (this.countdownText) this.countdownText.destroy(); if (this.eliminationText) this.eliminationText.destroy(); if (this.startButton) this.startButton.destroy(); // Restart the scene this.scene.restart(); }); } movePlayer(player, keys) { if (!player.isAlive || !player.isHuman || player.isFalling || this.winner === player) return; const speed = 3; const friction = 0.95; let velocityX = 0; let velocityY = 0; if (keys.up && keys.up.isDown || keys.W && keys.W.isDown) { velocityY = -speed; } else if (keys.down && keys.down.isDown || keys.S && keys.S.isDown) { velocityY = speed; } if (keys.left && keys.left.isDown || keys.A && keys.A.isDown) { velocityX = -speed; } else if (keys.right && keys.right.isDown || keys.D && keys.D.isDown) { velocityX = speed; } if (velocityX === 0 && velocityY === 0) { // Apply friction when no keys are pressed player.body.setVelocity( player.body.velocity.x * friction, player.body.velocity.y * friction ); } else { // Add new velocity to current velocity player.body.setVelocity( player.body.velocity.x + velocityX, player.body.velocity.y + velocityY ); } // Cap the maximum speed const maxSpeed = 200; const currentSpeed = Math.sqrt(player.body.velocity.x ** 2 + player.body.velocity.y ** 2); if (currentSpeed > maxSpeed) { const ratio = maxSpeed / currentSpeed; player.body.setVelocity( player.body.velocity.x * ratio, player.body.velocity.y * ratio ); } } moveAIPlayer(player) { if (this.winner === player) return; const speed = 2; const centerX = 400; const centerY = 300; const innerRadius = this.nextLayerRadius * 0.5; // Define an inner circle to fight for const safeRadius = this.nextLayerRadius + 15; // Safe zone is just inside the next layer to fall const dangerRadius = this.arenaRadius - 15; // Danger zone is just inside the current outer layer // Calculate distance from center const distanceFromCenter = Phaser.Math.Distance.Between(player.x, player.y, centerX, centerY); // Find the nearest player let nearestPlayer = null; let nearestDistance = Infinity; this.players.forEach(otherPlayer => { if (otherPlayer !== player && otherPlayer.isAlive && !otherPlayer.isFalling) { const distance = Phaser.Math.Distance.Between(player.x, player.y, otherPlayer.x, otherPlayer.y); if (distance < nearestDistance) { nearestPlayer = otherPlayer; nearestDistance = distance; } } }); let targetX, targetY; // Check for stalemate if (nearestPlayer && nearestDistance < 40 && player.body.speed < 1.5) { // If in a stalemate, try to move at an angle const angleToOpponent = Phaser.Math.Angle.Between(player.x, player.y, nearestPlayer.x, nearestPlayer.y); const randomAngle = angleToOpponent + (Math.random() > 0.5 ? 1 : -1) * Math.PI / 4; // 45-degree angle targetX = player.x + Math.cos(randomAngle) * 50; targetY = player.y + Math.sin(randomAngle) * 50; } else if (distanceFromCenter > dangerRadius) { // If in the danger zone, move towards the center urgently targetX = centerX; targetY = centerY; } else if (distanceFromCenter > safeRadius) { // If outside the safe zone but not in immediate danger, move towards the safe zone const angle = Phaser.Math.Angle.Between(centerX, centerY, player.x, player.y); targetX = centerX + Math.cos(angle) * safeRadius; targetY = centerY + Math.sin(angle) * safeRadius; } else if (distanceFromCenter < innerRadius && nearestPlayer) { // If inside the inner circle and there's a nearby player, try to push them out targetX = nearestPlayer.x; targetY = nearestPlayer.y; } else if (distanceFromCenter > innerRadius && Math.random() < 0.7) { // 70% chance to move towards the inner circle if not already there const angleToCenter = Phaser.Math.Angle.Between(player.x, player.y, centerX, centerY); targetX = centerX + Math.cos(angleToCenter) * (innerRadius * 0.8); targetY = centerY + Math.sin(angleToCenter) * (innerRadius * 0.8); } else if (nearestPlayer && nearestDistance < 150) { // If a player is nearby, move towards them to push them off targetX = nearestPlayer.x; targetY = nearestPlayer.y; } else { // Otherwise, move strategically within the safe zone const randomAngle = Math.random() * Math.PI * 2; targetX = centerX + Math.cos(randomAngle) * (safeRadius * 0.8); targetY = centerY + Math.sin(randomAngle) * (safeRadius * 0.8); } // Calculate angle and velocity const angle = Phaser.Math.Angle.Between(player.x, player.y, targetX, targetY); let velocityX = Math.cos(angle) * speed; let velocityY = Math.sin(angle) * speed; // Apply an additional force towards the center if in the danger zone if (distanceFromCenter > dangerRadius) { const centerAngle = Phaser.Math.Angle.Between(player.x, player.y, centerX, centerY); velocityX += Math.cos(centerAngle) * speed * 1.5; // Increased urgency to move inward velocityY += Math.sin(centerAngle) * speed * 1.5; } // Add a small random movement to make the AI less predictable velocityX += (Math.random() - 0.5) * speed * 0.5; velocityY += (Math.random() - 0.5) * speed * 0.5; player.body.setVelocity( player.body.velocity.x + velocityX, player.body.velocity.y + velocityY ); } handlePlayerCollision(player1, player2) { if (!player1.isAlive || player1.isFalling || !player2.isAlive || player2.isFalling) return; const angle = Phaser.Math.Angle.Between(player1.x, player1.y, player2.x, player2.y); const distance = Phaser.Math.Distance.Between(player1.x, player1.y, player2.x, player2.y); const overlap = (player1.body.radius + player2.body.radius) - distance; if (overlap > 0) { const currentTime = this.time.now; const collisionKey = `${Math.min(player1.body.id, player2.body.id)}-${Math.max(player1.body.id, player2.body.id)}`; if (!player1.collisionTimes[collisionKey]) { player1.collisionTimes[collisionKey] = currentTime; player2.collisionTimes[collisionKey] = currentTime; } const collisionDuration = currentTime - player1.collisionTimes[collisionKey]; // Calculate the relative velocity between the players const relativeVelocityX = player2.body.velocity.x - player1.body.velocity.x; const relativeVelocityY = player2.body.velocity.y - player1.body.velocity.y; const relativeSpeed = Math.sqrt(relativeVelocityX * relativeVelocityX + relativeVelocityY * relativeVelocityY); let separationForce = 0; let bounceAngle = angle; if (collisionDuration > 250) { // Prolonged contact (more than quarter second) separationForce = 100 + collisionDuration * 0.5; // Increase force over time bounceAngle = angle + (Math.random() - 0.5) * Math.PI / 2; // More randomness } else if (relativeSpeed < 50) { // Low relative speed separationForce = 50; bounceAngle = angle + (Math.random() - 0.5) * Math.PI / 4; } else { separationForce = 50; } const separationX = Math.cos(bounceAngle) * separationForce; const separationY = Math.sin(bounceAngle) * separationForce; player1.body.velocity.x -= separationX; player1.body.velocity.y -= separationY; player2.body.velocity.x += separationX; player2.body.velocity.y += separationY; // Add an upward impulse for a more dynamic effect const upwardImpulse = Math.min(100, collisionDuration * 0.2); player1.body.velocity.y -= upwardImpulse; player2.body.velocity.y -= upwardImpulse; // Reset collision time if separation was significant if (separationForce > 500) { player1.collisionTimes[collisionKey] = currentTime; player2.collisionTimes[collisionKey] = currentTime; } } else { // Reset collision time if players are not colliding const collisionKey = `${Math.min(player1.body.id, player2.body.id)}-${Math.max(player1.body.id, player2.body.id)}`; delete player1.collisionTimes[collisionKey]; delete player2.collisionTimes[collisionKey]; } } shrinkArena() { this.arenaRadius -= this.layerWidth; this.nextLayerRadius = this.arenaRadius - this.layerWidth; this.updateArenaMask(); // Check if this is the last layer if (this.layersFallen === 4) { // Schedule the final arena removal this.time.delayedCall(7000, () => { this.arenaRadius = 0; this.updateArenaMask(); }); } } updateArenaMask() { this.arenaMask.clear(); if (this.arenaRadius > 0) { this.arenaMask.fillStyle(0xffffff); this.arenaMask.fillCircle(400, 300, this.arenaRadius); } } isPlayerMostlyOutOfBounds(player) { const centerX = 400; const centerY = 300; const playerRadius = 15; const distanceToCenter = Phaser.Math.Distance.Between(player.x, player.y, centerX, centerY); const distanceOutOfBounds = distanceToCenter - this.arenaRadius; return distanceOutOfBounds > playerRadius * 0.75; } startPlayerFalling(player) { player.isFalling = true; player.body.setVelocity(0, 0); player.body.setAcceleration(0, 500); // Apply gravity player.setDepth(0); // Set depth behind arena player.nameText.setDepth(0); // Set name text depth behind arena player.body.setCollideWorldBounds(false); player.body.setEnable(false); // Disable physics body // Play elimination sound this.eliminationSound.play(); } handleFallingPlayer(player, delta) { player.setScale(player.scale * 0.99); // Shrink the player player.nameText.setScale(player.nameText.scale * 0.99); // Shrink the name text if (player.scale < 0.1) { player.isAlive = false; player.nameText.destroy(); player.destroy(); } } showEliminationMessage(playerNumber, color) { this.eliminationText.setText(`Player ${playerNumber} has been eliminated!`); this.eliminationText.setTint(color); this.time.delayedCall(2000, () => { this.eliminationText.setText(''); }); } addMuteButton() { const isMuted = localStorage.getItem('isMuted') === 'true'; const muteButton = this.add.text(20, this.cameras.main.height - 40, isMuted ? 'UNMUTE ' : 'MUTE ', { fontSize: '24px', fill: '#FFFFFF' }); muteButton.setInteractive(); muteButton.setScrollFactor(0); muteButton.setDepth(1000); muteButton.on('pointerdown', () => { this.sound.play('buttonSelect', { volume: 0.4 }); const newMuteState = !this.backgroundMusic.mute; this.backgroundMusic.setMute(newMuteState); localStorage.setItem('isMuted', newMuteState); muteButton.setText(newMuteState ? 'UNMUTE ' : 'MUTE '); }); // Set initial mute state for background music only if (this.backgroundMusic) { this.backgroundMusic.setMute(isMuted); } } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 700, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, // Keeping gravity at 0 for SUMO game debug: false } }, scene: [MainMenu, GameSetup, SUMOGame], crisp: true, }; window.phaserGame = new Phaser.Game(config); window.phaserGame.scale.pageAlignHorizontally = true; window.phaserGame.scale.pageAlignVertically = true; // Remove the resize event listener as it's no longer needed with Phaser.Scale.FIT