class BalloonGame extends Phaser.Scene { constructor() { super('BalloonGame'); this.init(); } init() { this.balloons = []; this.colors = [0xff0000, 0x0000ff, 0x00ff00, 0x00ffff, 0x800080]; // Red, blue, green, teal, purple this.clicksRequired = [1, 2, 3, 4, 5]; // Clicks required for each balloon color this.velocityMultipliers = [1.7, 1.4, 0.6, 0.8, 1.2]; // Velocity multipliers for each balloon color (red, blue, green, teal, purple) this.damageValues = [1, 5, 10, 15, 20]; // Damage values for each balloon color (red, blue, green, teal, purple) this.baseVelocity = 290; // Base velocity for red balloons this.maxHealth = 100; // player's max health this.currentHealth = 100; // player's current health this.waveNumber = 1; // Track current wave number this.maxBalloons = 4; // Maximum number of balloons on screen this.spawnedBalloons = 0; // Number of balloons spawned for the current wave this.totalBalloonsPerWave = 2; // Total number of balloons for the current wave this.waveMiddle = 1; // Middle point of the wave for spawning powerups this.isGameOver = false; // Game over state this.isGameStarted = false; // Game started state this.timeSinceLastBalloonDestroyed = 0; // Time since the last balloon was destroyed this.waveDelayDuration = 1000; // 2 seconds delay before spawning a new wave this.highestWave = localStorage.getItem('highestWave') || 0; // Get the highest wave from localStorage or set it to 1 if not found this.isMuted = false; // Flag to track if the game is muted this.wavesWithoutPopping = 0; // Counter for waves without popping a balloon this.isGameFrozen = false; // Flag to track if the game is frozen this.consecutiveWavesWithoutPopping = 0; // Counter for consecutive waves without popping a balloon this.isPaused = false; // Flag to track if the game is paused this.freezePowerupBalloon = null; // Reference to the freeze powerup balloon this.isFreezeActive = false; // Flag to track if the freeze powerup is active this.freezeDuration = 2000; // Duration of the freeze powerup effect in milliseconds this.balloonSpawnInterval = 300; // Interval between balloon spawns in milliseconds this.maxDifficulty = 60; // Maximum difficulty level this.bombloon = null; // Reference to the bombloon powerup this.bombloonSpawnInterval = 2; // Spawn bombloon every 2 rounds after round 8 } calculateDifficulty() { return Math.min(this.waveNumber, this.maxDifficulty); } preload() { this.load.image('balloon', 'https://play.rosebud.ai/assets/white balloon.png?9yGt'); this.load.audio('pop', 'https://play.rosebud.ai/assets/seinfeld pop.mp3?Tux3'); this.load.audio('bgm', 'https://play.rosebud.ai/assets/DSNB BGM.mp3?qONu'); this.load.audio('redBalloonPop', 'https://play.rosebud.ai/assets/bubble pop.mp3?oatb'); this.load.audio('waveStart', 'https://play.rosebud.ai/assets/untitled.mp3?caJx'); this.load.image('background', 'https://play.rosebud.ai/assets/clouds.png?9LPT'); this.load.image('freezePowerupBalloon', 'https://play.rosebud.ai/assets/frozen balloon (BCD).png?P5as'); this.load.audio('freezeSound', 'https://play.rosebud.ai/assets/FREESZE (BCD).mp3?PbaQ'); this.load.audio('freezeHitSound', 'https://play.rosebud.ai/assets/FREEZE HIT (BCD).mp3?OjK7'); this.load.image('bombloon', 'https://play.rosebud.ai/assets/Bomb balloon (BCD).png?3rHy'); } create() { this.init(); // Reset all game variables // Add the background image to the scene and slightly darken it this.backgroundImage = this.add.image(0, 0, 'background').setOrigin(0, 0); this.backgroundImage.setDisplaySize(this.cameras.main.width, this.cameras.main.height); // Scale the image to fit the screen this.backgroundImage.setTint(0xaaaaaa); // Slightly darken the background this.bgm = this.sound.add('bgm', { loop: true, volume: 0.3 }); // Check if the game is muted from localStorage this.isMuted = localStorage.getItem('isMuted') === 'true'; if (!this.isMuted) { this.bgm.play({ seek: 0 }); // Ensure the music starts from the beginning } this.pop = this.sound.add('pop', { volume: 0.3 }); this.redBalloonPop = this.sound.add('redBalloonPop', { volume: 0.4 }); // Add the red balloon pop sound this.waveStartSound = this.sound.add('waveStart', { volume: 0.4 }); // Add the wave start sound this.freezeSound = this.sound.add('freezeSound', { volume: 0.5 }); // Add the freeze sound this.freezeHitSound = this.sound.add('freezeHitSound', { volume: 0.5 }); // Add the freeze hit sound this.input.on('pointerdown', this.onClick, this); this.input.keyboard.on('keydown-SPACE', this.startOrResetGame, this); this.input.keyboard.on('keydown-D', this.toggleDebugMode, this); // Toggle debug mode with 'D' key this.input.keyboard.on('keydown-M', this.toggleMute, this); // Mute/Unmute with 'M' key this.input.keyboard.on('keydown-P', this.togglePause, this); // Pause/Unpause with 'P' key // Add long press detection for pause/unpause this.input.on('pointerdown', this.onPointerDown, this); this.input.on('pointerup', this.onPointerUp, this); // Create "Push to Start" button const buttonStyle = { fontSize: '48px', fontStyle: 'bold', fill: '#ff0000' }; this.startButton = this.add.text(this.cameras.main.centerX, this.cameras.main.height - 100, 'Push to Start', buttonStyle) .setOrigin(0.5) .setInteractive(); const padding = 40; const buttonWidth = Math.min(this.startButton.width + padding * 2, this.cameras.main.width - 40); const buttonHeight = this.startButton.height + padding; this.startButtonGraphics = this.add.graphics(); this.startButtonGraphics.lineStyle(4, 0xff0000, 1); this.startButtonGraphics.fillStyle(0xffffff, 0.2); this.startButtonGraphics.fillRoundedRect(this.startButton.x - buttonWidth / 2, this.startButton.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); this.startButtonGraphics.strokeRoundedRect(this.startButton.x - buttonWidth / 2, this.startButton.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); this.startButton.on('pointerover', () => { this.startButtonGraphics.clear(); this.startButtonGraphics.lineStyle(4, 0xff0000, 1); this.startButtonGraphics.fillStyle(0xffffff, 0.4); this.startButtonGraphics.fillRoundedRect(this.startButton.x - buttonWidth / 2, this.startButton.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); this.startButtonGraphics.strokeRoundedRect(this.startButton.x - buttonWidth / 2, this.startButton.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); }); this.startButton.on('pointerout', () => { this.startButtonGraphics.clear(); this.startButtonGraphics.lineStyle(4, 0xff0000, 1); this.startButtonGraphics.fillStyle(0xffffff, 0.2); this.startButtonGraphics.fillRoundedRect(this.startButton.x - buttonWidth / 2, this.startButton.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); this.startButtonGraphics.strokeRoundedRect(this.startButton.x - buttonWidth / 2, this.startButton.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); }); this.startButton.on('pointerdown', this.tweenStartButton, this); this.startButton.on('pointerup', this.startOrResetGame, this); // Create red background health bar this.backgroundHealthBar = this.add.graphics(); this.backgroundHealthBar.fillStyle(0xff0000); this.backgroundHealthBar.fillRect(10, 5, 200, 20); // Create green health bar alloon this.healthBar = this.add.graphics(); this.updateHealthBar(); // Create text display for health bar, now in bright purple color this.healthText = this.add.text(10, 30, `Health: ${this.currentHealth}`, { fontSize: '40px', fontStyle: 'bold', color: '#bf00ff' }); // Create wave counter text in bright purple color this.waveCounterText = this.add.text(this.cameras.main.width - 325, 10, `Wave ${this.waveNumber}`, { fontSize: '40px', fontStyle: 'bold', color: '#bf000f' }).setOrigin(1, 0); // Create "GAME OVER" text (initially hidden) this.gameOverText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY - 50, 'GAME OVER', { fontSize: '64px', fontStyle: 'bold', color: '#ff0000' }).setOrigin(0.5).setVisible(false); // Create text to display the highest wave achieved in bright purple color this.highestWaveText = this.add.text(10, this.cameras.main.height - 30, `Highest Wave: ${this.highestWave}`, { fontSize: '30px', fontStyle: 'bold', color: '#bf00bf' }); // Create graphics object for debugging hitboxes this.debugGraphics = this.add.graphics({ lineStyle: { width: 2, color: 0xffffff } }); // Create "Give Up?" text (initially hidden) this.giveUpText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY, 'Give Up?', { fontSize: '58px', fontStyle: 'bold', color: '#ffffff' }).setOrigin(0.5).setVisible(false); // Create "Yes" button (initially hidden) this.yesButton = this.add.text(this.cameras.main.centerX - 100, this.cameras.main.centerY + 100, 'Yes', { fontSize: '48px', fontStyle: 'bold', color: '#ffffff' }).setOrigin(0.5).setInteractive().setVisible(false); this.yesButton.on('pointerover', () => this.yesButton.setColor('#ff0000')); // Turn red on hover this.yesButton.on('pointerout', () => this.yesButton.setColor('#ffffff')); // Turn white on hover out this.yesButton.on('pointerdown', () => { this.resetGame(); this.toggleMute(); // Unmute the game when resetting }); // Reset game on click and unmute the game // Create "No" button (initially hidden) this.noButton = this.add.text(this.cameras.main.centerX + 100, this.cameras.main.centerY + 100, 'No', { fontSize: '48px', fontStyle: 'bold', color: '#ffffff' }).setOrigin(0.5).setInteractive().setVisible(false); this.noButton.on('pointerover', () => this.noButton.setColor('#ff0000')); // Turn red on hover this.noButton.on('pointerout', () => this.noButton.setColor('#ffffff')); // Turn white on hover out this.noButton.on('pointerdown', this.unfreezeGame, this); // Unfreeze game on click // Create "Pause" text (initially hidden) this.pauseText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY, 'Paused', { fontSize: '64px', fontStyle: 'bold', color: '#ffffff' }).setOrigin(0.5).setVisible(false); // Create pause button this.pauseButton = this.add.text(this.cameras.main.width - 10, this.cameras.main.height - 10, '[Hold] Pause', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(1, 1).setInteractive(); this.pauseButton.on('pointerover', () => this.pauseButton.setStyle({ fill: '#ff0000' })); this.pauseButton.on('pointerout', () => this.pauseButton.setStyle({ fill: '#ffffff' })); this.pauseButton.on('pointerdown', this.startPauseTimer, this); this.pauseButton.on('pointerup', this.clearPauseTimer, this); this.pauseButton.on('pointerout', this.clearPauseTimer, this); this.pauseTimer = null; // Remove the general input listeners for pausing this.input.off('pointerdown', this.onPointerDown, this); this.input.off('pointerup', this.onPointerUp, this); } tweenStartButton() { this.tweens.add({ targets: [this.startButton, this.startButtonGraphics], scale: 0.95, duration: 100, yoyo: true, repeat: 0, }); } startOrResetGame() { if (!this.isGameStarted) { this.isGameStarted = true; this.startButton.setVisible(false); this.startButtonGraphics.setVisible(false); this.gameOverText.setVisible(false); // Hide "GAME OVER" text this.wavesWithoutPopping = 0; // Reset the counter for waves without popping a balloon this.consecutiveWavesWithoutPopping = 0; // Reset the counter for consecutive waves without popping a balloon this.isPaused = false; // Reset the pause state this.spawnWave(); // Start spawning balloons } else if (this.isGameOver) { this.resetGame(); } } resetGame() { // Reset game state this.balloons = []; this.currentHealth = this.maxHealth; this.waveNumber = 1; this.totalClicks = 0; this.spawnedClicks = 0; this.isGameOver = false; this.isGameStarted = false; this.timeSinceLastBalloonDestroyed = 0; this.wavesWithoutPopping = 0; this.consecutiveWavesWithoutPopping = 0; this.isGameFrozen = false; this.isPaused = false; this.isFreezeActive = false; this.spawnedBalloons = 0; this.totalBalloonsPerWave = 1; // Clear game objects this.balloons.forEach(balloon => balloon.destroy()); this.balloons = []; if (this.freezePowerupBalloon) { this.freezePowerupBalloon.destroy(); this.freezePowerupBalloon = null; } this.healthBar.clear(); this.updateHealthBar(); this.healthText.setText(`Health: ${this.currentHealth}`); this.waveCounterText.setText(`Wave ${this.waveNumber}`); this.gameOverText.setVisible(false); this.giveUpText.setVisible(false); this.yesButton.setVisible(false); this.noButton.setVisible(false); this.pauseText.setVisible(false); this.highestWaveText.setText(`Highest Wave: ${this.highestWave}`); // Reset start button this.startButton.setVisible(true); this.startButtonGraphics.setVisible(true); this.startButton.setText('Push to Start'); this.startButton.off('pointerdown', this.tweenStartButton); this.startButton.off('pointerup', this.startOrResetGame); this.startButton.on('pointerdown', this.tweenStartButton, this); this.startButton.on('pointerup', this.startOrResetGame, this); // Clear all timers and tweens this.time.removeAllEvents(); this.tweens.killAll(); // Reset sound if (this.bgm) { this.bgm.stop(); this.bgm.play({ loop: true, volume: 0.3 }); } this.sound.stopAll(); // Ensure the game is not muted after reset this.sound.mute = false; this.isMuted = false; } spawnWave() { if (this.isGameStarted && !this.isGameFrozen && !this.isPaused && !this.isGameOver) { if (this.waveStartSound && this.waveStartSound.play) { this.waveStartSound.play(); } // Remove any existing freeze powerup balloon and bombloon this.removeExistingPowerups(); // Calculate the total number of balloons for this wave this.totalBalloonsPerWave = Math.min(20 + this.waveNumber * 2, 100); this.spawnedBalloons = 0; this.waveMiddle = Math.floor(this.totalBalloonsPerWave / 2); const spawnNextBalloon = () => { if (this.isPaused || this.isGameOver) { return; } else if (this.spawnedBalloons < this.totalBalloonsPerWave && this.balloons && this.balloons.length < this.maxBalloons) { const colorIndex = this.getRandomBalloonColor(); this.spawnBalloon(colorIndex); this.spawnedBalloons++; // Check if we've reached the middle of the wave if (this.spawnedBalloons === this.waveMiddle) { this.spawnMidWavePowerups(); } if (this.time && this.time.delayedCall) { this.time.delayedCall(this.balloonSpawnInterval, spawnNextBalloon, [], this); } } else if (this.spawnedBalloons < this.totalBalloonsPerWave) { if (this.time && this.time.delayedCall) { this.time.delayedCall(500, spawnNextBalloon, [], this); } } }; spawnNextBalloon(); } } removeExistingPowerups() { if (this.freezePowerupBalloon) { this.freezePowerupBalloon.destroy(); this.freezePowerupBalloon = null; } if (this.bombloon) { this.bombloon.destroy(); this.bombloon = null; } } spawnMidWavePowerups() { // Spawn the freeze powerup balloon every 5 waves if (this.waveNumber % 5 === 0 && !this.freezePowerupBalloon) { this.spawnFreezePowerupBalloon(); } // Spawn the bombloon on round 8 and every 2 rounds after that if (this.waveNumber >= 8 && (this.waveNumber - 8) % this.bombloonSpawnInterval === 0) { this.spawnBombloon(); } } getRandomBalloonColor() { const maxColorIndex = Math.min(Math.floor(this.waveNumber / 3), 4); const weights = [5, 4, 3, 2, 1]; let totalWeight = weights.slice(0, maxColorIndex + 1).reduce((a, b) => a + b, 0); let random = Math.random() * totalWeight; for (let i = 0; i <= maxColorIndex; i++) { if (random < weights[i]) { return i; } random -= weights[i]; } return maxColorIndex; } spawnBalloon(colorIndex) { const minX = 100; const maxX = this.cameras.main.width - 100; const spawnX = Phaser.Math.Between(minX, maxX); const minY = this.cameras.main.height + 100; const maxY = minY + 200; const spawnY = Phaser.Math.Between(minY, maxY); const balloon = this.physics.add.sprite(spawnX, spawnY, 'balloon'); balloon.setScale(0.18); balloon.setTint(this.colors[colorIndex]); balloon.setVelocity(0, -this.baseVelocity * this.velocityMultipliers[colorIndex]); balloon.setData('color', colorIndex); balloon.setData('clickCount', this.clicksRequired[colorIndex]); balloon.body.allowGravity = false; balloon.setCircle(balloon.width / 2, 0, 0); const damage = this.damageValues[colorIndex]; const damageText = this.add.text(0, 0, damage, { fontSize: '32px', fontStyle: 'bold', color: '#ffffff' }).setOrigin(0.5); balloon.setData('damageText', damageText); balloon.setData('damage', damage); damageText.setPosition(balloon.x, balloon.y); const overlapBalloon = this.balloons.find(existingBalloon => { const distance = Phaser.Math.Distance.Between(spawnX, spawnY, existingBalloon.x, existingBalloon.y); const combinedRadius = (balloon.width * balloon.scaleX / 2) + (existingBalloon.width * existingBalloon.scaleX / 2); return distance < combinedRadius; }); if (!overlapBalloon) { this.balloons.push(balloon); } else { balloon.destroy(); damageText.destroy(); this.time.delayedCall(100, () => this.spawnBalloon(colorIndex), [], this); } } spawnFreezePowerupBalloon() { const minX = 100; // Minimum x-coordinate const maxX = this.cameras.main.width - 100; // Maximum x-coordinate const spawnX = Phaser.Math.Between(minX, maxX); // Random x-coordinate within the range const minY = this.cameras.main.height + 100; // Minimum y-coordinate (off-screen at the bottom) const maxY = minY + 200; // Maximum y-coordinate (slightly lower than the minimum) const spawnY = Phaser.Math.Between(minY, maxY); // Random y-coordinate within the range const freezePowerupBalloon = this.physics.add.sprite(spawnX, spawnY, 'freezePowerupBalloon'); freezePowerupBalloon.setScale(0.45); // Reduce the size of the balloon sprite // Check for overlap with existing balloons const overlapBalloon = this.balloons.find(existingBalloon => { const distance = Phaser.Math.Distance.Between(spawnX, spawnY, existingBalloon.x, existingBalloon.y); const combinedRadius = (freezePowerupBalloon.width * freezePowerupBalloon.scaleX / 2) + (existingBalloon.width * existingBalloon.scaleX / 2); return distance < combinedRadius; }); if (!overlapBalloon) { freezePowerupBalloon.setVelocity(0.5); // Set the velocity to match teal balloons freezePowerupBalloon.body.allowGravity = false; // Disable gravity for the freeze powerup balloon freezePowerupBalloon.setCircle(freezePowerupBalloon.width / 2, 0, 0); // Set a circular hitbox for the balloon this.freezePowerupBalloon = freezePowerupBalloon; } else { // If the freeze powerup balloon overlaps with an existing balloon, try spawning it again freezePowerupBalloon.destroy(); this.spawnFreezePowerupBalloon(); } } spawnBombloon() { const spawnX = Phaser.Math.Between(100, this.cameras.main.width - 100); const spawnY = this.cameras.main.height + 50; this.bombloon = this.physics.add.image(spawnX, spawnY, 'bombloon'); this.bombloon.setScale(0.4); this.bombloon.setVelocity(0, -this.baseVelocity * 0.5); this.bombloon.setInteractive(); this.bombloon.on('pointerdown', this.onBombloonClick, this); } onBombloonClick() { if (this.bombloon) { this.bombloon.destroy(); this.bombloon = null; this.balloons.forEach(balloon => { const colorIndex = balloon.getData('color'); if (colorIndex === 0) { // If it's a red balloon, destroy it const damageText = balloon.getData('damageText'); if (damageText) { damageText.destroy(); } balloon.destroy(); } else { // Otherwise, reduce its color by one level const newColorIndex = colorIndex - 1; balloon.setTint(this.colors[newColorIndex]); balloon.setData('color', newColorIndex); balloon.setData('clickCount', this.clicksRequired[newColorIndex]); const newDamage = this.damageValues[newColorIndex]; balloon.setData('damage', newDamage); balloon.getData('damageText').setText(newDamage); } }); // Filter out destroyed balloons this.balloons = this.balloons.filter(balloon => balloon.active); } } onClick(pointer) { if (!this.isGameOver && this.isGameStarted && !this.isGameFrozen && !this.isPaused) { const clickedBalloon = this.balloons.find( (balloon) => { const distance = Phaser.Math.Distance.Between(pointer.downX, pointer.downY, balloon.x, balloon.y); const radius = balloon.width * balloon.scaleX / 1.3; return distance < radius; } ); if (clickedBalloon) { this.wavesWithoutPopping = 0; this.consecutiveWavesWithoutPopping = 0; const balloonColor = clickedBalloon.getData('color'); clickedBalloon.data.values.clickCount--; if (clickedBalloon.data.values.clickCount <= 0) { const damageText = clickedBalloon.getData('damageText'); clickedBalloon.destroy(); if (damageText) { damageText.destroy(); } this.balloons = this.balloons.filter((balloon) => balloon !== clickedBalloon); if (!this.isMuted) { if (this.isFreezeActive) { this.freezeHitSound.play(); } else if (balloonColor === 0) { this.redBalloonPop.play(); } else { this.pop.play(); } } } else { let newColorIndex = balloonColor - 1; if (newColorIndex < 0) newColorIndex = 0; clickedBalloon.setTint(this.colors[newColorIndex]); clickedBalloon.setData('color', newColorIndex); const difficulty = this.calculateDifficulty(); const velocityMultiplier = 1 + (difficulty / 120); clickedBalloon.setVelocity(0, -this.baseVelocity * this.velocityMultipliers[newColorIndex] * velocityMultiplier); const newDamage = this.damageValues[newColorIndex]; clickedBalloon.setData('damage', newDamage); clickedBalloon.getData('damageText').setText(newDamage); if (!this.isMuted) { this.pop.play(); } } } // Check if the freeze powerup balloon was clicked if (this.freezePowerupBalloon && Phaser.Math.Distance.Between(pointer.downX, pointer.downY, this.freezePowerupBalloon.x, this.freezePowerupBalloon.y) < this.freezePowerupBalloon.width * this.freezePowerupBalloon.scaleX / 2) { this.activateFreezePowerup(); this.freezePowerupBalloon.destroy(); this.freezePowerupBalloon = null; } } } activateFreezePowerup() { this.isFreezeActive = true; if (!this.isMuted) { this.freezeSound.play(); } this.balloons.forEach(balloon => { balloon.setVelocity(0, 0); // Stop all balloons const damageText = balloon.getData('damageText'); if (damageText) { damageText.setVisible(false); // Hide all damage text } }); // Reset the clickCount of all balloons to 1 this.balloons.forEach(balloon => { balloon.setData('clickCount', 1); }); // Set a timer to deactivate the freeze powerup after the duration this.time.delayedCall(this.freezeDuration, this.deactivateFreezePowerup, [], this); } deactivateFreezePowerup() { this.isFreezeActive = false; this.balloons.forEach(balloon => { const balloonColor = balloon.getData('color'); balloon.setVelocity(0, -this.baseVelocity * this.velocityMultipliers[balloonColor]); // Restore balloon velocities balloon.setData('clickCount', this.clicksRequired[balloonColor]); // Reset clickCount based on balloon color balloon.clearTint(); // Clear the freeze tint balloon.setTint(this.colors[balloonColor]); // Restore original color const damageText = balloon.getData('damageText'); if (damageText) { damageText.setVisible(true); // Show all damage text } }); } update(time, delta) { if (!this.isGameFrozen && !this.isPaused && !this.isGameOver) { this.balloons = this.balloons.filter((balloon) => { if (balloon.y + balloon.displayHeight / 2 < 0) { const damage = balloon.getData('damage'); this.currentHealth -= damage; this.currentHealth = Math.max(this.currentHealth, 0); if (this.currentHealth === 0 && !this.isGameOver) { this.isGameOver = true; this.gameOver(); } this.updateHealthBar(); this.healthText.setText(`Health: ${this.currentHealth}`); const damageText = balloon.getData('damageText'); if (damageText) { damageText.destroy(); } balloon.destroy(); this.timeSinceLastBalloonDestroyed = 0; this.wavesWithoutPopping++; return false; } const damageText = balloon.getData('damageText'); if (damageText) { damageText.setPosition(balloon.x, balloon.y); } return true; }); if (this.balloons.length === 0 && this.spawnedBalloons >= this.totalBalloonsPerWave && !this.isGameOver && this.isGameStarted) { this.timeSinceLastBalloonDestroyed += delta; if (this.timeSinceLastBalloonDestroyed >= 2000) { // 2 seconds delay this.waveNumber++; this.waveCounterText.setText(`Wave ${this.waveNumber}`); this.timeSinceLastBalloonDestroyed = 0; this.spawnedBalloons = 0; if (this.waveNumber > this.highestWave) { this.highestWave = this.waveNumber; localStorage.setItem('highestWave', this.highestWave); this.highestWaveText.setText(`Highest Wave: ${this.highestWave}`); } if (this.wavesWithoutPopping > 0) { this.consecutiveWavesWithoutPopping++; } if (this.consecutiveWavesWithoutPopping >= 2) { this.freezeGame(); } else { this.spawnWave(); } } } // Update the freeze powerup balloon position if (this.freezePowerupBalloon) { this.freezePowerupBalloon.y += -this.baseVelocity * this.velocityMultipliers[3] * delta / 1000; // Update position based on velocity and delta time } // Update the bombloon position if (this.bombloon) { this.bombloon.y += -this.baseVelocity * 0.5 * delta / 1000; // Update position based on velocity and delta time if (this.bombloon.y + this.bombloon.displayHeight / 2 < 0) { this.bombloon.destroy(); this.bombloon = null; } } } // Debug hitboxes (always update, even when paused) if (this.debugMode) { this.debugGraphics.clear(); this.balloons.forEach(balloon => { this.debugGraphics.strokeCircle(balloon.x, balloon.y, balloon.width * balloon.scaleX / 2); }); if (this.freezePowerupBalloon) { this.debugGraphics.strokeCircle(this.freezePowerupBalloon.x, this.freezePowerupBalloon.y, this.freezePowerupBalloon.width * this.freezePowerupBalloon.scaleX / 2); } } } gameOver() { this.gameOverText.setVisible(true); // Show "GAME OVER" text // Immediately destroy all balloons and their associated damage text this.balloons.forEach(balloon => { const damageText = balloon.getData('damageText'); if (damageText) { damageText.destroy(); } balloon.destroy(); }); this.balloons = []; // Clear the balloons array // Remove the freeze powerup balloon if it exists if (this.freezePowerupBalloon) { this.freezePowerupBalloon.destroy(); this.freezePowerupBalloon = null; } this.startButton.setVisible(true); this.startButtonGraphics.setVisible(true); this.startButton.setText('Push to Reset'); this.startButton.off('pointerdown', this.tweenStartButton); this.startButton.off('pointerup', this.startOrResetGame); this.startButton.on('pointerdown', this.tweenStartButton, this); this.startButton.on('pointerup', () => { this.resetGame(); this.scene.restart(); }, this); } updateHealthBar() { // Clear old health bar graphics this.healthBar.clear(); // Redraw green health bar this.healthBar.fillStyle(0x00ff00); this.healthBar.fillRect(10, 5, 200 * (this.currentHealth / this.maxHealth), 20); } toggleDebugMode() { this.debugMode = !this.debugMode; } toggleMute() { this.isMuted = !this.isMuted; this.sound.mute = this.isMuted; if (!this.isMuted && !this.bgm.isPlaying) { this.bgm.play({ seek: 0 }); } // Update mute state in localStorage localStorage.setItem('isMuted', this.isMuted); // Update mute button text in pause menu if it exists if (this.muteButton) { this.muteButton.text.setText(this.isMuted ? 'Unmute Music' : 'Mute Music'); } } togglePause() { this.isPaused = !this.isPaused; if (this.isPaused) { this.showPauseMenu(); // Freeze the game this.balloons.forEach(balloon => { balloon.setVelocity(0, 0); // Stop all balloons const damageText = balloon.getData('damageText'); if (damageText) { damageText.setVisible(false); // Hide all damage text } }); if (this.freezePowerupBalloon) { this.freezePowerupBalloon.setVelocity(0, 0); // Stop the freeze powerup balloon } if (this.bombloon) { this.bombloon.setVelocity(0, 0); // Stop the bombloon } this.waveCounterText.setVisible(false); // Hide the wave counter text this.physics.pause(); // Pause the physics system } else { this.hidePauseMenu(); // Unfreeze the game this.balloons.forEach(balloon => { const balloonColor = balloon.getData('color'); balloon.setVelocity(0, -this.baseVelocity * this.velocityMultipliers[balloonColor]); // Restore balloon velocities const damageText = balloon.getData('damageText'); if (damageText) { damageText.setVisible(true); // Show all damage text } }); if (this.freezePowerupBalloon) { this.freezePowerupBalloon.setVelocity(0, -this.baseVelocity * this.velocityMultipliers[3]); // Restore the freeze powerup balloon velocity } if (this.bombloon) { this.bombloon.setVelocity(0, -this.baseVelocity * 0.5); // Restore the bombloon velocity } this.waveCounterText.setVisible(true); // Show the wave counter text this.physics.resume(); // Resume the physics system // Restart the wave spawning if it was interrupted if (this.spawnedBalloons < this.totalBalloonsPerWave) { this.time.addEvent({ delay: this.balloonSpawnInterval, callback: this.spawnWave, callbackScope: this }); } } } showPauseMenu() { // Create a semi-transparent black background this.pauseBackground = this.add.rectangle(0, 0, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.7); this.pauseBackground.setOrigin(0); // Add "PAUSED" text at the top this.pausedText = this.add.text(this.cameras.main.centerX, 100, 'PAUSED', { fontSize: '64px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5); // Create pause menu buttons const buttonStyle = { fontSize: '32px', fontStyle: 'bold', fill: '#ffffff' }; this.muteButton = this.createPauseButton(this.cameras.main.centerX, this.cameras.main.centerY - 100, this.isMuted ? 'Unmute Music' : 'Mute Music', buttonStyle, () => { this.toggleMute(); }); this.mainMenuButton = this.createPauseButton(this.cameras.main.centerX, this.cameras.main.centerY, 'Main Menu', buttonStyle, () => { this.scene.start('MainMenu'); }); this.resumeButton = this.createPauseButton(this.cameras.main.centerX, this.cameras.main.centerY + 100, 'Return to Game', buttonStyle, () => { this.togglePause(); }); } createPauseButton(x, y, text, style, callback) { const button = this.add.container(x, y); const buttonWidth = 300; const buttonHeight = 80; const cornerRadius = 20; const graphics = this.add.graphics(); graphics.fillStyle(0xffffff, 0.2); graphics.lineStyle(4, 0xff0000, 1); graphics.fillRoundedRect(-buttonWidth / 2, -buttonHeight / 2, buttonWidth, buttonHeight, cornerRadius); graphics.strokeRoundedRect(-buttonWidth / 2, -buttonHeight / 2, buttonWidth, buttonHeight, cornerRadius); const buttonText = this.add.text(0, 0, text, style).setOrigin(0.5); button.add([graphics, buttonText]); button.setSize(buttonWidth, buttonHeight); button.setInteractive({ useHandCursor: true }) .on('pointerover', () => { graphics.clear(); graphics.fillStyle(0xffffff, 0.4); graphics.lineStyle(4, 0xff0000, 1); graphics.fillRoundedRect(-buttonWidth / 2, -buttonHeight / 2, buttonWidth, buttonHeight, cornerRadius); graphics.strokeRoundedRect(-buttonWidth / 2, -buttonHeight / 2, buttonWidth, buttonHeight, cornerRadius); }) .on('pointerout', () => { graphics.clear(); graphics.fillStyle(0xffffff, 0.2); graphics.lineStyle(4, 0xff0000, 1); graphics.fillRoundedRect(-buttonWidth / 2, -buttonHeight / 2, buttonWidth, buttonHeight, cornerRadius); graphics.strokeRoundedRect(-buttonWidth / 2, -buttonHeight / 2, buttonWidth, buttonHeight, cornerRadius); }) .on('pointerdown', callback); button.text = buttonText; return button; } hidePauseMenu() { // Remove all pause menu elements this.pauseBackground.destroy(); this.pausedText.destroy(); this.muteButton.destroy(); this.mainMenuButton.destroy(); this.resumeButton.destroy(); } createButton(x, y, text, style, callback) { const button = this.add.text(x, y, text, style) .setOrigin(0.5) .setInteractive() .on('pointerover', () => button.setStyle({ fill: '#ff0000' })) .on('pointerout', () => button.setStyle({ fill: '#ffffff' })) .on('pointerdown', callback); return button; } freezeGame() { this.isGameFrozen = true; // Set the game freeze state to true this.giveUpText.setVisible(true); // Show the "Give Up?" text this.yesButton.setVisible(true); // Show the "Yes" button this.noButton.setVisible(true); // Show the "No" button } unfreezeGame() { this.isGameFrozen = false; // Set the game freeze state to false this.giveUpText.setVisible(false); // Hide the "Give Up?" text this.yesButton.setVisible(false); // Hide the "Yes" button this.noButton.setVisible(false); // Hide the "No" button this.spawnWave(); // Spawn the next wave } onPointerDown(pointer) { // Start a timer to detect long press this.longPressTimer = this.time.delayedCall(500, this.togglePause, [], this); } onPointerUp(pointer) { // Clear the long press timer if the pointer is released before the delay if (this.longPressTimer) { this.longPressTimer.remove(); this.longPressTimer = null; } } startPauseTimer(pointer) { this.pauseTimer = this.time.delayedCall(500, () => { this.togglePause(); }, [], this); } clearPauseTimer() { if (this.pauseTimer) { this.pauseTimer.remove(); this.pauseTimer = null; } } // Remove the onPointerDown and onPointerUp methods as they're no longer needed shutdown() { // Stop the background music if (this.bgm) { this.bgm.stop(); } // Stop all other sounds this.sound.stopAll(); // Destroy all balloons this.balloons.forEach(balloon => balloon.destroy()); // Clear all timers and tweens this.time.removeAllEvents(); this.tweens.killAll(); // Remove all input listeners this.input.off('pointerdown', this.onClick, this); this.input.keyboard.off('keydown-SPACE', this.startOrResetGame, this); this.input.keyboard.off('keydown-D', this.toggleDebugMode, this); this.input.keyboard.off('keydown-M', this.toggleMute, this); this.input.keyboard.off('keydown-P', this.togglePause, this); } } const container = document.getElementById('renderDiv'); class MainMenu extends Phaser.Scene { constructor() { super('MainMenu'); this.init(); } init() { this.backgroundBalloons = []; this.gameColors = [0xff0000, 0x0000ff, 0x00ff00, 0x00ffff, 0x800080]; // Red, blue, green, teal, purple this.animationSkipped = false; // New flag to track if animation has been skipped this.menuTheme = null; // Add this line to store the menu theme this.isMuted = false; // Add this line to track mute state this.isScenePaused = false; // Add this line to track if the scene is paused } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/clouds.png?9LPT'); this.load.image('balloon', 'https://play.rosebud.ai/assets/white balloon.png?9yGt'); this.load.audio('menuTheme', 'https://play.rosebud.ai/assets/Pixel Dreams(BCD).mp3?MaOz'); } create() { this.init(); // Reset all menu variables // Stop any playing music (in case returning from BalloonGame scene) this.sound.stopAll(); // Check if the game is muted from localStorage this.isMuted = localStorage.getItem('isMuted') === 'true'; // Start the menu theme this.menuTheme = this.sound.add('menuTheme', { loop: true, volume: 0.35 // Reduced from 0.7 to 0.35 (half the original volume) }); if (!this.isMuted) { this.menuTheme.play(); } else { this.sound.mute = true; } // Add event listeners for focus loss and regain this.game.events.on('hidden', this.handleFocusLoss, this); this.game.events.on('visible', this.handleFocusRegain, this); // Create a container for background elements this.backgroundContainer = this.add.container(0, 0); // Add background const background = this.add.image(0, 0, 'background').setOrigin(0, 0).setDisplaySize(this.cameras.main.width, this.cameras.main.height); background.setTint(0xaaaaaa); // Slightly darken the background this.backgroundContainer.add(background); // Add title const titleWords = ['BALLOON', 'CLICKER', 'DEFENSE']; const rainbowColors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#8b00ff']; const titleTextObjects = []; // Calculate the total height of all words const fontSize = 80; const lineSpacing = 20; const totalHeight = (fontSize * titleWords.length) + (lineSpacing * (titleWords.length - 1)); // Calculate the start Y position to move the title up const startY = this.cameras.main.height * 0.2; titleWords.forEach((word, wordIndex) => { const wordObjects = []; for (let i = 0; i < word.length; i++) { const color = rainbowColors[(wordIndex * word.length + i) % rainbowColors.length]; const letterText = this.add.text(0, 0, word[i], { fontSize: `${fontSize}px`, fontStyle: 'bold', fill: color, stroke: '#000000', strokeThickness: 8 }); letterText.setOrigin(0.5); wordObjects.push(letterText); } titleTextObjects.push(wordObjects); }); // Calculate and store target X positions for each letter titleTextObjects.forEach((wordObjects, wordIndex) => { const totalWidth = wordObjects.reduce((sum, text) => sum + text.width, 0); let accumulatedWidth = 0; wordObjects.forEach((letter, letterIndex) => { const targetX = this.cameras.main.centerX - totalWidth / 2 + accumulatedWidth + letter.width / 2; letter.setData('targetX', targetX); accumulatedWidth += letter.width; }); }); this.titleTextObjects = titleTextObjects; // Store reference to title text objects // Position and animate the words titleTextObjects.forEach((wordObjects, wordIndex) => { const totalWidth = wordObjects.reduce((sum, text) => sum + text.width, 0); const currentY = startY + (fontSize + lineSpacing) * wordIndex; wordObjects.forEach((letter, letterIndex) => { const targetX = this.cameras.main.centerX - totalWidth / 2 + wordObjects.slice(0, letterIndex).reduce((sum, text) => sum + text.width, 0) + letter.width / 2; letter.setPosition(this.cameras.main.width + letterIndex * 100, currentY); this.tweens.add({ targets: letter, x: targetX, ease: 'Back.out(1.7)', duration: 1000, delay: wordIndex * 750 + letterIndex * 50, onComplete: () => { if (letterIndex === wordObjects.length - 1 && wordIndex === titleTextObjects.length - 1) { this.onAnimationComplete(); } } }); }); }); // Add click listener to skip animation this.input.on('pointerdown', this.skipAnimation, this); // Add "Created By: Wurm X Rosie" tag const tagText = "Created By: Wurm X Rosie"; const tagStyle = { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff', stroke: '#000000', strokeThickness: 2 }; const tag = this.add.text(this.cameras.main.width, this.cameras.main.height - 10, tagText, tagStyle) .setOrigin(1, 1); // Animate the tag this.tweens.add({ targets: tag, x: this.cameras.main.width - 10, ease: 'Back.out(1.7)', duration: 1000, delay: 3500 // Delay the tag animation to start after the title animation }); // Add floating effect to the title after the initial animation this.time.delayedCall(3000, () => { this.tweens.add({ targets: titleTextObjects.flat(), y: '+=10', duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); }); // Create button style const buttonStyle = { fontSize: '48px', fontStyle: 'bold', fill: '#ff0000' }; // Create buttons const buttonNames = ['Play', 'Tutorial']; this.buttons = buttonNames.map((name, index) => { const button = this.add.text(this.cameras.main.centerX, startY + totalHeight + 100 + index * 120, name, buttonStyle) .setOrigin(0.5) .setInteractive() .setAlpha(0); // Start with zero opacity const padding = 40; const buttonWidth = Math.min(button.width + padding * 2, this.cameras.main.width - 40); const buttonHeight = button.height + padding; const graphics = this.add.graphics(); graphics.lineStyle(4, 0xff0000, 1); graphics.fillStyle(0xffffff, 0.2); graphics.fillRoundedRect(button.x - buttonWidth / 2, button.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); graphics.strokeRoundedRect(button.x - buttonWidth / 2, button.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); graphics.setAlpha(0); // Start with zero opacity button.on('pointerover', () => { graphics.clear(); graphics.lineStyle(4, 0xff0000, 1); graphics.fillStyle(0xffffff, 0.4); graphics.fillRoundedRect(button.x - buttonWidth / 2, button.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); graphics.strokeRoundedRect(button.x - buttonWidth / 2, button.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); }); button.on('pointerout', () => { graphics.clear(); graphics.lineStyle(4, 0xff0000, 1); graphics.fillStyle(0xffffff, 0.2); graphics.fillRoundedRect(button.x - buttonWidth / 2, button.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); graphics.strokeRoundedRect(button.x - buttonWidth / 2, button.y - buttonHeight / 2, buttonWidth, buttonHeight, 20); }); button.on('pointerdown', () => { if (name === 'Play') { this.menuTheme.stop(); // Stop the menu theme this.scene.start('BalloonGame'); } else if (name === 'Tutorial') { this.scene.start('VisualTutorial', { menuTheme: this.menuTheme }); } }); return { button, graphics }; }); // Delay the appearance of buttons, tag, and background balloons this.time.delayedCall(3500, this.showDelayedElements, [], this); // Create a container for foreground elements this.foregroundContainer = this.add.container(0, 0); // Add all other elements to the foreground container titleTextObjects.flat().forEach(letter => this.foregroundContainer.add(letter)); this.foregroundContainer.add(tag); this.buttons.forEach(button => { this.foregroundContainer.add(button.button); this.foregroundContainer.add(button.graphics); }); // Add mute button this.muteButton = this.add.text(20, this.cameras.main.height - 20, this.isMuted ? '🔇' : '🔊', { fontSize: '48px', fontStyle: 'bold' }).setOrigin(0, 1).setInteractive(); this.muteButton.on('pointerdown', this.toggleMute, this); this.foregroundContainer.add(this.muteButton); } showDelayedElements() { // Fade in the buttons this.buttons.forEach((button, index) => { this.tweens.add({ targets: [button.button, button.graphics], alpha: 1, duration: 500, ease: 'Power2', delay: index * 200 }); // Add floating effect to the button after fade-in this.tweens.add({ targets: [button.button, button.graphics], y: '+=5', duration: 1000 + index * 200, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', delay: 500 + index * 200 }); }); // Fade in the tag this.tweens.add({ targets: this.tag, alpha: 1, x: this.cameras.main.width - 10, duration: 1000, ease: 'Power2' }); // Start spawning background balloons this.startBackgroundBalloons(); } startBackgroundBalloons() { this.time.addEvent({ delay: 1500, callback: this.spawnBackgroundBalloon, callbackScope: this, loop: true }); } spawnBackgroundBalloon() { const x = Phaser.Math.Between(0, this.cameras.main.width); const y = this.cameras.main.height + 50; const balloon = this.add.image(x, y, 'balloon'); balloon.setScale(0.2); const colorIndex = Phaser.Math.Between(0, this.gameColors.length - 1); balloon.setTint(this.gameColors[colorIndex]); const baseSpeed = Phaser.Math.Between(3000, 4000); // Slower initial speed this.tweens.add({ targets: balloon, y: -50, duration: baseSpeed, onComplete: () => { balloon.destroy(); this.backgroundBalloons = this.backgroundBalloons.filter(b => b !== balloon); } }); this.backgroundContainer.add(balloon); this.backgroundBalloons.push(balloon); } skipAnimation() { if (!this.animationSkipped) { this.animationSkipped = true; this.tweens.killAll(); // Stop all ongoing tweens // Move all letters to their final positions immediately this.titleTextObjects.flat().forEach(letter => { letter.x = letter.getData('targetX'); }); this.onAnimationComplete(); } } onAnimationComplete() { // Start the floating effect for the title this.tweens.add({ targets: this.titleTextObjects.flat(), y: '+=10', duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); // Show delayed elements (buttons, tag, background balloons) this.showDelayedElements(); } shutdown() { // Clear all timers and tweens this.time.removeAllEvents(); this.tweens.killAll(); // Remove all input listeners this.input.off('pointerdown', this.skipAnimation, this); // Destroy all background balloons this.backgroundBalloons.forEach(balloon => balloon.destroy()); this.backgroundBalloons = []; // Stop the menu theme if (this.menuTheme) { this.menuTheme.stop(); } } toggleMute() { this.isMuted = !this.isMuted; this.muteButton.setText(this.isMuted ? '🔇' : '🔊'); this.sound.mute = this.isMuted; if (this.menuTheme) { if (this.isMuted) { this.menuTheme.pause(); } else { if (!this.menuTheme.isPlaying) { this.menuTheme.play(); } else { this.menuTheme.resume(); } } } // Update mute state in localStorage localStorage.setItem('isMuted', this.isMuted); } handleFocusLoss() { if (!this.isScenePaused) { this.isScenePaused = true; this.scene.pause(); this.tweens.pauseAll(); } } handleFocusRegain() { if (this.isScenePaused) { this.isScenePaused = false; this.scene.resume(); this.tweens.resumeAll(); this.resetBackgroundBalloons(); } } resetBackgroundBalloons() { this.tweens.killAll(); this.backgroundBalloons.forEach(balloon => { const newY = this.cameras.main.height + 50; balloon.y = newY; this.tweens.add({ targets: balloon, y: -50, duration: Phaser.Math.Between(3000, 4000), onComplete: () => { balloon.destroy(); this.backgroundBalloons = this.backgroundBalloons.filter(b => b !== balloon); } }); }); } } class VisualTutorial extends Phaser.Scene { constructor() { super('VisualTutorial'); } init(data) { this.menuTheme = data.menuTheme; this.currentStep = 0; this.colors = [0xff0000, 0x0000ff, 0x00ff00, 0x00ffff, 0x800080]; // Red, blue, green, teal, purple this.clicksRequired = [1, 2, 3, 4, 5]; this.damageValues = [1, 5, 10, 15, 20]; this.tutorialSteps = [{ text: "Welcome to Balloon Clicker Defense! Let's learn how to play.", action: null }, { text: "Your goal is to pop balloons before they reach the top.", action: 'showRedBalloon' }, { text: "Red balloons are the fastest but easiest to pop. They need 1 click.", action: null }, { text: "Blue balloons are slightly slower but need 2 clicks to pop.", action: 'showBlueBalloon' }, { text: "Green balloons are even slower and need 3 clicks to pop.", action: 'showGreenBalloon' }, { text: "Teal balloons are very slow but require 4 clicks to pop.", action: 'showTealBalloon' }, { text: "Purple balloons are moderately fast and need 5 clicks to pop.", action: 'showPurpleBalloon' }, { text: "Every 5 waves, a special ice balloon appears.", action: 'showIceBalloon' }, { text: "Pop the ice balloon to freeze all other balloons temporarily!", action: null }, { text: "Starting from wave 8, a special bomb balloon appears every 2 waves.", action: 'showBombloon' }, { text: "Pop the bomb balloon to destroy all red balloons and reduce others by one level!", action: null }, { text: "Each escaping balloon reduces your health. The damage increases with color difficulty.", action: 'showHealthBar' }, { text: "Use 'M' to mute/unmute and 'P' to pause/unpause.", action: null }, { text: "You're ready to play! Try to survive as many waves as possible. Good luck!", action: null }]; } preload() { this.load.image('balloon', 'https://play.rosebud.ai/assets/white balloon.png?9yGt'); this.load.image('iceBalloon', 'https://play.rosebud.ai/assets/frozen balloon (BCD).png?P5as'); this.load.image('bombloon', 'https://play.rosebud.ai/assets/Bomb balloon (BCD).png?3rHy'); this.load.image('background', 'https://play.rosebud.ai/assets/clouds.png?9LPT'); } create() { this.add.image(0, 0, 'background').setOrigin(0, 0).setDisplaySize(this.cameras.main.width, this.cameras.main.height).setTint(0xaaaaaa); this.textBackground = this.add.rectangle(this.cameras.main.centerX, this.cameras.main.centerY, this.cameras.main.width - 40, 200, 0x000000, 0.7); this.textBackground.setOrigin(0.5); this.tutorialText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY, '', { fontSize: '32px', fontStyle: 'bold', fill: '#ffffff', align: 'center', wordWrap: { width: this.cameras.main.width - 80 } }).setOrigin(0.5); this.nextButtonBackground = this.add.rectangle(this.cameras.main.centerX, this.cameras.main.height - 50, 200, 60, 0x000000, 0.7); this.nextButtonBackground.setOrigin(0.5); this.nextButton = this.add.text(this.cameras.main.centerX, this.cameras.main.height - 50, 'Next', { fontSize: '36px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5).setInteractive(); this.nextButton.on('pointerover', () => this.nextButton.setStyle({ fill: '#ff0000' })); this.nextButton.on('pointerout', () => this.nextButton.setStyle({ fill: '#ffffff' })); this.nextButton.on('pointerdown', this.showNextStep, this); this.balloon = null; this.healthBar = null; this.clicksText = null; this.damageText = null; this.effectText = null; this.healthText = null; this.showNextStep(); } showNextStep() { if (this.currentStep === this.tutorialSteps.length) { this.menuTheme.stop(); } this.clearPreviousStep(); if (this.currentStep < this.tutorialSteps.length) { const step = this.tutorialSteps[this.currentStep]; this.tutorialText.setText(step.text); const padding = 20; const textHeight = this.tutorialText.height + padding * 6; this.textBackground.setSize(this.cameras.main.width - 40, textHeight); if (step.action) { this[step.action](); this.textBackground.setPosition(this.cameras.main.centerX, padding + textHeight / 2); this.tutorialText.setPosition(this.cameras.main.centerX, padding + textHeight / 2 - this.tutorialText.height * 0.2); } else { this.textBackground.setPosition(this.cameras.main.centerX, this.cameras.main.centerY); this.tutorialText.setPosition(this.cameras.main.centerX, this.cameras.main.centerY - this.tutorialText.height * 0.2); } this.currentStep++; } else { this.scene.start('MainMenu'); } if (this.currentStep === this.tutorialSteps.length) { this.nextButton.setText('Finish'); } } clearPreviousStep() { if (this.balloon) { this.balloon.destroy(); this.balloon = null; } if (this.clicksText) { this.clicksText.destroy(); this.clicksText = null; } if (this.damageText) { this.damageText.destroy(); this.damageText = null; } if (this.effectText) { this.effectText.destroy(); this.effectText = null; } if (this.healthBar) { this.healthBar.destroy(); this.healthBar = null; } if (this.healthText) { this.healthText.destroy(); this.healthText = null; } } showBalloon(colorIndex) { const spawnX = this.cameras.main.centerX; const spawnY = this.cameras.main.centerY; this.balloon = this.add.image(spawnX, spawnY, 'balloon'); this.balloon.setScale(0.18); this.balloon.setTint(this.colors[colorIndex]); this.clicksText = this.add.text(spawnX, spawnY + 100, `Clicks: ${this.clicksRequired[colorIndex]}`, { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5); this.damageText = this.add.text(spawnX, spawnY - 100, `Damage: ${this.damageValues[colorIndex]}`, { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5); } showRedBalloon() { this.showBalloon(0); } showBlueBalloon() { this.showBalloon(1); } showGreenBalloon() { this.showBalloon(2); } showTealBalloon() { this.showBalloon(3); } showPurpleBalloon() { this.showBalloon(4); } showIceBalloon() { const spawnX = this.cameras.main.centerX; const spawnY = this.cameras.main.centerY; this.balloon = this.add.image(spawnX, spawnY, 'iceBalloon'); this.balloon.setScale(0.45); this.effectText = this.add.text(spawnX, spawnY + 100, 'Freezes all balloons', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5); } showBombloon() { const spawnX = this.cameras.main.centerX; const spawnY = this.cameras.main.centerY; this.balloon = this.add.image(spawnX, spawnY, 'bombloon'); this.balloon.setScale(0.4); this.effectText = this.add.text(spawnX, spawnY + 100, 'Destroys red balloons\nReduces others by one level', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff', align: 'center' }).setOrigin(0.5); } showHealthBar() { this.healthBar = this.add.graphics(); this.healthBar.fillStyle(0xff0000); this.healthBar.fillRect(this.cameras.main.centerX - 100, this.cameras.main.centerY - 10, 200, 20); this.healthBar.fillStyle(0x00ff00); this.healthBar.fillRect(this.cameras.main.centerX - 100, this.cameras.main.centerY - 10, 150, 20); this.healthText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY + 30, 'Health Bar', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff' }).setOrigin(0.5); } shutdown() { // Don't stop the menu theme here, it will be handled in showNextStep // Clear all timers and tweens this.time.removeAllEvents(); this.tweens.killAll(); // Remove all input listeners this.nextButton.off('pointerdown', this.showNextStep, this); // Destroy all game objects this.clearPreviousStep(); } } // Game configuration const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 1280, physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }, scene: [MainMenu, BalloonGame, VisualTutorial] }; window.phaserGame = new Phaser.Game(config);