// SpacePropulsionGame.js /**************************** * Welcome Screen Scene ****************************/ class WelcomeScreen extends Phaser.Scene { constructor() { super({ key: 'WelcomeScreen' }); } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/backgroundNebula.png?9ZzW'); this.load.image('mudLogo', 'https://play.rosebud.ai/assets/MUD logo.jpg?95p4'); this.load.image('exitPortal', 'https://play.rosebud.ai/assets/Dafs_Portal-removebg.png?LbcX'); } create() { // Add background const background = this.add.image(400, 300, 'background'); 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); // Add version number to top left this.add.text(20, 20, 'v1.1.5', { fontSize: '14px', fill: '#ffffff' }); // Add title const title = this.add.text(400, 60, 'PROPULSION PANIC', { fontSize: '36px', fontWeight: 'bold', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add description const description = [ 'Race Against Time!', '', 'Your Mission:', '• Move your ship to collect the crystal prize', '• Complete all 10 levels as quickly as possible', '• Navigate using propulsion orbs', '', 'Tips:', '• Click/tap to shoot propulsion orbs', '• Collect used orbs to reuse them', '• Your orbs are restored at each level', '• Plan your route carefully' ]; const descriptionText = this.add.text(400, 280, description, { fontSize: '16px', fill: '#ffffff', align: 'center', lineSpacing: 15 }).setOrigin(0.5); // Create start button const startButton = this.add.rectangle(400, 520, 200, 50, 0x4a4a4a); const startText = this.add.text(400, 520, 'START GAME', { fontSize: '20px', fill: '#ffffff', fontWeight: 'bold' }).setOrigin(0.5); // Make button interactive startButton.setInteractive(); // Add hover effects startButton.on('pointerover', () => { startButton.setFillStyle(0x6a6a6a); startText.setScale(1.1); }); startButton.on('pointerout', () => { startButton.setFillStyle(0x4a4a4a); startText.setScale(1); }); // Add click handler to start the game startButton.on('pointerdown', () => { this.cameras.main.fade(500, 0, 0, 0); this.time.delayedCall(500, () => { this.scene.start('GameScene'); }); }); // Add MUD logo to bottom right const mudLogo = this.add.image(700, 550, 'mudLogo'); mudLogo.setScale(0.08); // Scale down the 1024x1024 logo // Add thank you text this.add.text(400, 560, 'Special thanks to Daf_Punk for contributing\nthe amazing human-made artwork and music!', { fontSize: '16px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); } } /**************************** * Main Game Scene ****************************/ class SpacePropulsionGame extends Phaser.Scene { constructor() { super({ key: 'GameScene' }); this.adventureMusic = null; this.battleMusic = null; this.currentMusic = null; this.collectSound = null; this.hero = null; this.prize = null; this.exit = null; this.walls = null; this.monster = null; this.blackHole = null; this.destroyedProjectiles = new Set(); // Track destroyed projectiles this.monsterSpeed = 75; // Reduced by 50% this.monsterTargetAngle = 0; this.monsterLastDirectionChange = 0; this.monsterDirectionChangeInterval = 1000; // Change direction every 1 second this.monsterRandomness = 0.5; // How much random movement to add (0-1) this.timer = 0; this.timerText = null; this.timerEvent = null; this.propulsionForce = 300; this.heroMass = 10; this.availableProjectiles = 16; this.projectileText = null; this.level = 1; this.levelText = null; this.baseHeroSize = 60; } /******************** * Asset Loading ********************/ preload() { // Load all generated assets this.load.image('background', 'https://play.rosebud.ai/assets/backgroundNebula.png?9ZzW'); this.load.image('player', 'https://play.rosebud.ai/assets/player.png?mWas'); this.load.audio('adventureMusic', 'https://play.rosebud.ai/assets/Welcome to the Adventure.mp3?WNnh'); this.load.audio('battleMusic', 'https://play.rosebud.ai/assets/Sci-fi Battle Theme.mp3?MZYG'); this.load.image('propulsionOrb', 'https://play.rosebud.ai/assets/Dafs_Orb Updated.png?NPAD'); this.load.image('prizeCrystal', 'https://play.rosebud.ai/assets/Prize-Daf.png?Rjop'); } /******************** * Game Initialization ********************/ create() { // Initialize both music tracks if they don't exist if (!this.adventureMusic) { this.adventureMusic = this.sound.add('adventureMusic', { volume: 0.5, loop: true }); } if (!this.battleMusic) { this.battleMusic = this.sound.add('battleMusic', { volume: 0.5, loop: true }); } // Handle music based on level if (this.level < 6) { if (!this.currentMusic || this.currentMusic !== this.adventureMusic) { if (this.currentMusic) { this.currentMusic.stop(); } this.currentMusic = this.adventureMusic; this.currentMusic.play(); } } else { if (!this.currentMusic || this.currentMusic !== this.battleMusic) { if (this.currentMusic) { this.currentMusic.stop(); } this.currentMusic = this.battleMusic; this.currentMusic.play(); } } // Set space background const background = this.add.image(400, 300, 'background'); const scaleX = this.sys.game.config.width / background.width; // Add Help button next to Reset buttons const helpButton = this.add.rectangle(360, 570, 84, 21, 0x4a4a4a); const helpText = this.add.text(360, 570, 'Help', { fontSize: '12px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add version number text in bottom right corner const versionText = this.add.text(750, 580, 'v1.1.5', { fontSize: '12px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Make help button interactive helpButton.setInteractive(); // Add hover effect to help button helpButton.on('pointerover', () => { helpButton.setFillStyle(0x6a6a6a); }); helpButton.on('pointerout', () => { helpButton.setFillStyle(0x4a4a4a); }); // Add click handler for help button helpButton.on('pointerdown', () => { this.showHelpScreen(); }); const scaleY = this.sys.game.config.height / background.height; const scale = Math.max(scaleX, scaleY); background.setScale(scale); // Create walls group - now dynamic instead of static this.walls = this.physics.add.staticGroup(); // Define safe zones const safeZones = [{ x: 100, y: 300, radius: 100 }, // Hero starting area { x: 600, y: 300, radius: 80 }, // Prize area { x: 50, y: 200, radius: 80 } // Exit area ]; // Generate random walls based on level let numWalls; if (this.level === 1) { numWalls = 4; } else if (this.level === 2) { numWalls = 5; } else if (this.level === 3) { numWalls = 6; } else { numWalls = 7; } const minDistance = 100; // Increased minimum distance between walls const attemptLimit = 100; // Increased maximum attempts to place each wall for (let i = 0; i < numWalls; i++) { let wallPlaced = false; let attempts = 0; while (!wallPlaced && attempts < attemptLimit) { const isVertical = Phaser.Math.Between(0, 1) === 1; let width, height; if (isVertical) { width = 20; height = Phaser.Math.Between(100, 200); } else { width = Phaser.Math.Between(100, 200); height = 20; } // Calculate potential position let x = isVertical ? Phaser.Math.Between(200, 600) : Phaser.Math.Between(200, 500); let y = isVertical ? Phaser.Math.Between(150, 450) : Phaser.Math.Between(100, 500); // Check if position is valid let isValidPosition = true; // Check distance from safe zones for (const zone of safeZones) { const distance = Phaser.Math.Distance.Between(x, y, zone.x, zone.y); if (distance < zone.radius) { isValidPosition = false; break; } } // Check distance and overlap with other walls if (isValidPosition) { const existingWalls = this.walls.getChildren(); for (const existingWall of existingWalls) { // Calculate boundaries of new wall const newWallLeft = x - width / 2; const newWallRight = x + width / 2; const newWallTop = y - height / 2; const newWallBottom = y + height / 2; // Calculate boundaries of existing wall const existingWallLeft = existingWall.x - existingWall.width / 2; const existingWallRight = existingWall.x + existingWall.width / 2; const existingWallTop = existingWall.y - existingWall.height / 2; const existingWallBottom = existingWall.y + existingWall.height / 2; // Check for overlap with padding const padding = minDistance / 2; if (!(newWallRight + padding < existingWallLeft - padding || newWallLeft - padding > existingWallRight + padding || newWallBottom + padding < existingWallTop - padding || newWallTop - padding > existingWallBottom + padding)) { isValidPosition = false; break; } } } // If position is valid, create the wall if (isValidPosition) { // Create wall container const wallContainer = this.add.container(x, y); // Create main wall body with gradient const wallGraphics = this.add.graphics(); wallGraphics.lineStyle(2, 0x6666ff, 1); wallGraphics.fillGradientStyle(0x4a4a4a, 0x4a4a4a, 0x666666, 0x666666, 1); wallGraphics.fillRect(-width / 2, -height / 2, width, height); wallGraphics.strokeRect(-width / 2, -height / 2, width, height); // Add some tech-style details const detailGraphics = this.add.graphics(); detailGraphics.lineStyle(1, 0x8888ff, 0.5); // Add diagonal lines for tech effect for (let i = -width / 2; i < width / 2; i += 20) { detailGraphics.moveTo(i, -height / 2); detailGraphics.lineTo(i + 10, height / 2); } // Add to container wallContainer.add([wallGraphics, detailGraphics]); // Add physics body const wall = this.add.rectangle(x, y, width, height); this.physics.add.existing(wall, true); wall.body.immovable = true; // Make walls completely immovable using the property this.walls.add(wall); // Add to walls group after physics setup wallPlaced = true; } attempts++; } } // Add some stars in the background (kept for additional atmosphere) for (let i = 0; i < 50; i++) { const x = Phaser.Math.Between(0, 800); const y = Phaser.Math.Between(0, 600); const size = Phaser.Math.Between(1, 2); const star = this.add.circle(x, y, size, 0xFFFFFF); this.tweens.add({ targets: star, alpha: 0.2, duration: Phaser.Math.Between(1000, 3000), yoyo: true, repeat: -1 }); } // Create hero (now using the space pod sprite) const heroSize = 60; // Increased size for the hero by 50% this.hero = this.add.sprite(100, 300, 'player'); const heroScale = heroSize / Math.max(this.hero.width, this.hero.height); this.hero.setScale(heroScale); this.physics.add.existing(this.hero); this.hero.body.setMass(this.heroMass); // Set the mass this.hero.body.setDrag(0, 0); // No drag this.hero.body.setCollideWorldBounds(true); this.hero.body.setBounce(0.8); // Add collision between hero and walls // Add simple collider between hero and walls this.physics.add.collider(this.hero, this.walls, null, null, this); // Create black hole for levels 3-5 and 8-10 if ((this.level >= 3 && this.level <= 5) || this.level >= 8) { // Create black hole in random position near center const centerX = this.sys.game.config.width / 2; const centerY = this.sys.game.config.height / 2; const randomX = centerX + Phaser.Math.Between(-100, 100); const randomY = centerY + Phaser.Math.Between(-100, 100); // Create black hole using a dark circle // Create the main black hole with physics body first this.blackHole = this.add.circle(randomX, randomY, 20, 0x000000); this.physics.add.existing(this.blackHole, true); // Create swirling effect container at the same position this.blackHoleEffects = this.add.container(randomX, randomY); // Create visual effects for (let i = 0; i < 3; i++) { const swirl = this.add.graphics(); swirl.lineStyle(3, 0x6600ff, 0.3); swirl.beginPath(); swirl.arc(0, 0, 30 + (i * 10), 0, Math.PI * 2); swirl.strokePath(); this.blackHoleEffects.add(swirl); // Add rotation animation this.tweens.add({ targets: swirl, rotation: Math.PI * 2, duration: 2000 + (i * 1000), repeat: -1, ease: 'Linear' }); } // Add pulsing effect to the container this.tweens.add({ targets: this.blackHoleEffects, scaleX: 1.2, scaleY: 1.2, duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } // Create prize (now using the crystal sprite) const prizeSize = 50; // Adjusted size for the new asset this.prize = this.add.sprite(600, 300, 'prizeCrystal'); const prizeScale = prizeSize / Math.max(this.prize.width, this.prize.height); this.prize.setScale(prizeScale); this.physics.add.existing(this.prize, true); // Create monster(s) based on level if (this.level >= 6) { // First monster this.monster = this.add.sprite(this.prize.x + 50, this.prize.y, 'player'); this.physics.add.existing(this.monster); // Add physics body first // Set a smaller circular hitbox for the monster this.monster.body.setCircle(15); // Small circular hitbox this.monster.body.setOffset( (this.monster.width * 0.5) - 15, // Center the circle horizontally (this.monster.height * 0.5) - 15 // Center the circle vertically ); // Create second monster for level 10 if (this.level === 10) { const monster2 = this.add.sprite(this.prize.x - 50, this.prize.y, 'player'); monster2.setTint(0xff0000); const monsterSize = 40; const monsterScale = monsterSize / Math.max(monster2.width, monster2.height); monster2.setScale(monsterScale); this.physics.add.existing(monster2); // Set smaller circular hitbox for second monster after physics is added monster2.body.setCircle(15); monster2.body.setOffset( (monster2.width * 0.5) - 15, (monster2.height * 0.5) - 15 ); monster2.body.setCollideWorldBounds(true); // Add collision between second monster and walls this.physics.add.collider(monster2, this.walls); // Add collision between second monster and hero this.physics.add.overlap(this.hero, monster2, () => { const currentTimer = this.timer; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; }, null, this); } this.monster.setTint(0xff0000); // Make it red const monsterSize = 40; const monsterScale = monsterSize / Math.max(this.monster.width, this.monster.height); this.monster.setScale(monsterScale); this.physics.add.existing(this.monster); this.monster.body.setCollideWorldBounds(true); // Add collision between monster and walls this.physics.add.collider(this.monster, this.walls); // Add collision between monster and hero this.physics.add.overlap(this.hero, this.monster, () => { const currentTimer = this.timer; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; }, null, this); } // Add collision detection between hero and prize this.physics.add.overlap(this.hero, this.prize, this.collectPrize, null, this); // Handle click/tap input this.input.on('pointerdown', (pointer) => { // Remove instruction text on first click if (this.instructionText) { this.instructionText.destroy(); this.instructionText = null; } if (this.availableProjectiles <= 0) return; const angle = Phaser.Math.Angle.Between( this.hero.x, this.hero.y, pointer.x, pointer.y ); // Create propulsion orb // Create propulsion orb at a slight offset from hero const offsetDistance = 30; const spawnX = this.hero.x + Math.cos(angle) * offsetDistance; const spawnY = this.hero.y + Math.sin(angle) * offsetDistance; // Create propulsion orb const orb = this.physics.add.sprite(spawnX, spawnY, 'propulsionOrb'); orb.setScale(0.06); // Decreased size by 40% orb.setActive(true).setVisible(true); orb.depth = 1; orb.isDestroyed = false; // Add flag to track destruction state // Add black hole collision if it exists if (this.blackHole) { this.physics.add.overlap(orb, this.blackHole, (projectile, blackHole) => { // Add particle effect when orb is absorbed const particles = this.add.particles(projectile.x, projectile.y, 'propulsionOrb', { scale: { start: 0.05, end: 0 }, speed: 50, lifespan: 300, blendMode: 'ADD', quantity: 1 }); // Stop particle emission after a short time this.time.delayedCall(300, () => { particles.destroy(); }); if (!projectile.isDestroyed) { // Add check to prevent multiple destructions projectile.isDestroyed = true; this.destroyedProjectiles.add(this.availableProjectiles); // Create absorption effect this.tweens.add({ targets: projectile, scale: 0, duration: 200, onComplete: () => { projectile.destroy(); } }); } }, null, this); } // Rotate orb to face direction of travel orb.rotation = angle; orb.body.setVelocity( Math.cos(angle) * this.propulsionForce, Math.sin(angle) * this.propulsionForce ); // Update hero mass and adjust velocity accordingly const oldMass = this.heroMass; this.heroMass *= 0.96; // Decrease mass by 4% this.hero.body.setMass(this.heroMass); // Update hero scale based on mass const newScale = (this.baseHeroSize / this.hero.width) * (this.heroMass / 10); this.hero.setScale(newScale); // Calculate new velocity based on conservation of momentum const velocityMultiplier = oldMass / this.heroMass; const oppositeForce = this.propulsionForce / (this.heroMass * 2); this.hero.body.setVelocity( (this.hero.body.velocity.x * velocityMultiplier) - Math.cos(angle) * oppositeForce, (this.hero.body.velocity.y * velocityMultiplier) - Math.sin(angle) * oppositeForce ); // Set physics properties for the orb orb.body.setBounce(1); orb.body.setCollideWorldBounds(true); // Add collision between orb and walls // Add collision between orb and walls with physics response this.physics.add.collider(orb, this.walls, null, null, this); // Create collision handling for the orb with a delay setTimeout(() => { this.physics.add.overlap(this.hero, orb, (hero, collidedOrb) => { collidedOrb.destroy(); // Increase hero's mass by 4% this.heroMass *= 1.04; // Increase mass by 4% this.hero.body.setMass(this.heroMass); // Update hero scale based on mass const newScale = (this.baseHeroSize / this.hero.width) * (this.heroMass / 10); this.hero.setScale(newScale); this.availableProjectiles++; this.projectileText.setText(`Orbs Left: ${this.availableProjectiles}`); }); }, 500); // Half second delay before collection is possible // Update projectile count this.availableProjectiles--; this.projectileText.setText(`Orbs Left: ${this.availableProjectiles}`); }); // Add text instructions with stored reference in the center of the screen const centerX = this.sys.game.config.width / 2; const centerY = this.sys.game.config.height / 2; this.instructionText = this.add.text(centerX, centerY, 'Click/Tap to propel yourself\nCollect the crystal!\nThen Get to the Exit!!', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5, 0.5); // Display level number this.levelText = this.add.text(650, 10, `Level: ${this.level}`, { fontSize: '20px', fill: '#ffffff' }); // Display timer this.timerText = this.add.text(650, 40, 'Time: 0:00', { fontSize: '20px', fill: '#ffffff' }); // Start the timer this.timerEvent = this.time.addEvent({ delay: 1000, callback: this.updateTimer, callbackScope: this, loop: true }); // Display remaining projectiles this.projectileText = this.add.text(10, 10, `Orbs Left: ${this.availableProjectiles}`, { fontSize: '20px', fill: '#ffffff' }); // Add Reset Level button const resetLevelButton = this.add.rectangle(240, 570, 84, 21, 0x4a4a4a); const resetLevelText = this.add.text(240, 570, 'Reset Level', { fontSize: '12px', fill: '#ffffff' }).setOrigin(0.5); // Add Reset Game button const resetGameButton = this.add.rectangle(480, 570, 84, 21, 0x4a4a4a); const resetGameText = this.add.text(480, 570, 'Reset Game', { fontSize: '12px', fill: '#ffffff' }).setOrigin(0.5); // Make buttons interactive resetLevelButton.setInteractive(); resetGameButton.setInteractive(); // Add hover effects resetLevelButton.on('pointerover', () => resetLevelButton.setFillStyle(0x6a6a6a)); resetLevelButton.on('pointerout', () => resetLevelButton.setFillStyle(0x4a4a4a)); resetGameButton.on('pointerover', () => resetGameButton.setFillStyle(0x6a6a6a)); resetGameButton.on('pointerout', () => resetGameButton.setFillStyle(0x4a4a4a)); // Add click handlers // Add click handlers with confirmation popups resetLevelButton.on('pointerdown', () => { // Pause the game this.physics.pause(); if (this.timerEvent) { this.timerEvent.paused = true; } // Create popup background const popup = this.add.rectangle(400, 300, 400, 200, 0x111111, 0.95); const message = this.add.text(400, 270, 'Are you sure you want to\nreset this level?', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Create Yes button const yesButton = this.add.rectangle(300, 350, 120, 40, 0x4a4a4a); const yesText = this.add.text(300, 350, 'Yes', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); // Create No button const noButton = this.add.rectangle(500, 350, 120, 40, 0x4a4a4a); const noText = this.add.text(500, 350, 'No', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); // Make buttons interactive yesButton.setInteractive(); noButton.setInteractive(); // Add hover effects yesButton.on('pointerover', () => yesButton.setFillStyle(0x6a6a6a)); yesButton.on('pointerout', () => yesButton.setFillStyle(0x4a4a4a)); noButton.on('pointerover', () => noButton.setFillStyle(0x6a6a6a)); noButton.on('pointerout', () => noButton.setFillStyle(0x4a4a4a)); // Handle Yes click yesButton.on('pointerdown', () => { const currentTimer = this.timer; const currentLevel = this.level; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; this.level = currentLevel; }); // Handle No click noButton.on('pointerdown', () => { popup.destroy(); message.destroy(); yesButton.destroy(); yesText.destroy(); noButton.destroy(); noText.destroy(); this.physics.resume(); if (this.timerEvent) { this.timerEvent.paused = false; } }); }); resetGameButton.on('pointerdown', () => { // Pause the game this.physics.pause(); if (this.timerEvent) { this.timerEvent.paused = true; } // Create popup background const popup = this.add.rectangle(400, 300, 400, 200, 0x111111, 0.95); const message = this.add.text(400, 270, 'Are you sure you want to\nreset the entire game?', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Create Yes button const yesButton = this.add.rectangle(300, 350, 120, 40, 0x4a4a4a); const yesText = this.add.text(300, 350, 'Yes', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); // Create No button const noButton = this.add.rectangle(500, 350, 120, 40, 0x4a4a4a); const noText = this.add.text(500, 350, 'No', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); // Make buttons interactive yesButton.setInteractive(); noButton.setInteractive(); // Add hover effects yesButton.on('pointerover', () => yesButton.setFillStyle(0x6a6a6a)); yesButton.on('pointerout', () => yesButton.setFillStyle(0x4a4a4a)); noButton.on('pointerover', () => noButton.setFillStyle(0x6a6a6a)); noButton.on('pointerout', () => noButton.setFillStyle(0x4a4a4a)); // Handle Yes click yesButton.on('pointerdown', () => { this.level = 1; this.timer = 0; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); }); // Handle No click noButton.on('pointerdown', () => { popup.destroy(); message.destroy(); yesButton.destroy(); yesText.destroy(); noButton.destroy(); noText.destroy(); this.physics.resume(); if (this.timerEvent) { this.timerEvent.paused = false; } }); }); } /******************** * Game Events ********************/ collectPrize(hero, prize) { // Create and play collection sound if (!this.collectSound) { const oscillator = this.sound.context.createOscillator(); const gainNode = this.sound.context.createGain(); oscillator.connect(gainNode); gainNode.connect(this.sound.context.destination); oscillator.frequency.setValueAtTime(880, this.sound.context.currentTime); // A5 note gainNode.gain.setValueAtTime(0.1, this.sound.context.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, this.sound.context.currentTime + 0.5); oscillator.start(); oscillator.stop(this.sound.context.currentTime + 0.5); } prize.destroy(); // Create exit portal (now using the portal sprite) const portalSize = 75; // Increased from 60 to 75 (25% larger) this.exit = this.add.sprite(50, 200, 'exitPortal'); // Changed X from 750 to 50 to position on left side const portalScale = portalSize / Math.max(this.exit.width, this.exit.height); this.exit.setScale(portalScale); this.physics.add.existing(this.exit, true); // Add portal animation this.tweens.add({ targets: this.exit, alpha: 0.7, duration: 1000, yoyo: true, repeat: -1 }); this.physics.add.overlap(this.hero, this.exit, this.nextLevel, null, this); this.add.text(400, 550, 'Now reach the portal!', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); } nextLevel() { // Create warping sound effect const audioContext = this.sound.context; const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); // Set initial frequency and gain oscillator.frequency.setValueAtTime(100, audioContext.currentTime); gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); // Create the warping effect oscillator.frequency.exponentialRampToValueAtTime(2000, audioContext.currentTime + 1.0); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1.0); // Start and stop the sound oscillator.start(); oscillator.stop(audioContext.currentTime + 1.0); this.level++; // Increment level before restart if (this.level === 3) { // Pause the game this.physics.pause(); // Create warning popup const popup = this.add.rectangle(400, 300, 450, 250, 0x111111, 0.95); this.add.text(400, 270, 'Warning!\n\nA dangerous black hole has appeared!\nPropulsion orbs that touch it\nwill be lost forever!', { fontSize: '18px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add continue button const continueButton = this.add.rectangle(400, 350, 160, 40, 0x4a4a4a); const continueText = this.add.text(400, 350, 'Continue', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); continueButton.setInteractive(); continueButton.on('pointerdown', () => { popup.destroy(); continueText.destroy(); continueButton.destroy(); const currentTimer = this.timer; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; }); return; } if (this.level === 6) { // Pause the game this.physics.pause(); // Create warning popup const popup = this.add.rectangle(400, 300, 400, 200, 0x111111, 0.95); this.add.text(400, 270, 'Warning!\nA monster will now chase you!\nAvoid being caught!', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add continue button const continueButton = this.add.rectangle(400, 350, 160, 40, 0x4a4a4a); const continueText = this.add.text(400, 350, 'Continue', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); continueButton.setInteractive(); continueButton.on('pointerdown', () => { popup.destroy(); continueText.destroy(); continueButton.destroy(); const currentTimer = this.timer; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; }); return; } // Add warning for level 8 if (this.level === 8) { // Pause the game this.physics.pause(); // Create warning popup const popup = this.add.rectangle(400, 300, 400, 200, 0x111111, 0.95); this.add.text(400, 270, 'Warning!\nBoth the black hole and monster\nwill now challenge you!', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add continue button const continueButton = this.add.rectangle(400, 350, 160, 40, 0x4a4a4a); const continueText = this.add.text(400, 350, 'Continue', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); continueButton.setInteractive(); continueButton.on('pointerdown', () => { popup.destroy(); continueText.destroy(); continueButton.destroy(); const currentTimer = this.timer; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; }); return; } // Add warning for level 10 if (this.level === 10) { // Pause the game this.physics.pause(); // Create warning popup const popup = this.add.rectangle(400, 300, 400, 200, 0x111111, 0.95); this.add.text(400, 270, 'Final Challenge!\nTwo monsters and a black hole!\nGood luck!', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add continue button const continueButton = this.add.rectangle(400, 350, 160, 40, 0x4a4a4a); const continueText = this.add.text(400, 350, 'Continue', { fontSize: '20px', fill: '#ffffff' }).setOrigin(0.5); continueButton.setInteractive(); continueButton.on('pointerdown', () => { popup.destroy(); continueText.destroy(); continueButton.destroy(); const currentTimer = this.timer; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); this.timer = currentTimer; }); return; } if (this.level > 10) { // Stop the timer this.timerEvent.remove(); // Calculate minutes and seconds const minutes = Math.floor(this.timer / 60); const seconds = this.timer % 60; const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}`; // Create victory popup const popup = this.add.rectangle(400, 300, 400, 200, 0x111111, 0.95); this.add.text(400, 270, 'Congratulations!\nYou have completed all levels!', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); this.add.text(400, 320, `Your final time: ${timeString}`, { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add reset game button const resetButton = this.add.rectangle(400, 380, 160, 40, 0x4a4a4a); const resetText = this.add.text(400, 380, 'Reset Game', { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Make button interactive resetButton.setInteractive(); resetButton.on('pointerdown', () => { this.level = 1; this.timer = 0; this.heroMass = 10; this.availableProjectiles = 16; this.scene.restart(); }); // Add hover effect resetButton.on('pointerover', () => { resetButton.setFillStyle(0x6a6a6a); }); resetButton.on('pointerout', () => { resetButton.setFillStyle(0x4a4a4a); }); // Stop the game this.physics.pause(); return; } const currentTimer = this.timer; // Store current timer value this.heroMass = 10; // Reset hero mass to original value this.availableProjectiles = 16; // Reset projectiles to original amount this.scene.restart(); this.timer = currentTimer; // Restore timer value after restart } /******************** * UI Components ********************/ showHelpScreen() { // Pause the game and timer this.physics.pause(); if (this.timerEvent) { this.timerEvent.paused = true; } // Create semi-transparent background const helpBg = this.add.rectangle(400, 300, 600, 450, 0x111111, 0.95); // Add game title with stored reference const titleText = this.add.text(400, 120, 'Propulsion Panic', { fontSize: '22px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add game instructions const instructions = [ 'How to Play:', '', '1. Click/Tap anywhere to shoot propulsion orbs', '2. Use the orbs to navigate through space', '3. Collect the crystal in each level', '4. Reach the portal to advance', '5. Complete all 10 levels', '', 'Tips:', '- Shooting orbs reduces your mass', '- Collecting used orbs increases your mass', '- Manage your orbs wisely', '', 'Music Controls:' ]; const instructionsText = this.add.text(400, 240, instructions, { fontSize: '14px', fill: '#ffffff', align: 'left', lineSpacing: 7 }).setOrigin(0.5); // Add volume slider const sliderBar = this.add.rectangle(400, 400, 200, 10, 0x666666); const sliderKnob = this.add.circle(400 + (this.currentMusic.volume * 200 - 100), 400, 15, 0x4a4a4a); // Make slider interactive sliderKnob.setInteractive({ draggable: true }); // Add volume label const volumeLabel = this.add.text(400, 370, 'Volume', { fontSize: '14px', fill: '#ffffff' }).setOrigin(0.5); // Add mute button const muteButton = this.add.rectangle(400, 440, 100, 30, 0x4a4a4a); const muteText = this.add.text(400, 440, this.currentMusic.volume > 0 ? 'Mute' : 'Unmute', { fontSize: '14px', fill: '#ffffff' }).setOrigin(0.5); // Handle slider drag sliderKnob.on('drag', (pointer, dragX) => { // Constrain drag to slider bounds const x = Phaser.Math.Clamp(dragX, sliderBar.x - 100, sliderBar.x + 100); sliderKnob.x = x; // Calculate and set volume (0-1) const volume = (x - (sliderBar.x - 100)) / 200; this.currentMusic.setVolume(volume); // Update mute button text muteText.setText(volume > 0 ? 'Mute' : 'Unmute'); }); // Make mute button interactive muteButton.setInteractive(); // Add hover effect to mute button muteButton.on('pointerover', () => muteButton.setFillStyle(0x6a6a6a)); muteButton.on('pointerout', () => muteButton.setFillStyle(0x4a4a4a)); // Handle mute button click muteButton.on('pointerdown', () => { if (this.currentMusic.volume > 0) { this.currentMusic.setVolume(0); sliderKnob.x = sliderBar.x - 100; muteText.setText('Unmute'); } else { this.currentMusic.setVolume(0.5); sliderKnob.x = sliderBar.x; muteText.setText('Mute'); } }); // Add close button const closeButton = this.add.rectangle(250, 480, 160, 40, 0x4a4a4a); const closeText = this.add.text(250, 480, 'Close', { fontSize: '14px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Make close button interactive closeButton.setInteractive(); // Add hover effects closeButton.on('pointerover', () => closeButton.setFillStyle(0x6a6a6a)); closeButton.on('pointerout', () => closeButton.setFillStyle(0x4a4a4a)); // Add click handler for close button closeButton.on('pointerdown', () => { helpBg.destroy(); closeButton.destroy(); closeText.destroy(); instructionsText.destroy(); sliderBar.destroy(); sliderKnob.destroy(); volumeLabel.destroy(); muteButton.destroy(); muteText.destroy(); titleText.destroy(); this.physics.resume(); if (this.timerEvent) { this.timerEvent.paused = false; } }); } /******************** * Utility Functions ********************/ updateTimer() { this.timer++; const minutes = Math.floor(this.timer / 60); const seconds = this.timer % 60; this.timerText.setText(`Time: ${minutes}:${seconds.toString().padStart(2, '0')}`); } update() { // Update monster movement if it exists if (this.monster && this.monster.active) { const currentTime = this.time.now; // Calculate base angle to player const angleToPlayer = Phaser.Math.Angle.Between( this.monster.x, this.monster.y, this.hero.x, this.hero.y ); // Check if it's time to change direction if (currentTime - this.monsterLastDirectionChange >= this.monsterDirectionChangeInterval) { // Calculate a new random angle offset between -PI/2 and PI/2 const randomOffset = (Math.random() - 0.5) * Math.PI * this.monsterRandomness; this.monsterTargetAngle = angleToPlayer + randomOffset; this.monsterLastDirectionChange = currentTime; // Check if monster is stuck (close to a wall and not moving much) const speed = Math.sqrt( Math.pow(this.monster.body.velocity.x, 2) + Math.pow(this.monster.body.velocity.y, 2) ); if (speed < 10) { // If stuck, make a more dramatic direction change this.monsterTargetAngle = angleToPlayer + (Math.random() * Math.PI - Math.PI / 2); } } // Gradually interpolate between current velocity and desired velocity const currentAngle = Math.atan2( this.monster.body.velocity.y, this.monster.body.velocity.x ); // Calculate angle difference let angleDiff = this.monsterTargetAngle - currentAngle; // Normalize angle difference to [-PI, PI] while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI; while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI; // Smoothly interpolate between current angle and target angle const interpolationFactor = 0.1; const interpolatedAngle = currentAngle + (angleDiff * interpolationFactor); // Set the monster's velocity based on the interpolated angle this.monster.body.setVelocity( Math.cos(interpolatedAngle) * this.monsterSpeed, Math.sin(interpolatedAngle) * this.monsterSpeed ); // Rotate monster to face movement direction this.monster.rotation = interpolatedAngle + Math.PI / 2; } } } /**************************** * Game Configuration ****************************/ const config = { type: Phaser.AUTO, parent: document.getElementById('renderDiv'), scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { debug: false, gravity: { x: 0, y: 0 } } }, scene: [WelcomeScreen, SpacePropulsionGame] }; window.phaserGame = new Phaser.Game(config);