class SpaceShooter extends Phaser.Scene { constructor() { super(); this.controlsEnabled = false; this.health = 100; this.score = 0; this.hasBarrierProtection = false; this.webSlowTimer = null; this.webGraphic = null; this.isWebSlowed = false; this.damageTintTimer = null; this.playerHealthValue = 100; this.enemyHealthValue = 100; this.previousTint = 0xffffff; this.healthText = null; this.player = null; this.stars = []; this.floatingObjects = []; this.enemyList = null; this.shootingStars = []; this.comets = []; this.sceneryElements = []; this.flashTimer = null; this.isPoweredUp = false; this.powerUpTimer = null; this.lastShotTime = 0; this.nebulae = []; this.bullets = []; this.powerUpList = null; this.powerUps = []; this.powerUpListVisible = false; } preload() { // Load all assets this.load.image('evil flower', 'https://play.rosebud.ai/assets/evil flower.png?Kqvb'); this.load.image('mecha owl', 'https://play.rosebud.ai/assets/mecha owl.png?EiGq'); this.load.image('bat', 'https://play.rosebud.ai/assets/bat.png?jJ4D'); this.load.image('lighteningbug', 'https://play.rosebud.ai/assets/lightening bug.png?W4tW'); this.load.image('apple', 'https://play.rosebud.ai/assets/green apple.png?BmQc'); this.load.image('bananas', 'https://play.rosebud.ai/assets/bananas.png?LnBE'); this.load.image('firefly', 'https://play.rosebud.ai/assets/firefly.png?fqVq'); this.load.image('smallStar', 'https://play.rosebud.ai/assets/smallStar.png?ZJbI'); this.load.image('mediumStar', 'https://play.rosebud.ai/assets/mediumStar.png?psuT'); this.load.image('largeStar', 'https://play.rosebud.ai/assets/largeStar.png?Kl7y'); this.load.image('cricket', 'https://play.rosebud.ai/assets/cricket.png?wzHI'); this.load.image('bugface', 'https://play.rosebud.ai/assets/bug face.png?DnZT'); this.load.image('tree', 'https://play.rosebud.ai/assets/tree.png?4Ayg'); this.load.image('leaf', 'https://play.rosebud.ai/assets/leaf.png?8ydG'); this.load.image('paperlantern', 'https://play.rosebud.ai/assets/paper lantern.png?5bpR'); this.load.image('mushroom', 'https://play.rosebud.ai/assets/mushroom.png?eW6w'); this.load.image('moon', 'https://play.rosebud.ai/assets/moon.png?PMTX'); this.load.image('flowerhead', 'https://play.rosebud.ai/assets/flower head.png?0AOv'); this.load.image('mecha frog', 'https://play.rosebud.ai/assets/mecha frog.jpg?TX0g'); this.load.image('mecha spider', 'https://play.rosebud.ai/assets/mecha spider.png?X6AI'); } create() { // Set background to dark blue for space feel this.cameras.main.setBackgroundColor('#000033'); // Add title text const titleText = this.add.text(400, 100, 'Glow Dream', { fontSize: '64px', fill: '#fff', fontStyle: 'bold' }); titleText.setOrigin(0.5); titleText.setDepth(30); // Add control instructions this.controlsText = this.add.text(400, 170, 'W,A,S,D to move.\nI,J,K,L to shoot.', { fontSize: '24px', fill: '#ffff00', align: 'center' }); this.controlsText.setOrigin(0.5); this.controlsText.setDepth(30); // Create container for all inputs const gameContainer = this.game.canvas.parentElement; const inputContainer = document.createElement('div'); inputContainer.style.position = 'absolute'; inputContainer.style.left = '50%'; inputContainer.style.top = '50%'; inputContainer.style.transform = 'translate(-50%, -50%)'; inputContainer.style.zIndex = '100'; inputContainer.style.width = '500px'; inputContainer.style.pointerEvents = 'auto'; // Player Health Input const playerHealthContainer = document.createElement('div'); playerHealthContainer.style.marginTop = '100px'; // Add top margin to move boxes down playerHealthContainer.style.marginBottom = '20px'; playerHealthContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; playerHealthContainer.style.padding = '10px'; playerHealthContainer.style.borderRadius = '5px'; const playerHealthLabel = document.createElement('span'); playerHealthLabel.textContent = 'Player Health: '; playerHealthLabel.style.color = 'white'; playerHealthLabel.style.fontFamily = 'Arial'; playerHealthLabel.style.fontSize = '24px'; const playerHealthInput = document.createElement('input'); playerHealthInput.type = 'text'; playerHealthInput.value = '100'; playerHealthInput.style.width = '80px'; playerHealthInput.style.textAlign = 'center'; playerHealthInput.style.fontSize = '24px'; playerHealthInput.style.padding = '5px'; playerHealthInput.maxLength = 3; const playerHealthRange = document.createElement('span'); playerHealthRange.textContent = '1 - 999'; playerHealthRange.style.color = 'white'; playerHealthRange.style.fontFamily = 'Arial'; playerHealthRange.style.fontSize = '24px'; playerHealthRange.style.marginLeft = '10px'; // Enemy Health Input const enemyHealthContainer = document.createElement('div'); enemyHealthContainer.style.marginBottom = '20px'; enemyHealthContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; enemyHealthContainer.style.padding = '10px'; enemyHealthContainer.style.borderRadius = '5px'; const enemyHealthLabel = document.createElement('span'); enemyHealthLabel.textContent = 'Enemy Health: '; enemyHealthLabel.style.color = 'white'; enemyHealthLabel.style.fontFamily = 'Arial'; enemyHealthLabel.style.fontSize = '24px'; const enemyHealthInput = document.createElement('input'); enemyHealthInput.type = 'text'; enemyHealthInput.value = '100'; enemyHealthInput.style.width = '80px'; enemyHealthInput.style.textAlign = 'center'; enemyHealthInput.style.fontSize = '24px'; enemyHealthInput.style.padding = '5px'; enemyHealthInput.maxLength = 3; const enemyHealthRange = document.createElement('span'); enemyHealthRange.textContent = '1 - 999'; enemyHealthRange.style.color = 'white'; enemyHealthRange.style.fontFamily = 'Arial'; enemyHealthRange.style.fontSize = '24px'; enemyHealthRange.style.marginLeft = '10px'; // Spawn Rate Input const spawnRateContainer = document.createElement('div'); spawnRateContainer.style.marginBottom = '20px'; spawnRateContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; spawnRateContainer.style.padding = '10px'; spawnRateContainer.style.borderRadius = '5px'; spawnRateContainer.style.width = '800px'; spawnRateContainer.addEventListener('mouseout', (event) => { // Check if we're not moving to a child element if (!spawnRateContainer.contains(event.relatedTarget)) { startButton.setStyle({ fill: '#ffffff', backgroundColor: '#000000' }); } }); const spawnRateLabel = document.createElement('span'); spawnRateLabel.textContent = 'Enemy Spawn Rate: '; spawnRateLabel.style.color = 'white'; spawnRateLabel.style.fontFamily = 'Arial'; spawnRateLabel.style.fontSize = '24px'; spawnRateLabel.style.whiteSpace = 'nowrap'; const spawnRateInput = document.createElement('input'); spawnRateInput.type = 'text'; spawnRateInput.value = '500'; spawnRateInput.style.width = '80px'; spawnRateInput.style.textAlign = 'center'; spawnRateInput.style.fontSize = '24px'; spawnRateInput.style.padding = '5px'; spawnRateInput.maxLength = 3; const spawnRateRange = document.createElement('span'); spawnRateRange.textContent = 'centiseconds. 100 - 999'; const spawnRateDescription = document.createElement('div'); spawnRateDescription.textContent = '(A lower number for spawn rate is harder. Higher is easier. 500 = 5 seconds)'; spawnRateDescription.style.color = 'white'; spawnRateDescription.style.fontFamily = 'Arial'; spawnRateDescription.style.fontSize = '14px'; spawnRateDescription.style.marginTop = '5px'; spawnRateDescription.style.textAlign = 'left'; spawnRateDescription.style.marginLeft = '10px'; spawnRateRange.style.color = 'white'; spawnRateRange.style.fontFamily = 'Arial'; spawnRateRange.style.fontSize = '24px'; spawnRateRange.style.marginLeft = '10px'; spawnRateRange.style.display = 'inline-block'; spawnRateRange.style.whiteSpace = 'nowrap'; // Add validation and value storage for player health playerHealthInput.addEventListener('input', (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, ''); const value = parseInt(e.target.value); this.playerHealthValue = (!value || value === 0) ? 1 : value; }); // Add validation and value storage for enemy health enemyHealthInput.addEventListener('input', (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, ''); const value = parseInt(e.target.value); this.enemyHealthValue = (!value || value === 0) ? 1 : value; }); // Add validation for spawn rate spawnRateInput.addEventListener('input', (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, ''); }); // Add blur handlers // Assemble the containers playerHealthContainer.appendChild(playerHealthLabel); playerHealthContainer.appendChild(playerHealthInput); playerHealthContainer.appendChild(playerHealthRange); enemyHealthContainer.appendChild(enemyHealthLabel); enemyHealthContainer.appendChild(enemyHealthInput); enemyHealthContainer.appendChild(enemyHealthRange); spawnRateContainer.appendChild(spawnRateLabel); spawnRateContainer.appendChild(spawnRateInput); spawnRateContainer.appendChild(spawnRateRange); spawnRateContainer.appendChild(spawnRateDescription); inputContainer.appendChild(playerHealthContainer); inputContainer.appendChild(enemyHealthContainer); inputContainer.appendChild(spawnRateContainer); gameContainer.appendChild(inputContainer); // Store input container reference for cleanup this.inputContainer = inputContainer; // Add start game button // Add start game button // Create start button with white frame const startButton = this.add.text(400, 525, 'Start Game', { fontSize: '36px', fill: '#ffffff', fontStyle: 'bold', backgroundColor: '#000000', padding: { x: 20, y: 10 } }); startButton.setOrigin(0.5); startButton.setDepth(30); startButton.setInteractive(); // Add hover effects // Make button interactive without hover effects startButton.setInteractive(); // Remove hover handling code // Add click effects startButton.on('pointerdown', () => { startButton.setStyle({ fill: '#ffffff', backgroundColor: '#333333' }); // Set up alternating power-up spawning let isApple = true; // Start with Apple this.time.addEvent({ delay: 90000, // 90 seconds in milliseconds callback: () => { if (isApple) { this.spawnApplePowerUp(); } else { this.spawnBananasPowerUp(); } isApple = !isApple; // Toggle for next spawn }, loop: true }); // Spawn first power-up (Apple) after initial delay this.time.delayedCall(90000, () => { this.spawnApplePowerUp(); }, [], this); }); startButton.on('pointerup', () => { // Start the game this.healthText.setVisible(true); this.scoreText.setVisible(true); this.controlsEnabled = true; // Get spawn rate from input // Get spawn rate from input (third input field) const inputElements = this.inputContainer ? this.inputContainer.querySelectorAll('input[type="text"]') : []; let spawnRateValue = inputElements.length >= 3 ? parseInt(inputElements[2].value) : 500; // Force minimum spawn rate to be 100 centiseconds this.spawnRate = (!spawnRateValue) ? 500 : Math.max(100, spawnRateValue); // Hide UI elements titleText.setVisible(false); startButton.setVisible(false); // Remove HTML input elements if (this.inputContainer) { this.inputContainer.remove(); } // Set health from stored values this.health = this.playerHealthValue; this.score = 0; this.healthText.setText('Health: ' + this.health); // Start spawning enemies after a delay this.time.delayedCall(2500, () => { this.spawnRandomEnemy(); // Set up recurring enemy spawn based on input rate this.time.addEvent({ delay: Math.max(1000, this.spawnRate * 10), // Ensure minimum delay of 1000ms (100 centiseconds) callback: this.spawnRandomEnemy, callbackScope: this, loop: true }); }, [], this); // Clean up UI elements immediately titleText.destroy(); startButton.destroy(); this.controlsText.destroy(); }); // Initialize health text this.healthText = this.add.text(16, 16, 'Health: ' + this.health, { fontSize: '15px', fill: '#fff' }); this.healthText.setDepth(30); this.healthText.setVisible(false); // Add score display this.scoreText = this.add.text(16, 36, 'Score: ' + this.score, { fontSize: '15px', fill: '#fff' }); this.scoreText.setDepth(30); this.scoreText.setVisible(false); // Create grass at the bottom of the screen const grassHeight = 45; const grass = this.add.graphics(); grass.setAlpha(0.7); // Draw main grass strip with gradient effect const grassColors = [0x001a1a, 0x002929, 0x003333]; grassColors.forEach((color, index) => { grass.fillStyle(color, 0.3); grass.fillRect(0, this.sys.game.config.height - (grassHeight - index * 15), this.sys.game.config.width, 15); }); // Create swaying grass blades this.grassBlades = []; for (let x = 0; x < this.sys.game.config.width; x += 3) { const blade = { graphic: this.add.graphics(), x: x, height: Phaser.Math.Between(15, 30), phase: Phaser.Math.FloatBetween(0, Math.PI * 2), speed: Phaser.Math.FloatBetween(0.02, 0.04), color: Phaser.Utils.Array.GetRandom([0x002929, 0x003333, 0x004040]) }; blade.graphic.lineStyle(2, blade.color, 0.6); this.grassBlades.push(blade); } // Set up grass animation this.time.addEvent({ delay: 16, // ~60fps callback: this.updateGrassAnimation, callbackScope: this, loop: true }); grass.setDepth(15); // Add small distant tree on the left side const distantTree = this.add.image(150, this.sys.game.config.height - 50, 'tree'); distantTree.setScale(0.08); // Very small scale for distant look distantTree.setAlpha(0.25); // Semi-transparent distantTree.setDepth(16); // Above grass and particles // Add middle tree const middleTree = this.add.image(400, this.sys.game.config.height - 50, 'tree'); middleTree.setScale(0.08); // Same scale as other tree middleTree.setAlpha(0.25); // Same transparency as other tree middleTree.setDepth(16); // Above grass and particles // Add mushroom between middle tree and right leaf const middleMushroom = this.add.image(525, this.sys.game.config.height - 40, 'mushroom'); middleMushroom.setScale(0.08); // Same scale as trees middleMushroom.setAlpha(0.2); // Same transparency as other elements middleMushroom.setDepth(16); // Above grass and particles // Add new leaf between trees const middleLeaf = this.add.image(275, this.sys.game.config.height - 35, 'leaf'); middleLeaf.setScale(0.12); // Same scale as other leaf middleLeaf.setAlpha(0.2); // Same transparency as other leaf middleLeaf.setDepth(16); // Above grass and particles middleLeaf.setRotation(Math.PI / 2); // Rotate 90 degrees to the right // Add small bush on the right side using leaf sprite const anchoredLeaf = this.add.image(650, this.sys.game.config.height - 35, 'leaf'); anchoredLeaf.setScale(0.12); // Slightly larger than tree for close appearance anchoredLeaf.setAlpha(0.2); // More faded appearance anchoredLeaf.setDepth(16); // Above grass and particles // Add far right anchored tree const farRightTree = this.add.image(750, this.sys.game.config.height - 50, 'tree'); farRightTree.setScale(0.08); // Same scale as other trees farRightTree.setAlpha(0.25); // Same transparency as other trees farRightTree.setDepth(16); // Above grass and particles // Create starfield with different star sizes including distant stars // Set up star generation timer this.time.addEvent({ delay: 50, // Generate new stars every 50ms callback: this.generateNewStars, callbackScope: this, loop: true }); // Set up timer for spawning new scenery this.time.addEvent({ delay: 4000, callback: () => { // Only spawn new scenery if we have less than 10 elements if (this.sceneryElements.length < 10) { this.spawnScenery(); } }, callbackScope: this, loop: true }); // Initial scenery spawn for (let i = 0; i < 3; i++) { this.spawnScenery(); } // Initialize with some stars for (let i = 0; i < 200; i++) { this.generateNewStars(); } // Create player ship (last to be on top) const playerScale = 0.1; // Adjusted scale for firefly sprite this.player = this.add.sprite(400, 300, 'firefly'); this.player.setScale(playerScale); this.player.setDepth(10); // Enable physics on player this.physics.add.existing(this.player); this.player.body.setCollideWorldBounds(true); // Setup WASD keys and space bar this.keys = this.input.keyboard.addKeys({ space: Phaser.Input.Keyboard.KeyCodes.SPACE, up: Phaser.Input.Keyboard.KeyCodes.W, down: Phaser.Input.Keyboard.KeyCodes.S, left: Phaser.Input.Keyboard.KeyCodes.A, right: Phaser.Input.Keyboard.KeyCodes.D, shootLeft: Phaser.Input.Keyboard.KeyCodes.J, shootDown: Phaser.Input.Keyboard.KeyCodes.K, shootRight: Phaser.Input.Keyboard.KeyCodes.L, shootUp: Phaser.Input.Keyboard.KeyCodes.I }); // Create power-up list UI this.powerUpList = this.add.container(this.sys.game.config.width - 160, 10); this.powerUpList.setDepth(100); const background = this.add.rectangle(0, 0, 150, 80, 0x000000, 0.8); // Create enemy list UI this.enemyList = this.add.container(this.sys.game.config.width - 160, 100); this.enemyList.setDepth(100); const enemyBackground = this.add.rectangle(0, 0, 150, 170, 0x000000, 0.8); const frogText = this.add.text(10, 15, 'Frog', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); frogText.on('pointerdown', () => { this.spawnFrog(); }); const spiderText = this.add.text(10, 45, 'Spider', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); spiderText.on('pointerdown', () => { this.spawnSpider(); }); const batText = this.add.text(10, 75, 'Bat', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); batText.on('pointerdown', () => { this.spawnBat(); }); const owlText = this.add.text(10, 105, 'Owl', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); owlText.on('pointerdown', () => { this.spawnOwl(); }); const evilFlowerText = this.add.text(10, 135, 'Evil Flower', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); evilFlowerText.on('pointerdown', () => { this.spawnEvilFlower(); }); enemyBackground.setOrigin(0, 0); enemyBackground.setInteractive(); frogText.setOrigin(0, 0); spiderText.setOrigin(0, 0); batText.setOrigin(0, 0); owlText.setOrigin(0, 0); this.enemyList.add([enemyBackground, frogText, spiderText, batText, owlText, evilFlowerText]); this.enemyList.setVisible(false); const appleText = this.add.text(10, 15, 'Apple', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); appleText.on('pointerdown', () => { this.spawnApplePowerUp(); }); const bananasText = this.add.text(10, 45, 'Bananas', { fontSize: '20px', fill: '#fff' }).setInteractive({ useHandCursor: true }); bananasText.on('pointerdown', () => { this.spawnBananasPowerUp(); }); background.setOrigin(0, 0); appleText.setOrigin(0, 0); bananasText.setOrigin(0, 0); this.powerUpList.add([background, appleText, bananasText]); this.powerUpList.setVisible(false); // Add collision detection for power-ups with a process callback this.physics.add.overlap( this.player, this.powerUps, this.collectPowerUp, (player, powerUp) => { return powerUp.active && powerUp.visible; }, this ); // Set up bullet collision group this.enemyGroup = this.add.group(); // Add collision detection for bullets with enemies this.physics.add.overlap( this.enemyGroup, this.bullets, this.handleBulletHit, null, this ); // Set up floating objects timer after 8 seconds this.time.delayedCall(8000, () => { this.spawnFloatingObject(); // Then set up recurring timer this.time.addEvent({ delay: 8000, callback: this.spawnFloatingObject, callbackScope: this, loop: true }); }, [], this); // Set up shooting stars and comets this.time.addEvent({ delay: Phaser.Math.Between(2000, 5000), callback: this.spawnShootingStar, callbackScope: this, loop: true }); this.time.addEvent({ delay: Phaser.Math.Between(8000, 15000), callback: this.spawnComet, callbackScope: this, loop: true }); // Set up firefly flash effect this.setupFireflyFlash(); // Create bullet shooting function this.shoot = (direction) => { const bulletSize = (this.isPoweredUp && this.currentPowerUp === 'apple') ? 24 : 8; // 3x larger only for apple const bullet = this.add.rectangle(this.player.x, this.player.y, bulletSize, bulletSize, 0xFFFF00); bullet.setDepth(10); // Match player's depth this.physics.add.existing(bullet); const speed = 400; switch (direction) { case 'left': bullet.body.setVelocity(-speed, 0); break; case 'right': bullet.body.setVelocity(speed, 0); break; case 'up': bullet.body.setVelocity(0, -speed); break; case 'down': bullet.body.setVelocity(0, speed); break; } this.bullets.push(bullet); }; } update() { // Check if game is over or player doesn't exist if (this.isGameOver || !this.player || !this.player.body) return; // Check for frog collision with player this.physics.world.overlap(this.player, this.children.list.filter(child => child.texture?.key === 'mecha frog'), () => { this.takeDamage(); }); // Update grass animation if needed if (this.grassBlades) { this.updateGrassAnimation(); } // Update glow container position to follow player if (this.glowContainer) { this.glowContainer.setPosition(this.player.x, this.player.y + (this.player.height * this.player.scaleY) / 4); } // Player movement const baseSpeed = 200; const speed = this.isWebSlowed ? baseSpeed * 0.25 : baseSpeed; // 75% reduction when webbed let velocityX = 0; let velocityY = 0; if (this.controlsEnabled && this.keys.left.isDown) { velocityX = -speed; } if (this.controlsEnabled && this.keys.right.isDown) { velocityX = speed; } if (this.controlsEnabled && this.keys.up.isDown) { velocityY = -speed; } if (this.controlsEnabled && this.keys.down.isDown) { velocityY = speed; } // Normalize diagonal movement if (velocityX !== 0 && velocityY !== 0) { const normalize = Math.sqrt(2) / 2; velocityX *= normalize; velocityY *= normalize; } if (this.player && this.player.body) { this.player.body.setVelocity(velocityX, velocityY); } // Update starfield for (let i = this.stars.length - 1; i >= 0; i--) { const star = this.stars[i]; star.y += star.speed; // Remove stars that have gone off screen if (star.y > 650) { star.destroy(); this.stars.splice(i, 1); } } // Update scenery elements for (let i = this.sceneryElements.length - 1; i >= 0; i--) { const element = this.sceneryElements[i]; if (element && element.active) { element.y += element.speed; // Fade effect like stars element.alpha = element.alpha * 0.9995; // Remove elements that are fully off screen or too faded if (element.y > 600 || element.alpha < 0.05) { element.destroy(); this.sceneryElements.splice(i, 1); } } else { // Clean up any invalid elements this.sceneryElements.splice(i, 1); } } // Update shooting stars with proper cleanup for (let i = this.shootingStars.length - 1; i >= 0; i--) { const star = this.shootingStars[i]; if (star && star.active) { star.x += star.velocityX; star.y += star.velocityY; star.alpha *= 0.99; // Gradual fade out if (star.alpha < 0.1 || star.x < -50 || star.x > 850 || star.y < -50 || star.y > 650) { star.destroy(); this.shootingStars.splice(i, 1); } } else { // Clean up invalid stars if (star) star.destroy(); this.shootingStars.splice(i, 1); } } // Update comets for (let i = this.comets.length - 1; i >= 0; i--) { const comet = this.comets[i]; comet.x += comet.velocityX; comet.y += comet.velocityY; if (comet.x < -100 || comet.x > 900 || comet.y < -100 || comet.y > 700) { comet.destroy(); this.comets.splice(i, 1); } } // Handle shooting const shootTime = this.time.now; const timeSinceLastShot = shootTime - this.lastShotTime; if (this.controlsEnabled && timeSinceLastShot >= 250) { // 250ms = 0.25 seconds if (Phaser.Input.Keyboard.JustDown(this.keys.shootLeft)) { this.shoot('left'); this.lastShotTime = shootTime; } else if (Phaser.Input.Keyboard.JustDown(this.keys.shootRight)) { this.shoot('right'); this.lastShotTime = shootTime; } else if (Phaser.Input.Keyboard.JustDown(this.keys.shootUp)) { this.shoot('up'); this.lastShotTime = shootTime; } else if (Phaser.Input.Keyboard.JustDown(this.keys.shootDown)) { this.shoot('down'); this.lastShotTime = shootTime; } } // Update power-ups this.powerUps.forEach(powerUp => { // No special update needed anymore }); // Update bullets for (let i = this.bullets.length - 1; i >= 0; i--) { const bullet = this.bullets[i]; // Remove bullets that are off screen if (bullet.x < 0 || bullet.x > 800 || bullet.y < 0 || bullet.y > 600) { bullet.destroy(); this.bullets.splice(i, 1); } } // Debug menus disabled this.powerUpList.setVisible(false); this.enemyList.setVisible(false); this.powerUpListVisible = false; // Update power-ups for (let i = this.powerUps.length - 1; i >= 0; i--) { const powerUp = this.powerUps[i]; if (powerUp.x < -50 || powerUp.x > 850 || powerUp.y < -50 || powerUp.y > 650) { if (powerUp.particles) { powerUp.particles.destroy(); } powerUp.destroy(); this.powerUps.splice(i, 1); } } // Update floating objects for (let i = this.floatingObjects.length - 1; i >= 0; i--) { const obj = this.floatingObjects[i]; // Update rotation obj.angle += obj.rotationSpeed; // Check if object is completely off screen if (obj.x < -100 || obj.x > 900 || obj.y < -100 || obj.y > 700) { obj.destroy(); this.floatingObjects.splice(i, 1); } } } spawnFloatingObject() { const floatingAssets = ['cricket', 'bugface', 'tree', 'leaf', 'paperlantern', 'mushroom', 'moon', 'flowerhead', 'lighteningbug']; const randomAsset = floatingAssets[Phaser.Math.Between(0, floatingAssets.length - 1)]; // Determine spawn point and target point let spawnPoint = this.getRandomEdgePoint(); let targetPoint = this.getOppositePoint(spawnPoint); // Create the floating object const obj = this.add.sprite(spawnPoint.x, spawnPoint.y, randomAsset); obj.setScale(randomAsset === 'lighteningbug' ? 0.133125 : 0.09375); // 42% larger for lightening bug (0.09375 * 1.42) obj.setAlpha(0.15); // Add physics this.physics.add.existing(obj); // Calculate velocity for diagonal movement const angle = Phaser.Math.Angle.Between( spawnPoint.x, spawnPoint.y, targetPoint.x, targetPoint.y ); // Set random rotation speed obj.rotationSpeed = Phaser.Math.FloatBetween(-0.5, 0.5); // Set velocity const speed = 25; obj.body.setVelocity( Math.cos(angle) * speed, Math.sin(angle) * speed ); this.floatingObjects.push(obj); } getRandomEdgePoint() { const edge = Phaser.Math.Between(0, 3); switch (edge) { case 0: // Top return { x: Phaser.Math.Between(0, 800), y: -50 }; case 1: // Right return { x: 850, y: Phaser.Math.Between(0, 600) }; case 2: // Bottom return { x: Phaser.Math.Between(0, 800), y: 650 }; case 3: // Left return { x: -50, y: Phaser.Math.Between(0, 600) }; } } getOppositePoint(spawnPoint) { // Calculate a random point on the opposite side of the screen if (spawnPoint.x < 0) return { x: 850, y: Phaser.Math.Between(0, 600) }; if (spawnPoint.x > 800) return { x: -50, y: Phaser.Math.Between(0, 600) }; if (spawnPoint.y < 0) return { x: Phaser.Math.Between(0, 800), y: 650 }; return { x: Phaser.Math.Between(0, 800), y: -50 }; } spawnApplePowerUp() { // Calculate distances to each corner const corners = [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 0, y: 600 }, { x: 800, y: 600 }]; let farthestCorner = null; let maxDistance = -1; let oppositeCorner = null; corners.forEach((corner, index) => { const distance = Phaser.Math.Distance.Between( this.player.x, this.player.y, corner.x, corner.y ); if (distance > maxDistance) { maxDistance = distance; farthestCorner = corner; // If we're at top-left (0), opposite is bottom-right (3) // If we're at top-right (1), opposite is bottom-left (2) // If we're at bottom-left (2), opposite is top-right (1) // If we're at bottom-right (3), opposite is top-left (0) oppositeCorner = corners[3 - index]; } else if (distance === maxDistance && Phaser.Math.Between(0, 1) === 0) { farthestCorner = corner; oppositeCorner = corners[3 - index]; } }); // Create apple power-up const apple = this.physics.add.sprite(farthestCorner.x, farthestCorner.y, 'apple'); apple.setScale(0.075); // Increased apple size by 75% apple.setDepth(5); // Set apple depth // Create particle trail const particles = this.add.particles('smallStar').setDepth(4); // Set particles depth lower than apple const emitter = particles.createEmitter({ scale: { start: 0.04, end: 0.01 }, alpha: { start: 0.8, end: 0.1 }, speed: 40, lifespan: 1200, blendMode: 'ADD', frequency: 25, quantity: 2, rotate: { min: 0, max: 360 } }); emitter.startFollow(apple); apple.particles = particles; apple.setActive(true); apple.setVisible(true); // Enable physics body for the apple this.physics.world.enable(apple); apple.body.setCollideWorldBounds(false); // Calculate velocity for diagonal movement const angle = Phaser.Math.Angle.Between( farthestCorner.x, farthestCorner.y, oppositeCorner.x, oppositeCorner.y ); const speed = 124; // Reduced by 38% (200 * 0.62) apple.setVelocity( Math.cos(angle) * speed, Math.sin(angle) * speed ); console.log('Apple spawned at:', farthestCorner.x, farthestCorner.y); console.log('Moving to:', oppositeCorner.x, oppositeCorner.y); this.powerUps.push(apple); } collectPowerUp(player, powerUp) { // Always clean up existing power-up effects first this.isPoweredUp = false; this.hasBarrierProtection = false; player.clearTint(); if (this.barrierGraphics) { this.barrierGraphics.destroy(); this.barrierGraphics = null; } if (this.colorTimer) { this.colorTimer.remove(); this.colorTimer = null; } if (this.barrierTimer) { this.barrierTimer.remove(); this.barrierTimer = null; } // Now we can safely apply the new power-up // Remove the power-up and update the list const index = this.powerUps.indexOf(powerUp); if (index > -1) { this.powerUps.splice(index, 1); if (powerUp.particles) { powerUp.particles.destroy(); } powerUp.destroy(); } // Clear existing timer if there is one if (this.powerUpTimer) { this.powerUpTimer.remove(); } // Apply power-up effects based on type if (powerUp.texture.key === 'apple') { this.applyApplePowerUp(player); } else if (powerUp.texture.key === 'bananas') { this.applyBananasPowerUp(player); } // Reset timer to 10 seconds from current collection this.powerUpTimer = this.time.delayedCall(15000, () => { this.isPoweredUp = false; this.currentPowerUp = null; this.hasBarrierProtection = false; player.clearTint(); if (this.barrierGraphics) { this.barrierGraphics.destroy(); this.barrierGraphics = null; } if (this.colorTimer) { this.colorTimer.remove(); this.colorTimer = null; } if (this.barrierTimer) { this.barrierTimer.remove(); this.barrierTimer = null; } }, [], this); } applyApplePowerUp(player) { this.isPoweredUp = true; this.currentPowerUp = 'apple'; player.setTint(0x8DB600); // Apple green tint } applyBananasPowerUp(player) { // Ensure any existing barrier is fully cleaned up if (this.barrierGraphics) { this.barrierGraphics.destroy(); this.barrierGraphics = null; } if (this.colorTimer) { this.colorTimer.remove(); this.colorTimer = null; } if (this.barrierTimer) { this.barrierTimer.remove(); this.barrierTimer = null; } this.isPoweredUp = true; this.currentPowerUp = 'bananas'; this.hasBarrierProtection = true; player.setTint(0xffff00); // Yellow tint // Create new barrier effect this.barrierGraphics = this.add.graphics(); this.barrierGraphics.setDepth(9); // Between enemies (5) and player (10) const colors = [ 0xff3333, // Bright red 0xff9933, // Bright orange 0xffff33, // Bright yellow 0x33ff33, // Bright green 0x33ffff, // Bright cyan 0x3333ff, // Bright blue 0xff33ff // Bright magenta ]; let colorIndex = 0; // Function to update barrier color and position const updateBarrier = () => { if (this.barrierGraphics) { this.barrierGraphics.clear(); const radius = this.player.width * this.player.scaleX * 1.362; this.barrierGraphics.fillStyle(colors[colorIndex], 0.4); this.barrierGraphics.fillCircle(player.x, player.y, radius); } }; // Update color every 700ms (significantly slower than before) this.colorTimer = this.time.addEvent({ delay: 311, // 700ms / 2.25 ≈ 311ms for 2.25x speed callback: () => { colorIndex = (colorIndex + 1) % colors.length; }, loop: true }); // Update barrier position every frame this.barrierTimer = this.time.addEvent({ delay: 16, // ~60fps callback: updateBarrier, callbackScope: this, loop: true }); } spawnScenery() { // Create scenery using space nebula sprite instead of graphics const x = Phaser.Math.Between(100, 700); const y = -100; const element = this.add.image(x, y, 'spaceNebula'); // Set small scale and low alpha for distant feel const scale = Phaser.Math.FloatBetween(0.2, 0.3); element.setScale(scale); element.setAlpha(0.1); element.setDepth(1); // Match star speeds (1-3 from starTypes config) element.speed = Phaser.Math.FloatBetween(1, 3); // Make the element slightly transparent element.setAlpha(0.15); // Add a slight rotation for more dynamic movement element.rotation = Phaser.Math.FloatBetween(0, Math.PI * 2); element.rotationSpeed = Phaser.Math.FloatBetween(-0.0005, 0.0005); this.sceneryElements.push(element); } setupFireflyFlash() { // Create a container for glow effects that will always be behind the player if (!this.glowContainer) { this.glowContainer = this.add.container(0, 0); // Ensure glow container is behind the player this.children.moveBelow(this.glowContainer, this.player); } const createGlowEffect = () => { if (this.flashTimer) { this.flashTimer.remove(); } // Clear all existing glows this.glowContainer.removeAll(true); // Create a single soft glow const glow = this.add.graphics(); const radius = this.player.width * this.player.scaleX * 1.1; glow.clear(); glow.fillStyle(0xffff99, 0.1); glow.fillCircle(0, 0, radius); this.glowContainer.add(glow); // Static flash that lasts for 1 second this.time.delayedCall(1000, () => { glow.destroy(); // Schedule next flash const nextGlowDelay = Phaser.Math.Between(1000, 15000); this.flashTimer = this.time.delayedCall(nextGlowDelay, createGlowEffect, [], this); }, [], this); }; // Start the first glow timer const initialDelay = Phaser.Math.Between(1000, 15000); this.flashTimer = this.time.delayedCall(initialDelay, createGlowEffect, [], this); } spawnBananasPowerUp() { // Get all possible edge points const edgePoints = []; // Top edge for (let x = 0; x <= 800; x += 50) edgePoints.push({ x, y: 0 }); // Bottom edge for (let x = 0; x <= 800; x += 50) edgePoints.push({ x, y: 600 }); // Left edge (excluding corners already added) for (let y = 50; y < 600; y += 50) edgePoints.push({ x: 0, y }); // Right edge (excluding corners already added) for (let y = 50; y < 600; y += 50) edgePoints.push({ x: 800, y }); // Find the farthest point from player let farthestPoint = null; let maxDistance = -1; edgePoints.forEach(point => { const distance = Phaser.Math.Distance.Between( this.player.x, this.player.y, point.x, point.y ); if (distance > maxDistance || (distance === maxDistance && Phaser.Math.Between(0, 1) === 0)) { maxDistance = distance; farthestPoint = point; } }); // Find the point that creates the longest crossing path let targetPoint = null; maxDistance = -1; edgePoints.forEach(point => { const distance = Phaser.Math.Distance.Between( farthestPoint.x, farthestPoint.y, point.x, point.y ); if (distance > maxDistance || (distance === maxDistance && Phaser.Math.Between(0, 1) === 0)) { maxDistance = distance; targetPoint = point; } }); // Create bananas power-up const bananas = this.physics.add.sprite(farthestPoint.x, farthestPoint.y, 'bananas'); bananas.setScale(0.075); bananas.setDepth(5); // Create particle trail const particles = this.add.particles('smallStar').setDepth(4); // Set particles depth lower than bananas const emitter = particles.createEmitter({ scale: { start: 0.04, end: 0.01 }, alpha: { start: 0.8, end: 0.1 }, speed: 40, lifespan: 1200, blendMode: 'ADD', frequency: 25, quantity: 2, rotate: { min: 0, max: 360 } }); emitter.startFollow(bananas); bananas.particles = particles; bananas.setActive(true); bananas.setVisible(true); // Enable physics body this.physics.world.enable(bananas); bananas.body.setCollideWorldBounds(false); bananas.body.allowGravity = false; // Calculate velocity for diagonal movement const angle = Phaser.Math.Angle.Between( farthestPoint.x, farthestPoint.y, targetPoint.x, targetPoint.y ); const speed = 124; // Set velocity directly without wave motion bananas.setVelocity( Math.cos(angle) * speed, Math.sin(angle) * speed ); console.log('Bananas spawned at:', farthestPoint.x, farthestPoint.y); console.log('Moving to:', targetPoint.x, targetPoint.y); this.powerUps.push(bananas); } generateNewStars() { // Create new stars at the top of the screen const starTypes = [{ texture: 'smallStar', scale: 0.008, speedRange: [0.5, 1.5], alpha: 0.2, depth: -1, weight: 70 }, { texture: 'mediumStar', scale: 0.015, speedRange: [1, 2], alpha: 0.3, depth: -1, weight: 20 }, { texture: 'largeStar', scale: 0.02, speedRange: [1.5, 2.5], alpha: 0.4, depth: -1, weight: 10 }]; // Randomly decide whether to spawn a star based on weights const totalWeight = starTypes.reduce((sum, type) => sum + type.weight, 0); let random = Phaser.Math.Between(0, totalWeight - 1); let selectedType = null; for (const type of starTypes) { if (random < type.weight) { selectedType = type; break; } random -= type.weight; } if (selectedType) { const x = Phaser.Math.Between(0, 800); const y = -20; const star = this.add.sprite(x, y, selectedType.texture); star.setScale(selectedType.scale); star.setAlpha(selectedType.alpha); star.setDepth(selectedType.depth); star.speed = Phaser.Math.FloatBetween(selectedType.speedRange[0], selectedType.speedRange[1]); // Randomly tint some stars for variety if (Phaser.Math.Between(0, 100) < 30) { const colors = [0xFFE4B5, 0xFF69B4, 0x87CEEB, 0xFFA07A, 0x98FB98]; star.setTint(Phaser.Utils.Array.GetRandom(colors)); } this.stars.push(star); } } spawnShootingStar() { // Determine spawn point (top or right edge) const spawnFromTop = Phaser.Math.Between(0, 1) === 0; let x, y; if (spawnFromTop) { x = Phaser.Math.Between(0, 800); y = -20; } else { x = 820; y = Phaser.Math.Between(0, 300); // Spawn in upper portion } const star = this.add.sprite(x, y, 'smallStar'); star.setScale(0.015); star.setAlpha(0.4); // Calculate velocity for diagonal movement const angle = spawnFromTop ? Phaser.Math.DegToRad(Phaser.Math.Between(30, 60)) : Phaser.Math.DegToRad(Phaser.Math.Between(120, 150)); const speed = Phaser.Math.FloatBetween(3, 5); star.velocityX = Math.cos(angle) * speed; star.velocityY = Math.sin(angle) * speed; this.shootingStars.push(star); } spawnComet() { // Spawn from right edge const x = 820; const y = Phaser.Math.Between(100, 400); // Create comet head const comet = this.add.sprite(x, y, 'mediumStar'); comet.setScale(0.04); comet.setAlpha(0.3); // Set velocity for diagonal movement const angle = Phaser.Math.DegToRad(Phaser.Math.Between(120, 150)); const speed = Phaser.Math.FloatBetween(2, 3); comet.velocityX = Math.cos(angle) * speed; comet.velocityY = Math.sin(angle) * speed; // Add particle trail const particles = this.add.particles('smallStar'); particles.setDepth(-1); // Ensure particles are below the grass const emitter = particles.createEmitter({ scale: { start: 0.01, end: 0.001 }, alpha: { start: 0.2, end: 0 }, speed: 0, lifespan: 1000, quantity: 1, frequency: 50 }); emitter.startFollow(comet); comet.particles = particles; this.comets.push(comet); } updateGrassAnimation() { this.grassBlades.forEach(blade => { if (!blade || !blade.graphic) return; // Skip invalid blades blade.graphic.clear(); blade.graphic.lineStyle(2, blade.color, 0.6); blade.graphic.beginPath(); blade.phase += blade.speed; const sway = Math.sin(blade.phase) * 4; const baseY = this.sys.game.config.height; blade.graphic.moveTo(blade.x, baseY); const segments = 4; for (let i = 0; i <= segments; i++) { const t = i / segments; const segX = blade.x + (sway * t * 1.5); const segY = baseY - (blade.height * t); blade.graphic.lineTo(segX, segY); } blade.graphic.strokePath(); }); } spawnFrog() { // Determine which corner is farthest from the player const leftCornerDist = Phaser.Math.Distance.Between(this.player.x, this.player.y, 100, this.sys.game.config.height - 100); const rightCornerDist = Phaser.Math.Distance.Between(this.player.x, this.player.y, this.sys.game.config.width - 100, this.sys.game.config.height - 100); // Choose spawn position let spawnX; if (leftCornerDist === rightCornerDist) { spawnX = Phaser.Math.RND.pick([100, this.sys.game.config.width - 100]); } else { spawnX = leftCornerDist > rightCornerDist ? 100 : this.sys.game.config.width - 100; } // Create the frog const frog = this.physics.add.sprite(spawnX, this.sys.game.config.height - 100, 'mecha frog'); frog.setScale(0.16575); // Further reduced size by 15% frog.setDepth(5); // Get enemy health from input // Set enemy health from stored value frog.health = this.enemyHealthValue; frog.damageTintTimer = null; frog.previousTint = 0xffffff; // Add tongue properties frog.tongue = { graphics: this.add.graphics(), isExtending: false, isRetracting: false, extension: 0, maxLength: 317, nextAttackTime: this.time.now + 1750, minAttackDelay: 2000, maxAttackDelay: 5000, extensionSpeed: 20, // Increased to approximate real frog tongue speed color: 0xff6b6b, thickness: 8 // Increased thickness by 2 pixels }; frog.tongue.graphics.setDepth(6); frog.setCollideWorldBounds(true); // Enable physics this.physics.world.enable(frog); frog.body.setGravityY(1200); // Add proper gravity for jumping // Add frog to enemy group for bullet collision this.enemyGroup.add(frog); // Set up frog properties frog.isJumping = false; frog.nextJumpTime = this.time.now + 2500; // Set initial delay frog.minJumpDelay = 800; // Minimum time between jumps (ms) frog.maxJumpDelay = 3500; // Maximum time between jumps (ms) frog.jumpHeight = -550; // Vertical jump velocity frog.jumpDistance = 250; // Horizontal jump velocity frog.facingLeft = spawnX > this.sys.game.config.width / 2; frog.setFlipX(frog.facingLeft); // Add update logic for the frog const frogUpdate = () => { // Update tongue logic if (frog.tongue && frog.active) { // Clear previous tongue drawing frog.tongue.graphics.clear(); // Check if it's time for a new tongue attack if (!frog.tongue.isExtending && !frog.tongue.isRetracting && this.time.now > frog.tongue.nextAttackTime && frog.body.onFloor()) { frog.tongue.isExtending = true; frog.tongue.isRetracting = false; frog.tongue.extension = 0; // Store target position when tongue starts extending frog.tongue.targetX = this.player.x; frog.tongue.targetY = this.player.y; } // Handle tongue animation if (frog.tongue.isExtending) { // Calculate next position const nextExtension = frog.tongue.extension + frog.tongue.extensionSpeed; const angle = Phaser.Math.Angle.Between( frog.x, frog.y - 10, frog.tongue.targetX, frog.tongue.targetY ); const nextEndX = frog.x + Math.cos(angle) * nextExtension; const nextEndY = (frog.y - 10) + Math.sin(angle) * nextExtension; // Check if next position would be beyond screen bounds if (nextEndX <= 0 || nextEndX >= this.sys.game.config.width || nextEndY <= 0 || nextEndY >= this.sys.game.config.height) { frog.tongue.isExtending = false; frog.tongue.isRetracting = true; } else { frog.tongue.extension = nextExtension; } } else if (frog.tongue.isRetracting) { frog.tongue.extension -= frog.tongue.extensionSpeed; if (frog.tongue.extension <= 0) { frog.tongue.extension = 0; frog.tongue.isRetracting = false; // Set next attack time only after full retraction frog.tongue.nextAttackTime = this.time.now + Phaser.Math.Between(frog.tongue.minAttackDelay, frog.tongue.maxAttackDelay); } } // Draw tongue if extended if (frog.tongue.extension > 0) { // Calculate angle to stored target position const angle = Phaser.Math.Angle.Between( frog.x, frog.y - 10, frog.tongue.targetX, frog.tongue.targetY ); // Calculate distance to screen edge in tongue's direction const endX = frog.x + Math.cos(angle) * frog.tongue.extension; const endY = (frog.y - 10) + Math.sin(angle) * frog.tongue.extension; // Check if tongue would extend beyond screen bounds const hitsBound = endX <= 0 || endX >= this.sys.game.config.width || endY <= 0 || endY >= this.sys.game.config.height; // Draw tongue frog.tongue.graphics.lineStyle(frog.tongue.thickness, frog.tongue.color, 0.8); frog.tongue.graphics.beginPath(); frog.tongue.graphics.moveTo(frog.x, frog.y - 10); frog.tongue.graphics.lineTo( frog.x + Math.cos(angle) * frog.tongue.extension, (frog.y - 10) + Math.sin(angle) * frog.tongue.extension ); frog.tongue.graphics.strokePath(); // Check if tongue line intersects with player if (frog.tongue.extension > 0) { const tongueStartX = frog.x; const tongueStartY = frog.y - 10; const tongueEndX = frog.x + Math.cos(angle) * frog.tongue.extension; const tongueEndY = (frog.y - 10) + Math.sin(angle) * frog.tongue.extension; // Calculate distance from player to tongue line const playerRadius = this.player.width * this.player.scaleX / 2; const distanceToLine = this.distanceToLine( this.player.x, this.player.y, tongueStartX, tongueStartY, tongueEndX, tongueEndY ); // If player is within tongue's thickness + player radius, they're hit if (distanceToLine <= (frog.tongue.thickness / 2 + playerRadius)) { this.takeDamage(); } } } } if (!frog.active) return; // Skip if frog was destroyed // Check if frog is ready to jump if (frog.body.onFloor()) { // Stop horizontal movement when landing frog.setVelocityX(0); // Check if it's time for next jump if (this.time.now > frog.nextJumpTime) { // Determine possible jump directions let canJumpLeft = frog.x > 100; let canJumpRight = frog.x < this.sys.game.config.width - 100; // If against a wall, force direction away from wall if (!canJumpLeft) frog.facingLeft = false; if (!canJumpRight) frog.facingLeft = true; // If both directions possible, randomly choose if (canJumpLeft && canJumpRight) { frog.facingLeft = Phaser.Math.RND.pick([true, false]); } // Execute jump frog.setVelocityY(frog.jumpHeight); frog.setVelocityX(frog.facingLeft ? -frog.jumpDistance : frog.jumpDistance); frog.setFlipX(frog.facingLeft); // Set random delay for next jump const nextDelay = Phaser.Math.Between(frog.minJumpDelay, frog.maxJumpDelay); frog.nextJumpTime = this.time.now + nextDelay; } } }; // Add to scene's update loop this.events.on('update', frogUpdate); // Clean up tongue graphics when frog is destroyed frog.on('destroy', () => { if (frog.tongue && frog.tongue.graphics) { frog.tongue.graphics.destroy(); } }); } // Helper function to calculate distance from point to line segment distanceToLine(px, py, x1, y1, x2, y2) { const A = px - x1; const B = py - y1; const C = x2 - x1; const D = y2 - y1; const dot = A * C + B * D; const len_sq = C * C + D * D; let param = -1; if (len_sq !== 0) param = dot / len_sq; let xx, yy; if (param < 0) { xx = x1; yy = y1; } else if (param > 1) { xx = x2; yy = y2; } else { xx = x1 + param * C; yy = y1 + param * D; } const dx = px - xx; const dy = py - yy; return Math.sqrt(dx * dx + dy * dy); } takeDamage(damage = 1) { if (this.hasBarrierProtection) return; this.health = Math.max(0, this.health - damage); this.healthText.setText('Health: ' + this.health); if (this.health <= 0) { this.handleGameOver(); return; } // Save current tint if not already in damage tint if (!this.damageTintTimer) { this.previousTint = this.player.tintTopLeft; } // Apply damage tint this.player.setTint(0x990000); // Dark red // Clear existing timer if it exists if (this.damageTintTimer) { this.damageTintTimer.remove(); } // Set new timer this.damageTintTimer = this.time.delayedCall(325, () => { this.player.setTint(this.previousTint); this.damageTintTimer = null; }, [], this); } startGame() { // Set health from stored values this.health = this.playerHealthValue; this.score = 0; this.healthText.setText('Health: ' + this.health); this.healthText.setVisible(true); this.scoreText.setVisible(true); this.controlsEnabled = true; // Get spawn rate from input (in seconds) // Get spawn rate from input, with proper null checks // Get spawn rate from input (third input field) const inputElements = this.inputContainer ? this.inputContainer.querySelectorAll('input[type="text"]') : []; let spawnRateValue = inputElements.length >= 3 ? parseInt(inputElements[2].value) : 500; // Force blank or 0 to be 100, use input value if valid (≥100), or default to 100 this.spawnRate = (!spawnRateValue || spawnRateValue === 0 || spawnRateValue < 100) ? 100 : spawnRateValue; // Spawn first enemy after 2.5 seconds this.time.delayedCall(2500, () => { this.spawnRandomEnemy(); // Set up recurring enemy spawn based on input rate this.time.addEvent({ delay: this.spawnRate * 1000, // Convert to milliseconds callback: this.spawnRandomEnemy, callbackScope: this, loop: true }); }, [], this); } spawnRandomEnemy() { if (this.isGameOver) return; const enemies = ['frog', 'spider', 'bat', 'owl', 'evilFlower']; const randomEnemy = Phaser.Utils.Array.GetRandom(enemies); switch (randomEnemy) { case 'frog': this.spawnFrog(); break; case 'spider': this.spawnSpider(); break; case 'bat': this.spawnBat(); break; case 'owl': this.spawnOwl(); break; case 'evilFlower': this.spawnEvilFlower(); break; } } spawnSpider() { // Find the point on the ceiling farthest from the player const points = []; const spacing = 50; // Check every 50 pixels // Generate ceiling points for (let x = 50; x < this.sys.game.config.width - 50; x += spacing) { points.push({ x, y: 0 }); } // Find the farthest point(s) let maxDistance = 0; let farthestPoints = []; points.forEach(point => { const distance = Phaser.Math.Distance.Between( this.player.x, this.player.y, point.x, point.y ); if (distance > maxDistance) { maxDistance = distance; farthestPoints = [point]; } else if (distance === maxDistance) { farthestPoints.push(point); } }); // Randomly select from farthest points if there's a tie const spawnPoint = Phaser.Utils.Array.GetRandom(farthestPoints); // Create the spider const spider = this.physics.add.sprite(spawnPoint.x, -50, 'mecha spider'); spider.setScale(0.08); // Adjusted to match frog's visual size spider.setDepth(5); // Create and draw string graphics immediately spider.string = this.add.graphics(); spider.string.setDepth(4); // Below spider spider.string.lineStyle(2, 0xffffff, 0.8); spider.string.beginPath(); spider.string.moveTo(spawnPoint.x, 0); spider.string.lineTo(spawnPoint.x, -50); spider.string.strokePath(); // Set enemy health from stored value spider.health = this.enemyHealthValue; spider.damageTintTimer = null; spider.previousTint = 0xffffff; // Add to enemy group for bullet collision this.enemyGroup.add(spider); // Set up the initial string drawing that follows the spider this.events.on('update', () => { if (spider.active && spider.string) { spider.string.clear(); spider.string.lineStyle(2, 0xffffff, 0.8); spider.string.beginPath(); spider.string.moveTo(spider.x, 0); spider.string.lineTo(spider.x, spider.y); spider.string.strokePath(); } }); // Initial descent to starting position this.tweens.add({ targets: spider, y: 100, duration: 1000, ease: 'Power1', onComplete: () => { this.setupSpiderMovement(spider); } }); } setupSpiderMovement(spider) { // Initialize spider's web properties spider.webs = []; spider.nextWebTime = this.time.now + 1750; spider.webMinDelay = 2000; spider.webMaxDelay = 4000; const createMovement = () => { if (!spider.active) { if (spider.string) spider.string.destroy(); return; // Stop if spider was destroyed } // Draw the string spider.string.clear(); spider.string.lineStyle(2, 0xffffff, 0.8); spider.string.beginPath(); spider.string.moveTo(spider.x, 0); spider.string.lineTo(spider.x, spider.y); spider.string.strokePath(); const minY = 100; const maxY = this.sys.game.config.height - 100; const currentY = spider.y; let nextY; // Check if spider is at the bottom of the screen if (currentY >= maxY) { // Only allow upward movement nextY = Phaser.Math.Between(minY, maxY - 100); } // Check if spider is at the top of the screen else if (currentY <= minY) { // Only allow downward movement nextY = Phaser.Math.Between(minY + 100, maxY); } // Normal movement selection else { nextY = currentY < (minY + maxY) / 2 ? Phaser.Math.Between((minY + maxY) / 2, maxY) : Phaser.Math.Between(minY, (minY + maxY) / 2); } // Ensure nextY stays within bounds nextY = Phaser.Math.Clamp(nextY, minY, maxY); // Create movement tween this.tweens.add({ targets: spider, y: nextY, duration: Phaser.Math.Between(2000, 4000), ease: 'Sine.easeInOut', onUpdate: () => { // Clamp the spider's position during the tween if (spider.y < minY) spider.y = minY; if (spider.y > maxY) spider.y = maxY; }, onComplete: () => { // Add random delay before next movement this.time.delayedCall( Phaser.Math.Between(500, 2000), createMovement ); } }); }; createMovement(); // Add contact damage check to update loop const damageCheck = () => { if (!spider.active) { // Remove update listener if spider is destroyed this.events.off('update', damageCheck); return; } if (Phaser.Geom.Intersects.RectangleToRectangle( spider.getBounds(), this.player.getBounds() )) { this.takeDamage(); } }; this.events.on('update', () => { damageCheck(); // Update string position in the update loop if (spider.active && spider.string) { spider.string.clear(); spider.string.lineStyle(2, 0xffffff, 0.8); spider.string.beginPath(); spider.string.moveTo(spider.x, 0); spider.string.lineTo(spider.x, spider.y); spider.string.strokePath(); } }); // Add web shooting behavior to update loop this.events.on('update', () => { if (spider.active && this.time.now > spider.nextWebTime) { // Get player position at time of firing const targetX = this.player.x; const targetY = this.player.y; // Create web projectile // Create web projectile as a circle with web-like interior const web = this.add.graphics(); web.lineStyle(2, 0xCCCCCC, 0.8); web.beginPath(); // Main circle const webRadius = 30; // Size similar to player web.strokeCircle(0, 0, webRadius); // Inner web lines for (let i = 0; i < 4; i++) { const angle = (Math.PI * i) / 2; web.moveTo(0, 0); web.lineTo( Math.cos(angle) * webRadius, Math.sin(angle) * webRadius ); } // Inner circles web.strokeCircle(0, 0, webRadius * 0.6); web.strokeCircle(0, 0, webRadius * 0.3); // Create a container to hold the web graphics const webContainer = this.add.container(spider.x, spider.y, [web]); webContainer.setDepth(4); // Add physics to the container this.physics.add.existing(webContainer, false); // Set the physics body size to match the outer circle of the web webContainer.body.setCircle(webRadius, -webRadius, -webRadius); // Calculate angle to player's position const angle = Phaser.Math.Angle.Between( spider.x, spider.y, targetX, targetY ); // Set web velocity const webSpeed = 300; webContainer.body.setVelocity( Math.cos(angle) * webSpeed, Math.sin(angle) * webSpeed ); // Add collision with player this.physics.add.overlap(webContainer, this.player, () => { this.applyWebEffect(); web.destroy(); webContainer.destroy(); }, null, this); // Add web container to spider's webs array spider.webs.push(webContainer); // Set next web time spider.nextWebTime = this.time.now + Phaser.Math.Between(spider.webMinDelay, spider.webMaxDelay); } // Update and cleanup webs if (spider.webs) { for (let i = spider.webs.length - 1; i >= 0; i--) { const webContainer = spider.webs[i]; if (webContainer.x < 0 || webContainer.x > 800 || webContainer.y < 0 || webContainer.y > 600) { webContainer.destroy(); spider.webs.splice(i, 1); } } } }); } handleBulletHit(enemy, bullet) { if (this.isGameOver) return; // Check if enemy is an evil flower that hasn't fully faded in if (enemy.texture.key === 'evil flower' && enemy.alpha < 1) { // Just remove the bullet without dealing damage const bulletIndex = this.bullets.indexOf(bullet); if (bulletIndex > -1) { this.bullets.splice(bulletIndex, 1); bullet.destroy(); } return; } // Remove the bullet const bulletIndex = this.bullets.indexOf(bullet); if (bulletIndex > -1) { this.bullets.splice(bulletIndex, 1); bullet.destroy(); } // Deal damage enemy.health -= (this.isPoweredUp && this.currentPowerUp === 'apple') ? 50 : 25; // Save current tint if not already in damage tint if (!enemy.damageTintTimer) { enemy.previousTint = enemy.tintTopLeft; } // Apply damage tint enemy.setTint(0x990000); // Dark red // Clear existing timer if it exists if (enemy.damageTintTimer) { enemy.damageTintTimer.remove(); } // Set new timer enemy.damageTintTimer = this.time.delayedCall(325, () => { enemy.setTint(enemy.previousTint); enemy.damageTintTimer = null; }, [], this); // Check if enemy is defeated if (enemy.health <= 0) { // Increase score by 100 this.score += 100; this.scoreText.setText('Score: ' + this.score); // Clean up any associated graphics (like frog's tongue, spider's string, or evil flower's stem) if (enemy.tongue && enemy.tongue.graphics) { enemy.tongue.graphics.destroy(); } if (enemy.string) { enemy.string.destroy(); enemy.string = null; } if (enemy.texture.key === 'evil flower' && enemy.stem) { enemy.stem.destroy(); enemy.stem = null; } enemy.destroy(); } } applyWebEffect() { // Apply 15 damage this.takeDamage(13); // Don't apply web effect if banana power-up is active if (this.isPoweredUp && this.currentPowerUp === 'bananas') { return; } // Clear existing web timer and graphic if present if (this.webSlowTimer) { this.webSlowTimer.remove(); } if (this.webGraphic) { this.webGraphic.destroy(); } // Create web graphic attached to player and set initial position this.webGraphic = this.add.graphics(); this.webGraphic.setDepth(11); // Above player this.webGraphic.setPosition(this.player.x, this.player.y); // Draw web this.webGraphic.lineStyle(2, 0xCCCCCC, 0.8); const webRadius = this.player.width * this.player.scaleX * 0.75; // Main circle this.webGraphic.strokeCircle(0, 0, webRadius); // Inner web lines for (let i = 0; i < 4; i++) { const angle = (Math.PI * i) / 2; this.webGraphic.moveTo(0, 0); this.webGraphic.lineTo( Math.cos(angle) * webRadius, Math.sin(angle) * webRadius ); } // Inner circles this.webGraphic.strokeCircle(0, 0, webRadius * 0.6); this.webGraphic.strokeCircle(0, 0, webRadius * 0.3); // Apply slow effect this.isWebSlowed = true; // Set timer for effect duration this.webSlowTimer = this.time.delayedCall(1750, () => { this.isWebSlowed = false; if (this.webGraphic) { this.webGraphic.destroy(); this.webGraphic = null; } }, [], this); // Update web graphic position in the update loop const updateWebPosition = () => { if (this.webGraphic && this.isWebSlowed) { this.webGraphic.setPosition(this.player.x, this.player.y); } else { this.events.off('update', updateWebPosition); } }; this.events.on('update', updateWebPosition); } spawnBat() { // Generate points along the top of the screen const points = []; const spacing = 50; // Check every 50 pixels for (let x = 50; x < this.sys.game.config.width - 50; x += spacing) { points.push({ x, y: 0 }); } // Find the farthest point(s) from the player let maxDistance = 0; let farthestPoints = []; points.forEach(point => { const distance = Phaser.Math.Distance.Between( this.player.x, this.player.y, point.x, point.y ); if (distance > maxDistance) { maxDistance = distance; farthestPoints = [point]; } else if (distance === maxDistance) { farthestPoints.push(point); } }); // Randomly select from farthest points if there's a tie const spawnPoint = Phaser.Utils.Array.GetRandom(farthestPoints); // Create the bat const bat = this.physics.add.sprite(spawnPoint.x, -50, 'bat'); bat.setScale(0.16575); // Same scale as frog bat.setDepth(5); // Get enemy health from input // Set enemy health from stored value bat.health = this.enemyHealthValue; bat.damageTintTimer = null; bat.previousTint = 0xffffff; // Enable physics and set up collision with world bounds this.physics.world.enable(bat); bat.body.setCollideWorldBounds(true); bat.body.setBounce(1.5); // Increased bounce for more dynamic movement // Add to enemy group for bullet collision this.enemyGroup.add(bat); // Set up bat movement properties bat.speed = 150; bat.baseY = 0; bat.wingBeatPhase = 0; bat.direction = new Phaser.Math.Vector2( Phaser.Math.Between(-100, 100), Phaser.Math.Between(-50, 50) ).normalize(); bat.setVelocity( bat.direction.x * bat.speed, bat.direction.y * bat.speed ); bat.nextDirectionChange = this.time.now + Phaser.Math.Between(2000, 4000); // Add bat update logic to the scene's update loop const batUpdate = () => { if (!bat.active) { this.events.off('update', batUpdate); return; } // Handle wall collisions if (bat.body.blocked.left || bat.body.blocked.right) { bat.direction.x *= -1; // Add slight vertical variation after bounce bat.direction.y = Phaser.Math.Between(-50, 50) / 100; bat.direction.normalize(); } if (bat.body.blocked.up || bat.body.blocked.down) { bat.direction.y *= -1; // Add slight horizontal variation after bounce bat.direction.x += Phaser.Math.FloatBetween(-0.2, 0.2); bat.direction.normalize(); } // Gradual direction changes if (this.time.now > bat.nextDirectionChange) { // Smoother direction change const currentAngle = bat.direction.angle(); const angleChange = Phaser.Math.DegToRad(Phaser.Math.Between(-20, 20)); bat.direction.setAngle(currentAngle + angleChange); // Ensure some horizontal movement if (Math.abs(bat.direction.x) < 0.3) { bat.direction.x = bat.direction.x < 0 ? -0.3 : 0.3; bat.direction.normalize(); } bat.nextDirectionChange = this.time.now + Phaser.Math.Between(2000, 4000); } // Update vertical bounce motion bat.wingBeatPhase += 0.2; // Faster wing beats for rapid bouncing // Calculate bouncing effect const bounceHeight = 50; // Reduced bounce height for quicker bobs const verticalMotion = Math.sin(bat.wingBeatPhase) * bounceHeight; // Combine base movement with bouncing bat.setVelocity( bat.direction.x * bat.speed, (bat.direction.y * bat.speed) + verticalMotion ); // Slight tilt based on vertical motion bat.angle = bat.body.velocity.y * 0.1; // Flip sprite based on movement direction bat.setFlipX(bat.direction.x < 0); // Check for collision with player if (Phaser.Geom.Intersects.RectangleToRectangle( bat.getBounds(), this.player.getBounds() )) { this.takeDamage(); } }; this.events.on('update', batUpdate); } spawnOwl() { // Generate points along the ceiling line const points = []; const spacing = 50; // Check every 50 pixels const owlHeight = 484 * 0.16575; // Image height * scale const spawnY = owlHeight / 2; // Position so top of head touches ceiling // Generate points just outside both edges of the screen points.push({ x: -50, y: spawnY }); points.push({ x: this.sys.game.config.width + 50, y: spawnY }); // Find the farthest point(s) from the player let maxDistance = 0; let farthestPoints = []; points.forEach(point => { const distance = Phaser.Math.Distance.Between( this.player.x, this.player.y, point.x, point.y ); if (distance > maxDistance) { maxDistance = distance; farthestPoints = [point]; } else if (distance === maxDistance) { farthestPoints.push(point); } }); // Randomly select from farthest points if there's a tie const spawnPoint = Phaser.Utils.Array.GetRandom(farthestPoints); const spawnX = spawnPoint.x; // Create the owl const owl = this.physics.add.sprite(spawnX, spawnY, 'mecha owl'); owl.setScale(0.16575); // Same scale as other enemies owl.setDepth(5); // Get enemy health from input // Set enemy health from stored value owl.health = this.enemyHealthValue; owl.damageTintTimer = null; owl.previousTint = 0xffffff; // Set up physics this.physics.world.enable(owl); owl.body.setCollideWorldBounds(true); owl.body.setBounce(1, 0); // Full bounce on x-axis, none on y-axis // Add to enemy group for bullet collision this.enemyGroup.add(owl); // Set initial velocity const speed = 150; const spawnOnRight = spawnX > this.sys.game.config.width / 2; owl.setVelocityX(spawnOnRight ? -speed : speed); owl.setVelocityY(0); // Update flip based on direction owl.setFlipX(!spawnOnRight); // Add projectile timer with initial delay and range properties owl.nextProjectileTime = this.time.now + Phaser.Math.Between(1500, 2000); owl.minProjectileDelay = 2000; owl.maxProjectileDelay = 4000; // Add owl update logic const owlUpdate = () => { if (!owl.active) { this.events.off('update', owlUpdate); return; } // Handle wall collisions if (owl.body.blocked.left) { owl.setVelocityX(speed); owl.setFlipX(false); } else if (owl.body.blocked.right) { owl.setVelocityX(-speed); owl.setFlipX(true); } // Check for collision with player if (Phaser.Geom.Intersects.RectangleToRectangle( owl.getBounds(), this.player.getBounds() )) { this.takeDamage(); } // Handle projectile shooting if (this.time.now > owl.nextProjectileTime) { // Create projectile const projectileSize = 15; const graphics = this.add.graphics(); graphics.lineStyle(2, 0x00FF00); graphics.fillStyle(0x00FF00, 0.5); graphics.strokeCircle(0, 0, projectileSize); graphics.fillCircle(0, 0, projectileSize); const projectile = this.add.container(owl.x, owl.y, [graphics]); projectile.setDepth(4); // Add physics to the container with a circular hitbox this.physics.add.existing(projectile, false); projectile.body.setCircle(projectileSize); // Calculate horizontal offset based on player position const horizontalSpeed = this.player.x < owl.x ? -50 : 50; // Set velocity (slight horizontal movement, mainly vertical) projectile.body.setVelocity(horizontalSpeed, 300); // Add collision with player this.physics.add.overlap(projectile, this.player, () => { this.takeDamage(13); projectile.destroy(); }, null, this); // Set next projectile time with random delay owl.nextProjectileTime = this.time.now + Phaser.Math.Between(owl.minProjectileDelay, owl.maxProjectileDelay); // Clean up projectile when it goes off screen const projectileUpdate = () => { if (!projectile.active) { this.events.off('update', projectileUpdate); return; } if (projectile.y > this.sys.game.config.height + 50) { this.events.off('update', projectileUpdate); projectile.destroy(); } }; this.events.on('update', projectileUpdate); } }; this.events.on('update', owlUpdate); } spawnEvilFlower() { // Use player's x position for spawn const spawnX = this.player.x; // Calculate spawnY so the bottom of the flower touches the ground const evilFlowerHeight = 474 * 0.16575; // Height * scale const spawnY = this.sys.game.config.height - (evilFlowerHeight / 2); // Create the evil flower const evilFlower = this.physics.add.sprite(spawnX, spawnY, 'evil flower'); evilFlower.setScale(0.16575); // Same scale as frog evilFlower.setDepth(5); evilFlower.setAlpha(0); // Start invisible // Get enemy health from input // Set enemy health from stored value evilFlower.health = this.enemyHealthValue; evilFlower.damageTintTimer = null; evilFlower.previousTint = 0xffffff; evilFlower.canDamagePlayer = false; // Initially cannot damage player // Add to enemy group for bullet collision this.enemyGroup.add(evilFlower); // Fade in tween // Create stem graphics evilFlower.stem = this.add.graphics(); evilFlower.stem.setDepth(4); // Below the flower evilFlower.stem.lineStyle(4, 0x006600, 0.6); // Darker green and more transparent stem evilFlower.stem.setAlpha(0); // First tween: fade in this.tweens.add({ targets: [evilFlower, evilFlower.stem], alpha: 1, duration: 2000, ease: 'Linear', onComplete: () => { evilFlower.canDamagePlayer = true; // Enable damage after fade in // Second tween: rise up const targetY = this.sys.game.config.height / 2; // Center of screen const startY = evilFlower.y; this.tweens.add({ targets: evilFlower, y: targetY, duration: 2000, ease: 'Sine.easeInOut', onUpdate: () => { // Update stem graphics if flower still exists if (evilFlower.active && evilFlower.stem) { evilFlower.stem.clear(); evilFlower.stem.lineStyle(4, 0x006600, 0.6); evilFlower.stem.beginPath(); evilFlower.stem.moveTo(evilFlower.x, this.sys.game.config.height); evilFlower.stem.lineTo(evilFlower.x, evilFlower.y + (evilFlowerHeight / 2)); evilFlower.stem.strokePath(); } }, onComplete: () => { // Initialize spike properties with random starting angle evilFlower.currentAngle = Math.random() * Math.PI * 2; // Random angle between 0 and 2π // Set up repeating timer for spike firing this.time.addEvent({ delay: 500, // 0.5 seconds (50% faster) callback: () => { if (!evilFlower.active) return; // Create spike const spike = this.add.graphics(); spike.lineStyle(2, 0xFF0000); spike.fillStyle(0xFF0000, 0.8); // Draw triangle for spike spike.beginPath(); spike.moveTo(-8, -4); spike.lineTo(8, 0); spike.lineTo(-8, 4); spike.closePath(); spike.fillPath(); spike.strokePath(); // Create container for spike const spikeContainer = this.add.container(evilFlower.x, evilFlower.y, [spike]); spikeContainer.setDepth(6); // Set the angle for clockwise rotation const angle = evilFlower.currentAngle; spike.setRotation(angle); // Update the angle for next spike (clockwise) evilFlower.currentAngle += Math.PI / 4; // 45 degrees // Add physics to spike container with tight hitbox this.physics.add.existing(spikeContainer); spikeContainer.body.setSize(16, 8); // Match triangle dimensions spikeContainer.body.setOffset(-8, -4); // Center the hitbox // Calculate velocity based on angle const speed = 200; const velocityX = Math.cos(angle) * speed; const velocityY = Math.sin(angle) * speed; spikeContainer.body.setVelocity(velocityX, velocityY); // Add collision with player this.physics.add.overlap(spikeContainer, this.player, () => { this.takeDamage(13); spikeContainer.destroy(); }); // Clean up spikes that go off screen const spikeUpdate = () => { if (!spikeContainer.active) { this.events.off('update', spikeUpdate); return; } if (spikeContainer.x < -50 || spikeContainer.x > this.sys.game.config.width + 50 || spikeContainer.y < -50 || spikeContainer.y > this.sys.game.config.height + 50) { this.events.off('update', spikeUpdate); spikeContainer.destroy(); } }; this.events.on('update', spikeUpdate); }, loop: true }); } }); } }); // Add contact damage check to update loop const damageCheck = () => { if (!evilFlower.active) { this.events.off('update', damageCheck); return; } if (evilFlower.canDamagePlayer && Phaser.Geom.Intersects.RectangleToRectangle( evilFlower.getBounds(), this.player.getBounds() )) { this.takeDamage(); } }; this.events.on('update', damageCheck); } handleGameOver() { this.isGameOver = true; // Clear banana barrier if active if (this.barrierGraphics) { this.barrierGraphics.destroy(); this.barrierGraphics = null; } if (this.colorTimer) { this.colorTimer.remove(); this.colorTimer = null; } if (this.barrierTimer) { this.barrierTimer.remove(); this.barrierTimer = null; } // Clear firefly flash timer if (this.flashTimer) { this.flashTimer.remove(); this.flashTimer = null; } // Clear any glow effects if (this.glowContainer) { this.glowContainer.removeAll(true); } // Clear evil flower stems and enemies this.enemyGroup.children.each(enemy => { if (enemy.texture.key === 'evil flower' && enemy.stem) { enemy.stem.destroy(); } }); this.enemyGroup.clear(true, true); // Clear player this.player.destroy(); // Get spawn rate from input // Use the stored spawn rate value const spawnRate = this.spawnRate || 5; // Create game over text // Add score text separately and higher up const scoreText = this.add.text(400, 200, `Final Score: ${this.score}`, { fontSize: '32px', fill: '#ffff00', align: 'center' }); scoreText.setOrigin(0.5); // Add remaining game over text with more space below score const gameOverText = this.add.text(400, 350, `on these settings:\n\n` + `Player Health: ${this.playerHealthValue}\n` + `Enemy Health: ${this.enemyHealthValue}\n` + `Enemy Spawn Rate: ${spawnRate} centiseconds\n\n` + `Thanks for playing!\n` + `To play again, please refresh the page.`, { fontSize: '24px', fill: '#fff', align: 'center' }); gameOverText.setOrigin(0.5); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: container, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { debug: false } }, scene: SpaceShooter }; window.phaserGame = new Phaser.Game(config);