class MainMenu extends Phaser.Scene { constructor() { super('MainMenu'); } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/background-1774911_1920.jpg?4fUD'); this.load.image('sardineHD', 'https://play.rosebud.ai/assets/Sardine HD.png?Q1Al'); this.load.audio('menuMusic', 'https://play.rosebud.ai/assets/Eclipse of Silence.mp3?hOEk'); this.load.image('soundOn', 'https://play.rosebud.ai/assets/sound-off-music-mute-off-sound-speaker-volume-icon-16.png?4Iqs'); this.load.image('soundOff', 'https://play.rosebud.ai/assets/sound-off-music-mute-off-sound-speaker-volume-icon off-16.png?Gqr8'); } create() { const { width, height } = this.scale; // Add background image const background = this.add.image(width / 2, height / 2, 'background'); // Maintain original aspect ratio const scaleX = width / background.width; const scaleY = height / background.height; const scale = Math.max(scaleX, scaleY); background.setScale(scale); // Add semi-transparent overlay const overlay = this.add.rectangle(0, 0, width, height, 0x000000, 0.6); overlay.setOrigin(0); // Add title this.add.text(width / 2, height * 0.2, 'Sardine', { fontSize: '64px', fontStyle: 'bold', fill: '#ffffff', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5); // Add Sardine HD image const sardine = this.add.image(width * 0.8, height * 0.5, 'sardineHD'); sardine.setScale(0.5); // Adjust scale as needed // Add a glow effect to the sardine this.tweens.add({ targets: sardine, alpha: 0.8, duration: 1500, ease: 'Power2', yoyo: true, repeat: -1 }); const menuItems = ['Start Game', 'Quit']; const buttonStyle = { fontSize: '36px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 }, }; menuItems.forEach((item, index) => { const button = this.add.text(width * 0.3, height * 0.5 + index * 80, item, buttonStyle) .setOrigin(0.5) .setInteractive({ useHandCursor: true }) .on('pointerover', () => { button.setStyle({ fill: '#ff0' }); this.tweens.add({ targets: button, scale: 1.1, duration: 100 }); }) .on('pointerout', () => { button.setStyle({ fill: '#ffffff' }); this.tweens.add({ targets: button, scale: 1, duration: 100 }); }) .on('pointerdown', () => this.handleMenuOption(item)); // Add glow effect this.tweens.add({ targets: button, alpha: 0.8, duration: 1000, ease: 'Power2', yoyo: true, repeat: -1 }); }); // Add menu music this.menuMusic = this.sound.add('menuMusic', { loop: true }); this.menuMusic.play(); // Add sound toggle button this.soundButton = this.add.image(40, 40, 'soundOn') .setInteractive() .setScale(0.125); this.soundButton.on('pointerdown', () => { this.toggleSound(); }); // Display the high score const highScore = localStorage.getItem('sardineHighScore') || 0; this.add.text(width / 2, height * 0.9, `High Score: ${highScore}`, { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); } toggleSound() { if (this.sound.mute) { this.sound.mute = false; this.soundButton.setTexture('soundOn'); } else { this.sound.mute = true; this.soundButton.setTexture('soundOff'); } } handleMenuOption(option) { switch (option) { case 'Start Game': this.menuMusic.stop(); this.scene.start('SardineGame'); this.scene.stop('MainMenu'); break; case 'Quit': window.location.reload(); break; } } } class SardineGame extends Phaser.Scene { constructor() { super('SardineGame'); this.initializeGameVariables(); } initializeGameVariables() { this.isFocusMode = false; this.playerAlive = true; this.bossAlive = true; this.gameOver = false; this.score = 0; this.gameWidth = 1280; this.gameHeight = 720; this.gameAreaWidth = 450; this.gameAreaHeight = 800; this.highScore = parseInt(localStorage.getItem('sardineHighScore')) || 0; this.bulletsFired = 0; this.gameStartTime = 0; this.invincible = false; this.invincibilityTime = 3000; this.activeTweens = []; this.activeTimers = []; this.playerLives = 3; this.bossPhase = 1; this.bossMaxPhases = 3; this.bossMaxHealthPerPhase = 1000; this.bossHealthBarColors = [0x0000ff, 0x00ff00, 0xff0000]; // Blue, Green, Red // New variables for player shooting this.playerBullets = null; this.lastPlayerFired = 0; this.playerFireRate = 250; // Fire rate in milliseconds (doubled from 500 to 250) // Boss attack patterns this.bossAttackPatterns = [ this.spiralAttack, this.radialBurstAttack, this.aimedBurstAttack, this.randomSprayAttack, this.circleCageAttack ]; this.currentAttackPattern = 0; this.attackPatternDuration = 10000; // 10 seconds per pattern this.lastPatternChange = 0; } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/blue-stain.png?jTmh'); this.load.spritesheet('player', 'https://play.rosebud.ai/assets/Sardine nage animation.png?OBwQ', { frameWidth: 256, frameHeight: 256 }); this.load.image('playerFocus', 'https://play.rosebud.ai/assets/Sardine focus.png?vgpN'); this.load.image('boss', 'https://play.rosebud.ai/assets/V2.png?dCbK'); this.load.image('soundOn', 'https://play.rosebud.ai/assets/sound-off-music-mute-off-sound-speaker-volume-icon-16.png?4Iqs'); this.load.image('soundOff', 'https://play.rosebud.ai/assets/sound-off-music-mute-off-sound-speaker-volume-icon off-16.png?Gqr8'); this.load.image('orb', 'https://play.rosebud.ai/assets/orb.png?GKyT'); this.load.image('playerBullet', 'https://play.rosebud.ai/assets/orb.png?GKyT'); this.load.audio('hitSound', 'https://play.rosebud.ai/assets/745122__etheraudio__clicky-bass-drum.wav?tUjf'); this.load.audio('loseSound', 'https://play.rosebud.ai/assets/Fragmented Memories.mp3?F46k'); this.load.audio('bossMusic', 'https://play.rosebud.ai/assets/Embers of Chaos.mp3?e0R6'); } create() { this.initializeGameVariables(); this.gameStartTime = this.time.now; // Use 'blue-stain.png' as the background and set it as the game area this.background = this.add.tileSprite(this.gameWidth / 2, this.gameHeight / 2, this.gameAreaWidth, this.gameAreaHeight, 'background'); this.background.setOrigin(0.5); // Set the game area bounds based on the background const gameAreaX = (this.gameWidth - this.gameAreaWidth) / 2; const gameAreaY = (this.gameHeight - this.gameAreaHeight) / 2; this.physics.world.setBounds(gameAreaX, gameAreaY, this.gameAreaWidth, this.gameAreaHeight); this.overlay = this.add.rectangle(this.gameWidth / 2, this.gameHeight / 2, this.gameAreaWidth, this.gameAreaHeight, 0x000000, 0.3); // Create player animation this.anims.create({ key: 'swim', frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.player = this.physics.add.sprite(this.gameWidth / 2, this.gameHeight - 60, 'player').setScale(0.4); this.player.play('swim'); const hitboxRadius = 5; const hitboxOffset = hitboxRadius * 0.75; this.playerHitbox = this.add.circle(this.gameWidth / 2, this.gameHeight - 20 - hitboxOffset, hitboxRadius, 0xff0000); this.physics.add.existing(this.playerHitbox); this.playerHitbox.body.setCircle(hitboxRadius); this.playerHitbox.body.setCollideWorldBounds(true); this.boss = this.add.sprite(this.gameWidth / 2, 60, 'boss').setScale(0.5); this.boss.health = this.bossMaxHealthPerPhase; const bossHitboxRadius = 50; this.bossHitbox = this.add.circle(this.gameWidth / 2, 60, bossHitboxRadius, 0xff0000, 0.3); this.physics.add.existing(this.bossHitbox); this.bossHitbox.body.setCircle(bossHitboxRadius); this.cursors = this.input.keyboard.createCursorKeys(); // Rearrange UI elements on the right side const rightPanelWidth = this.gameWidth * 0.25; const rightPanelX = this.gameWidth - rightPanelWidth / 2; this.infoPanel = this.add.rectangle(rightPanelX, this.gameHeight / 2, rightPanelWidth, this.gameHeight, 0x000000, 0.7); const textStyle = { fontSize: '24px', fill: '#FFF', fontStyle: 'bold' }; const spacing = 40; let yPosition = 50; this.scoreText = this.add.text(rightPanelX, yPosition, 'Score: 0', textStyle).setOrigin(0.5); yPosition += spacing; this.highScoreText = this.add.text(rightPanelX, yPosition, `High Score: ${this.highScore}`, textStyle).setOrigin(0.5); yPosition += spacing; this.livesText = this.add.text(rightPanelX, yPosition, `Lives: ${this.playerLives}`, textStyle).setOrigin(0.5); yPosition += spacing * 2; this.bossHealthBar = this.add.graphics(); this.bossHealthBar.x = rightPanelX; this.bossHealthBar.y = yPosition; yPosition += spacing * 3; this.bossHealthText = this.add.text(rightPanelX, yPosition, `Boss HP: ${this.boss.health}`, textStyle).setOrigin(0.5); yPosition += spacing; this.bossPhaseText = this.add.text(rightPanelX, yPosition, `Phase: ${this.bossPhase}/${this.bossMaxPhases}`, textStyle).setOrigin(0.5); this.updateBossHealthBar(); this.hitSound = this.sound.add('hitSound'); this.loseSound = this.sound.add('loseSound'); this.bossMusic = this.sound.add('bossMusic', { loop: true }); this.bossMusic.play(); window.addEventListener('resize', this.resize.bind(this)); this.resize(); this.anims.create({ key: 'death', frames: [{ key: 'player' }, { key: 'playerFocus' }], frameRate: 10, repeat: -1 }); //Add sound toggle button this.soundButton = this.add.image(40, 40, 'soundOn') .setInteractive() .setScale(0.125); this.soundButton.on('pointerdown', () => { this.toggleSound(); }); // Add collision between player and boss this.physics.add.overlap(this.playerHitbox, this.bossHitbox, this.playerHitBoss, null, this); // Create player bullet group this.playerBullets = this.physics.add.group(); // Start player automatic shooting this.playerShootEvent = this.time.addEvent({ delay: this.playerFireRate, callback: this.playerShoot, callbackScope: this, loop: true }); // Add collision between boss and player bullets this.physics.add.overlap(this.bossHitbox, this.playerBullets, this.bossHitBullet, null, this); // Create boss bullet group this.bossBullets = this.physics.add.group(); // Add collision between player and boss bullets this.physics.add.overlap(this.playerHitbox, this.bossBullets, this.playerHitBossBullet, null, this); // Start boss attack patterns this.time.addEvent({ delay: 100, callback: this.updateBossAttack, callbackScope: this, loop: true }); // Add restart key this.input.keyboard.on('keydown-R', this.restartGame, this); } toggleSound() { if (this.sound.mute) { this.sound.mute = false; this.soundButton.setTexture('soundOn'); } else { this.sound.mute = true; this.soundButton.setTexture('soundOff'); } } resize() { const width = window.innerWidth; const height = window.innerHeight; const wratio = width / height; const gratio = this.gameWidth / this.gameHeight; if (wratio < gratio) { this.scale.setGameSize(width, width / gratio); } else { this.scale.setGameSize(height * gratio, height); } this.scale.resize(width, height); this.cameras.main.centerOn(this.gameWidth / 2, this.gameHeight / 2); } update() { if (this.gameOver) { return; } this.playerHitbox.body.setVelocity(0); // Only allow movement if the player is alive if (this.playerAlive) { let moveSpeed = this.isFocusMode ? 100 : 200; if (this.cursors.left.isDown) { this.playerHitbox.body.setVelocityX(-moveSpeed); } else if (this.cursors.right.isDown) { this.playerHitbox.body.setVelocityX(moveSpeed); } if (this.cursors.up.isDown) { this.playerHitbox.body.setVelocityY(-moveSpeed); } else if (this.cursors.down.isDown) { this.playerHitbox.body.setVelocityY(moveSpeed); } } this.player.x = this.playerHitbox.x; this.player.y = this.playerHitbox.y + this.playerHitbox.body.radius * 0.75; if (this.cursors.shift.isDown) { this.isFocusMode = true; this.player.setTexture('playerFocus'); this.playerHitbox.fillColor = 0x00ff00; // Green color for focus mode } else { this.isFocusMode = false; if (!this.player.anims.isPlaying) { this.player.play('swim'); } this.playerHitbox.fillColor = 0xff0000; // Red color for normal mode } this.background.tilePositionY -= 0.5; if (this.bossAlive) { this.bossHitbox.x = this.gameWidth / 2 + Math.sin(this.time.now / 1000) * 100; this.boss.x = this.bossHitbox.x; this.boss.y = this.bossHitbox.y; } this.scoreText.setText(`Score: ${this.score}`); this.bossHealthText.setText(`Boss HP: ${this.boss.health}`); this.livesText.setText(`Lives: ${this.playerLives}`); this.bossPhaseText.setText(`Phase: ${this.bossPhase}/${this.bossMaxPhases}`); this.updateBossHealthBar(); // Update high score if necessary if (this.score > this.highScore) { this.highScore = this.score; this.highScoreText.setText(`High Score: ${this.highScore}`); localStorage.setItem('sardineHighScore', this.highScore); } // Update player bullet positions, remove out of bounds bullets, and update homing behavior this.playerBullets.getChildren().forEach(bullet => { if (bullet.y < -50 || bullet.y > this.gameHeight + 50 || bullet.x < -50 || bullet.x > this.gameWidth + 50) { bullet.destroy(); } else { this.updateHomingBullet(bullet); } }); // Update boss bullets this.bossBullets.getChildren().forEach(bullet => { if (bullet.y < -50 || bullet.y > this.gameHeight + 50 || bullet.x < -50 || bullet.x > this.gameWidth + 50) { bullet.destroy(); } }); } updateHomingBullet(bullet) { if (this.bossAlive) { const angle = Phaser.Math.Angle.Between(bullet.x, bullet.y, this.boss.x, this.boss.y); const homingSpeed = 200; this.physics.velocityFromRotation(angle, homingSpeed, bullet.body.velocity); } } playerHitBoss(playerHitbox, bossHitbox) { if (this.invincible) return; if (this.playerLives > 0) { this.hitSound.play(); this.cameras.main.shake(200, 0.005); } this.playerLives = Math.max(0, this.playerLives - 1); // Ensure lives don't go below 0 this.livesText.setText(`Lives: ${this.playerLives}`); if (this.playerLives <= 0) { this.playerFinalDeath(); } else { this.makePlayerInvincible(); } } bossHitBullet(bossHitbox, bullet) { bullet.destroy(); this.hitSound.play(); this.boss.health -= 10; this.score += 10; this.updateBossHealthBar(); if (this.boss.health <= 0) { this.advanceBossPhase(); } } makePlayerInvincible() { this.invincible = true; this.player.alpha = 0.5; this.time.delayedCall(this.invincibilityTime, () => { this.invincible = false; this.player.alpha = 1; }); } updateBossHealthBar() { this.bossHealthBar.clear(); this.bossHealthBar.lineStyle(15, 0x333333); this.bossHealthBar.strokeCircle(0, 0, 60); const healthPercentage = this.boss.health / this.bossMaxHealthPerPhase; const angle = Math.PI * 2 * healthPercentage - Math.PI / 2; this.bossHealthBar.lineStyle(15, this.bossHealthBarColors[this.bossPhase - 1]); this.bossHealthBar.beginPath(); this.bossHealthBar.arc(0, 0, 60, -Math.PI / 2, angle, false); this.bossHealthBar.strokePath(); } advanceBossPhase() { this.bossPhase++; if (this.bossPhase > this.bossMaxPhases) { this.bossFinalDeath(); } else { this.boss.health = this.bossMaxHealthPerPhase; this.updateBossHealthBar(); this.bossHealthText.setText(`Boss HP: ${this.boss.health}`); this.bossPhaseTransition(); } } bossPhaseTransition() { this.bossInvincible = true; const phaseTween = this.tweens.add({ targets: this.boss, alpha: 0.5, scale: 1.5, duration: 1000, yoyo: true, onComplete: () => { this.bossInvincible = false; } }); this.activeTweens.push(phaseTween); } bossFinalDeath() { if (!this.bossAlive || this.gameOver) return; this.bossAlive = false; this.bossMusic.stop(); this.bossDeathAnimation(); } bossDeathAnimation() { const bossFadeOutTween = this.tweens.add({ targets: this.boss, alpha: 0, duration: 1000, onComplete: () => { this.boss.destroy(); } }); this.activeTweens.push(bossFadeOutTween); this.time.delayedCall(2000, () => { if (!this.gameOver) { this.showEndScreen('Victory!'); } }); } playerFinalDeath() { if (!this.playerAlive || this.gameOver) return; this.playerAlive = false; this.bossMusic.stop(); this.loseSound.play(); this.playerDeathAnimation(); this.time.delayedCall(2000, () => { if (!this.gameOver) { this.showEndScreen('Game Over'); } }); } playerDeathAnimation() { this.player.play('death'); const playerFadeOutTween = this.tweens.add({ targets: this.player, alpha: 0, duration: 1000, ease: 'Power2' }); this.activeTweens.push(playerFadeOutTween); } showEndScreen(message) { if (this.gameOver) return; this.gameOver = true; this.bossMusic.stop(); if (this.score > this.highScore) { this.highScore = this.score; localStorage.setItem('sardineHighScore', this.highScore); } this.endScreenGroup = this.add.group(); const overlay = this.add.rectangle(this.gameWidth / 2, this.gameHeight /2, this.gameWidth, this.gameHeight, 0x000000, 0); this.endScreenGroup.add(overlay); const overlayFadeTween = this.tweens.add({ targets: overlay, alpha: 0.8, duration: 1000, ease: 'Power2' }); this.activeTweens.push(overlayFadeTween); const mainText = this.add.text(this.gameWidth / 2, this.gameHeight * 0.2, message, { fontSize: '84px', fontStyle: 'bold', fill: '#FF0000', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5).setAlpha(0); this.endScreenGroup.add(mainText); const mainTextFadeTween = this.tweens.add({ targets: mainText, alpha: 1, duration: 1000, ease: 'Power2' }); this.activeTweens.push(mainTextFadeTween); const mainTextGlowTween = this.tweens.add({ targets: mainText, alpha: 0.8, duration: 1000, ease: 'Power2', yoyo: true, repeat: -1, delay: 1000 }); this.activeTweens.push(mainTextGlowTween); const scoreText = this.add.text(this.gameWidth / 2, this.gameHeight * 0.35, `Score: ${this.score}`, { fontSize: '48px', fill: '#ffffff' }).setOrigin(0.5).setAlpha(0); const highScoreText = this.add.text(this.gameWidth / 2, this.gameHeight * 0.45, `High Score: ${this.highScore}`, { fontSize: '48px', fill: '#FFD700' }).setOrigin(0.5).setAlpha(0); this.endScreenGroup.add(scoreText); this.endScreenGroup.add(highScoreText); const scoreFadeTween = this.tweens.add({ targets: [scoreText, highScoreText], alpha: 1, duration: 1000, ease: 'Power2', delay: 500 }); this.activeTweens.push(scoreFadeTween); const timeElapsed = Math.floor((this.time.now - this.gameStartTime) / 1000); const minutes = Math.floor(timeElapsed / 60); const seconds = timeElapsed % 60; const statsText = this.add.text(this.gameWidth / 2, this.gameHeight *0.55, `Time: ${minutes}m ${seconds}s | Bullets Fired: ${this.bulletsFired}`, { fontSize: '32px', fill: '#ffffff' } ).setOrigin(0.5).setAlpha(0); this.endScreenGroup.add(statsText); const statsFadeTween = this.tweens.add({ targets: statsText, alpha: 1, duration: 1000, ease: 'Power2', delay: 1000 }); this.activeTweens.push(statsFadeTween); this.time.delayedCall(3000, () => { this.input.on('pointerdown', () => { this.sound.stopAll(); this.scene.start('MainMenu'); }); }); } cleanup() { this.time.removeAllEvents(); this.tweens.killAll(); this.sound.stopAll(); this.children.removeAll(true); window.removeEventListener('resize', this.resize); } playerShoot() { if (!this.playerAlive || this.gameOver) return; const bulletRadius = 3; // Reduced bullet radius to be smaller than the player hitbox const bullet = this.playerBullets.create(this.player.x, this.player.y, 'playerBullet'); bullet.setScale(2 * bulletRadius / bullet.width); // Scale the bullet to match the hitbox size bullet.body.setCircle(bulletRadius); // Set the hitbox size this.bulletsFired++; } updateBossAttack() { if (!this.bossAlive || this.gameOver) return; const currentTime = this.time.now; if (currentTime - this.lastPatternChange >= this.attackPatternDuration) { this.currentAttackPattern = (this.currentAttackPattern + 1) % this.bossAttackPatterns.length; this.lastPatternChange = currentTime; } this.bossAttackPatterns[this.currentAttackPattern].call(this); } createBossBullet(x, y, angle, speed) { const bulletRadius = 3; // Reduced boss bullet radius to be smaller than the player hitbox const bullet = this.bossBullets.create(x, y, 'orb'); bullet.setScale(2 * bulletRadius / bullet.width); // Scale the bullet to match the hitbox size bullet.body.setCircle(bulletRadius); // Set the hitbox size this.physics.velocityFromRotation(angle, speed, bullet.body.velocity); return bullet; } spiralAttack() { const centerX = this.boss.x; const centerY = this.boss.y; const bullets = 5; const angleStep = (Math.PI * 2) / bullets; const speed = 150; for (let i = 0; i < bullets; i++) { const angle = angleStep * i + this.time.now * 0.005; this.createBossBullet(centerX, centerY, angle, speed); } } radialBurstAttack() { const centerX = this.boss.x; const centerY = this.boss.y; const bullets = 16; const angleStep = (Math.PI * 2) / bullets; const speed = 200; for (let i = 0; i < bullets; i++) { const angle = angleStep * i; this.createBossBullet(centerX, centerY, angle, speed); } } aimedBurstAttack() { const centerX = this.boss.x; const centerY = this.boss.y; const bullets = 5; const angleBetweenBullets = Math.PI / 16; const speed = 250; const angleToPlayer = Phaser.Math.Angle.Between(centerX, centerY, this.player.x, this.player.y); for (let i = 0; i < bullets; i++) { const angle = angleToPlayer + (i - Math.floor(bullets / 2)) * angleBetweenBullets; this.createBossBullet(centerX, centerY, angle, speed); } } randomSprayAttack() { const centerX = this.boss.x; const centerY = this.boss.y; const bullets = 20; const speed = 175; for (let i = 0; i < bullets; i++) { const angle = Phaser.Math.FloatBetween(0, Math.PI * 2); this.createBossBullet(centerX, centerY, angle, speed); } } circleCageAttack() { const centerX = this.boss.x; const centerY = this.boss.y; const bullets = 30; const radius = 100; const speed = 50; for (let i = 0; i < bullets; i++) { const angle = (Math.PI * 2 / bullets) * i; const x = centerX + Math.cos(angle) * radius; const y = centerY + Math.sin(angle) * radius; this.createBossBullet(x, y, angle + Math.PI, speed); } } playerHitBossBullet(player, bullet) { if (this.invincible) return; bullet.destroy(); if (this.playerLives > 0) { this.hitSound.play(); this.cameras.main.shake(200, 0.005); } this.playerLives = Math.max(0, this.playerLives - 1); // Ensure lives don't go below 0 this.livesText.setText(`Lives: ${this.playerLives}`); if (this.playerLives <= 0) { this.playerFinalDeath(); } else { this.makePlayerInvincible(); } } restartGame() { this.sound.stopAll(); // Stop all sounds before restarting this.scene.restart(); } } const config = { type: Phaser.AUTO, width: window.innerWidth, height: window.innerHeight, parent: 'renderDiv', physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } }, scene: [MainMenu, SardineGame], scale: { mode: Phaser.Scale.RESIZE, autoCenter: Phaser.Scale.CENTER_BOTH } }; const game = new Phaser.Game(config);