class Fuel extends Phaser.Physics.Arcade.Sprite { constructor(scene, x, y) { super(scene, x, y, 'fuel'); scene.add.existing(this); scene.physics.add.existing(this); this.setDisplaySize(20, 20); this.picked = false; // State to manage pickup } pickUp() { this.picked = true; this.setVisible(false); this.setActive(false); } } // Add the fire backdrop. Move it with the player on an offset class Player extends Phaser.Physics.Arcade.Sprite { constructor(scene, x, y) { super(scene, x, y, 'player'); scene.add.existing(this); scene.physics.add.existing(this); this.setDisplaySize(50, 50); this.isThrusting = false; this.active = true; this.maxHealth = 3; this.health = this.maxHealth; this.hasFuel = false; this.collisionCooldown = false; this.collisionCooldownTick = 0; this.score = 0; // Add fuel backdrop this.fuelBackdrop = scene.add.sprite(this.x, this.y, 'fuelBackdrop'); this.fuelBackdrop.setVisible(false); this.fuelBackdrop.setDisplaySize(40, 40); this.fuelBackdrop.setDepth(this.depth - 1).setAlpha(.5); // Define baseline velocities // Define baseline speeds this.baselineTangentialSpeed = 250; // Adjust for desired orbit speed this.baselineRadialSpeed = 150; // Should be low to ensure gradual movement towards the sun // Define thrust force magnitude // Define thrust force magnitude this.thrustForce = -150; // Adjust as needed for desired radial thrust effect // Define initial current thrust force and thrust acceleration this.currentThrustForce = 0; this.thrustAcceleration = 4; // Adjust as needed for desired thrust acceleration rate // Radial velocity scaling this.currentRadialSpeed = 0; // Initial radial speed this.radialAcceleration = 4; // Rate at which radial speed increases this.isThrusting = false; this.active = true; } setBaselineVelocities() { const posX = this.x; const posY = this.y; const sunPosX = this.scene.sun.x; const sunPosY = this.scene.sun.y; const directionX = sunPosX - posX; const directionY = sunPosY - posY; const directionMag = Math.sqrt(directionX * directionX + directionY * directionY); const normalizedDirectionX = directionX / directionMag; const normalizedDirectionY = directionY / directionMag; // Scale up the radial speed if (this.currentRadialSpeed < this.baselineRadialSpeed) { this.currentRadialSpeed += this.radialAcceleration; if (this.currentRadialSpeed > this.baselineRadialSpeed) { this.currentRadialSpeed = this.baselineRadialSpeed; // Ensure we don't exceed the target } console.log(`Increasing radial speed: ${this.currentRadialSpeed}`); } // Calculate baseline tangential velocity const tangentialVelocityX = -normalizedDirectionY * this.baselineTangentialSpeed; const tangentialVelocityY = normalizedDirectionX * this.baselineTangentialSpeed; // Calculate current radial velocity const radialVelocityX = normalizedDirectionX * this.currentRadialSpeed; const radialVelocityY = normalizedDirectionY * this.currentRadialSpeed; this.body.velocity.x = tangentialVelocityX + radialVelocityX; this.body.velocity.y = tangentialVelocityY + radialVelocityY; // Log when the max radial speed is reached if (this.currentRadialSpeed === this.baselineRadialSpeed) { console.log(`Max radial speed reached: ${this.currentRadialSpeed}`); } } startThrust() { this.isThrusting = true; this.currentThrustForce = 0; // Initialize thrust force console.log('Thrust started'); } stopThrust() { this.isThrusting = false; this.currentThrustForce = 0; // Reset thrust force console.log('Thrust stopped'); } startRadialAcceleration() { this.currentRadialSpeed = 0; // Initialize radial speed this.isStopped = false; // Ensure we are not in the stopped state console.log('Radial acceleration started'); } stopRadialAcceleration() { this.currentRadialSpeed = 0; // Reset radial speed console.log('Radial acceleration stopped'); } applyThrust() { if (!this.isThrusting) return; // Scale up the thrust force if (this.currentThrustForce > this.thrustForce) { // Note the direction of the thrust force this.currentThrustForce -= this.thrustAcceleration; if (this.currentThrustForce < this.thrustForce) { this.currentThrustForce = this.thrustForce; // Ensure we don't go below the target } console.log(`Increasing thrust: ${this.currentThrustForce}`); } const posX = this.x; const posY = this.y; const sunPosX = this.scene.sun.x; const sunPosY = this.scene.sun.y; const directionX = sunPosX - posX; const directionY = sunPosY - posY; const directionMag = Math.sqrt(directionX * directionX + directionY * directionY); const normalizedDirectionX = directionX / directionMag; const normalizedDirectionY = directionY / directionMag; // Calculate thrust force in the direction of the sun const thrustX = normalizedDirectionX * this.currentThrustForce; const thrustY = normalizedDirectionY * this.currentThrustForce; // Apply thrust force to the player's velocity this.body.velocity.x += thrustX; this.body.velocity.y += thrustY; // Ensure baseline tangential velocity is maintained const tangentialVelocityX = -normalizedDirectionY * this.baselineTangentialSpeed; const tangentialVelocityY = normalizedDirectionX * this.baselineTangentialSpeed; // Combine the tangential velocity with the new velocity after thrust this.body.velocity.x = (this.body.velocity.x + tangentialVelocityX) / 2; this.body.velocity.y = (this.body.velocity.y + tangentialVelocityY) / 2; // Log when the max thrust is reached if (this.currentThrustForce === this.thrustForce) { console.log(`Max thrust force reached: ${this.currentThrustForce}`); } } updateState() { if (this.isThrusting) { this.applyThrust(); } else { this.setBaselineVelocities(); } } // Method to initialize input event for logging velocity initializeInputEvent(scene) { scene.input.on('pointerdown', this.logDetails, this); } increaseScore(){ this.score += 1; } deactivate() { this.active = false; this.body.stop(); } reduceHealth(amount) { this.health -= amount; } checkHealth() { return this.health > 0; } pickUpFuel() { this.hasFuel = true; this.showFuelBackdrop(); console.log('Fuel picked up by player'); } deliverFuel() { this.hasFuel = false; this.hideFuelBackdrop(); this.startCooldown(); console.log('Fuel delivered to the sun'); } startThrust() { this.isThrusting = true; } stopThrust() { this.isThrusting = false; this.currentThrustForce = 0; // Reset the thrust force when stopping thrust } startCooldown() { this.collisionCooldown = true; this.collisionCooldownTick = this.scene.time.now + 2000; // prevent getting stuck in sun console.log('Collision cooldown started'); } updateCooldown() { if (this.collisionCooldown && this.scene.time.now > this.collisionCooldownTick) { this.collisionCooldown = false; console.log('Collision cooldown ended'); } } showFuelBackdrop() { this.fuelBackdrop.setVisible(true); } hideFuelBackdrop() { this.fuelBackdrop.setVisible(false); } darkenSprite() { this.setTint(0xd3d3d3); } resetSprite() { this.clearTint(); } preUpdate(time, delta) { super.preUpdate(time, delta); this.updateAngle(); this.fuelBackdrop.setPosition(this.x, this.y); // Ensure the fuel backdrop follows the player if (this.isThrusting) { this.resetSprite(); } else { this.darkenSprite(); } } calculateAngleToSun(sun) { // const dx = sun.x - this.x; // const dy = sun.y - this.y; const angle = Phaser.Math.Angle.Between(this.x, this.y, sun.x, sun.y); return angle; // Angle in radians from player to sun } updateAngle() { const angleToSun = this.calculateAngleToSun(this.scene.sun); const perpendicularAngle = angleToSun + Phaser.Math.DegToRad(-180); // Offset by -180 degrees to make it face perpendicular this.setRotation(perpendicularAngle); } // Method to get the radius and center for collision detection getRadius() { return (this.displayWidth) * this.scaleX; } getCenter() { return { x: this.x, y: this.y }; } } function interpolateColor(color1, color2, factor) { const result = color1.slice(); for (let i = 0; i < 3; i++) { result[i] = Math.round(result[i] + factor * (color2[i] - result[i])); } return result; } function rgbToHex(r, g, b) { rgb = (r << 16) + (g << 8) + b; console.log('rgb:',rgb) return rgb } class Sun extends Phaser.Physics.Arcade.Sprite { constructor(scene, x, y) { super(scene, x, y, 'sun'); scene.add.existing(this); scene.physics.add.existing(this); this.setImmovable(true); this.setDisplaySize(100, 100); this.gravitationalPull = 12000000; this.maxHealth = 5; this.health = this.maxHealth; this.updateColor(); } refuel(){ this.fuelAmount = 2; this.health += this.fuelAmount; if(this.health > this.maxHealth) this.health = this.maxHealth; this.updateColor(); console.log('Sun refueled.') } calculateGravitationalForce(player) { let dx = this.x - player.x; let dy = this.y - player.y; let distance = Math.sqrt(dx * dx + dy * dy); let force = this.gravitationalPull / (distance * distance); const MIN_FORCE = 160; const MAX_FORCE = 320; if (force < MIN_FORCE) { force = MIN_FORCE; } else if (force > MAX_FORCE) { force = MAX_FORCE; } let fx = force * (dx / distance); let fy = force * (dy / distance); return { fx, fy }; } reduceHealth(amount) { this.health -= amount; this.updateColor(); } checkHealth() { return this.health > 0; } getRadius() { return (this.displayWidth * 1.5) * this.scaleX; } getCenter() { return { x: this.x, y: this.y }; } updateColor() { const yellow = [255, 255, 0]; const lightGray = [100, 100, 100]; const healthFactor = this.health / this.maxHealth; const newColor = interpolateColor(yellow, lightGray, 1 - healthFactor); const [r, g, b] = newColor; this.setTint(rgbToHex(r, g, b)); } } class Asteroid extends Phaser.Physics.Arcade.Sprite { constructor(scene, x, y) { super(scene, x, y, 'asteroid'); scene.add.existing(this); scene.physics.add.existing(this); this.setDisplaySize(32, 32); // Set display size to 32x32 this.setVelocity(0, 0); } setDirection(targetX, targetY, speed) { let angle = Phaser.Math.Angle.Between(this.x, this.y, targetX, targetY); this.scene.physics.velocityFromRotation(angle, speed, this.body.velocity); } } class FuelManager { constructor(scene, maxFuelCount, spawnInterval) { this.scene = scene; this.maxFuelCount = maxFuelCount; this.spawnInterval = spawnInterval; // in milliseconds this.fuels = this.scene.physics.add.group(); this.spawnTimer = this.scene.time.addEvent({ delay: this.spawnInterval, callback: this.spawnFuel, callbackScope: this, loop: true, }); } spawnFuel() { if (this.fuels.countActive(true) >= this.maxFuelCount) { return; // Do not spawn if already at max count } let bounds = this.scene.physics.world.bounds; let sun = this.scene.sun; let player = this.scene.player; let spawnX, spawnY; // Find a valid spawn position do { spawnX = Phaser.Math.Between(100, bounds.width - 100); spawnY = Phaser.Math.Between(100, bounds.height - 100); } while (this.isNearSun(spawnX, spawnY, sun) || this.isNearPlayer(spawnX, spawnY, player) || this.isNearBorder(spawnX, spawnY, bounds)); let fuel = new Fuel(this.scene, spawnX, spawnY); this.fuels.add(fuel); this.addCollision(fuel); console.log('Fuel cell spawned'); } isNearSun(x, y, sun) { let distanceToSun = Phaser.Math.Distance.Between(x, y, sun.x, sun.y); return distanceToSun < 150; } isNearPlayer(x, y, player) { let distanceToPlayer = Phaser.Math.Distance.Between(x, y, player.x, player.y); return distanceToPlayer < 100; } isNearBorder(x, y, bounds) { return x < 100 || x > bounds.width - 100 || y < 100 || y > bounds.height - 100; } addCollision(fuel) { this.scene.physics.add.overlap(this.scene.player, fuel, (player, fuelCell) => { if (!fuelCell.picked) { fuelCell.pickUp(); player.pickUpFuel(); } }, null, this); } clear() { this.fuels.clear(true, true); if (this.spawnTimer) { this.spawnTimer.remove(); } } update() { this.fuels.children.each((fuel) => { if (!fuel.active) { this.fuels.remove(fuel, true, true); } }); } } class AsteroidManager { constructor(scene, spawnInterval, speed) { this.scene = scene; this.spawnInterval = spawnInterval; // in milliseconds this.speed = speed; // Asteroid speed towards the center this.asteroids = this.scene.physics.add.group(); this.spawnTimer = this.scene.time.addEvent({ delay: this.spawnInterval, callback: this.spawnAsteroid, callbackScope: this, loop: true, }); } spawnAsteroid() { let bounds = this.scene.physics.world.bounds; let x = Math.random() < 0.5 ? bounds.x - 10 : bounds.width + 10; let y = Phaser.Math.Between(0, bounds.height); if (Math.random() < 0.5) { [x, y] = [y, x]; // Randomly adjust to top/bottom or left/right edges } let asteroid = new Asteroid(this.scene, x, y); this.asteroids.add(asteroid); asteroid.setDirection(bounds.centerX, bounds.centerY, this.speed); this.addCollisions(asteroid); } addCollisions(asteroid) { this.scene.physics.add.overlap(asteroid, this.scene.player, (asteroid, player) => { if (!player.collisionCooldown) { asteroid.destroy(); player.reduceHealth(1); player.startCooldown(); } }, null, this); this.scene.physics.add.overlap(asteroid, this.scene.sun, (asteroid, sun) => { asteroid.destroy(); sun.reduceHealth(1); }, null, this); } clear() { this.asteroids.clear(true, true); if (this.spawnTimer) { this.spawnTimer.remove(); } } update() { this.asteroids.children.each((asteroid) => { if (!asteroid.active) { this.asteroids.remove(asteroid, true, true); } }); } } class UIManager { constructor(scene) { this.scene = scene; this.sunHealthText = null; this.playerHealthText = null; this.scoreText = null; this.tutorialText = null; this.closeButton = null; this.overlay = null; } updateTextElements(sunHealth, playerHealth, score) { if (this.sunHealthText) { this.sunHealthText.setText(`Sun Health: ${sunHealth}`); } if (this.playerHealthText) { this.playerHealthText.setText(`Player Health: ${playerHealth}`); } if (this.scoreText) { this.scoreText.setText(`Score: ${score}`); } } createTextElements() { const fontStyle = { font: '20px sans-serif', fill: '#ffffff', fontStyle: 'bold', }; // Position all UI elements in a vertical // Create and manage text position without wrapping this.sunHealthText = this.scene.add.text(20, 20, 'Sun: 5', fontStyle).setOrigin(0, 0); this.playerHealthText = this.scene.add.text(20, 60, 'Player: 3', fontStyle).setOrigin(0, 0); this.scoreText = this.scene.add.text(20, 100, 'Score: 0', fontStyle).setOrigin(0, 0); } hideTextElements() { // Hide the text elements by setting their visible property to false this.sunHealthText.visible = false; this.playerHealthText.visible = false; this.scoreText.visible = false; } createTutorialElements() { const fontStyle = { font: '18px sans-serif', fill: '#ffffff', wordWrap: { width: this.scene.sys.game.config.width - 40 }, align: 'left', }; this.tutorialText = this.scene.add.text(20, 20, '', fontStyle) .setOrigin(0, 0) .setVisible(true); const tutorialContent = ` Welcome, brave Starlighter. The galaxy depends on you to keep our sun shining bright! Game Rules: - Delivering fuel boosts the star's health. - Reach the glowing fuel; it's bright, so you can't miss it! - Take the fuel to the star to refuel it. - Watch out for asteroids; they harm both you and the star. - Gain points every time you fuel the star. Controls: - Hold the spacebar to thrust yourself through space. `; this.tutorialText.setText(tutorialContent) .setDepth(10) this.closeButton = this.scene.add.text(700, 20, 'Close', { font: '20px sans-serif', fill: '#ff0000' }) .setInteractive() .on('pointerdown', () => { this.hideTutorial() this.callResetGame() }) .setOrigin(0.5) .setDepth(10) this.overlay = this.scene.add.rectangle( this.scene.sys.game.config.width / 2, this.scene.sys.game.config.height / 2, this.scene.sys.game.config.width, this.scene.sys.game.config.height, 0x000000, 1 ) .setVisible(false).setDepth(5) this.hideTutorial() } showTutorial() { this.overlay.setVisible(true) this.tutorialText.setVisible(true) this.closeButton.setVisible(true) } hideTutorial() { this.tutorialText.setVisible(false); this.closeButton.setVisible(false); console.log('Play') // Hide overlay this.overlay.setVisible(false); } callResetGame(){ hasShownTutorial = true; this.scene.triggerGameOver() this.scene.retryGame(); } } // Global score management window.gameData = { currentScore: 0, highScore: 0 }; class GameOverUI { constructor(scene) { this.scene = scene; this.createGameOverScreen(); } createGameOverScreen() { // Black background this.background = this.scene.add.rectangle(400, 300, 800, 600, 0x000000); const fontStyle = { font: '20px sans-serif', fill: '#ffffff', fontStyle: 'bold', }; // Game Over text this.gameOverText = this.scene.add.text(400, 200, 'Game Over', fontStyle).setOrigin(0.5); // Score text this.scoreText = this.scene.add.text(400, 300, `Score: ${window.gameData.currentScore}`, fontStyle).setOrigin(0.5); // High Score text this.highScoreText = this.scene.add.text(400, 350, `High Score: ${window.gameData.highScore}`, fontStyle).setOrigin(0.5); // Retry button background this.retryButtonBackground = this.scene.add.rectangle(400, 400, 100, 40, 0xFFFFFF).setOrigin(0.5); // Retry button text this.retryButton = this.scene.add.text(400, 400, 'Retry', { font: '20px Arial Bold', fill: '#000000' }).setOrigin(0.5).setInteractive(); // Event listeners for button interactivity this.retryButton.on('pointerover', () => { this.retryButton.setFill('#FF0000'); // Red on hover }); this.retryButton.on('pointerout', () => { this.retryButton.setFill('#000000'); // Back to black on out }); this.retryButton.on('pointerdown', () => { this.retryButtonBackground.setFillStyle(0xCCCCCC); // Grey on click }); this.retryButton.on('pointerup', () => { this.retryButtonBackground.setFillStyle(0xFFFFFF); // Back to white on release this.scene.retryGame(); }); // Hide initially this.setVisible(false); } setVisible(visible) { this.background.setVisible(visible); this.gameOverText.setVisible(visible); this.scoreText.setVisible(visible); this.highScoreText.setVisible(visible); this.retryButtonBackground.setVisible(visible); this.retryButton.setVisible(visible); } updateScores() { this.scoreText.setText(`Score: ${window.gameData.currentScore}`); this.highScoreText.setText(`High Score: ${window.gameData.highScore}`); } } const tutorialContent = `Welcome, Brave Starlighter! Your Mission: - You're chosen to keep our star shining bright for as long as possible! Game Rules: - Fuel the Star: Delivering fuel boosts the star's health. - Collect Fuel: Reach the glowing fuel; it's bright, so you can't miss it! - Deliver Fuel: Take the fuel to the star to refuel it. - Avoid Danger: Watch out for asteroids; they harm both you and the star. - Score Points: Gain points every time you fuel the star. Controls: - Thrust: Hold the spacebar to fly through space. Remember, Starlighter, the universe depends on your skill and bravery. Shine on!`; let hasShownTutorial = false; class MainScene extends Phaser.Scene { constructor() { super('MainScene'); this.gameOverTriggered = false; this.gameFrozen = false; // Variable to manage game freeze state } preload() { this.load.image('sun', 'https://play.rosebud.ai/assets/yellow_circle.png?ZgZh'); this.load.image('player', 'https://play.rosebud.ai/assets/red_ship.png?zycz'); this.load.image('fuelBackdrop', 'https://play.rosebud.ai/assets/yellow_circle.png?ZgZh'); this.load.image('fuel', 'https://play.rosebud.ai/assets/yellow.png?gDEx'); this.load.image('asteroid', 'https://play.rosebud.ai/assets/asteroid retro game asset circle flat gray only rock face.png?J6DG'); // Preload background image this.load.image('background', 'https://play.rosebud.ai/assets/stars.jpg?up39'); } createBg(){ // Add background image and resize it to fit the screen this.background = this.add.image(0, 0, 'background').setOrigin(0, 0); this.background.setDisplaySize(this.sys.game.config.width, this.sys.game.config.height); this.background.setDepth(-1); } startGame(){ this.createBg() this.uiManager = new UIManager(this); this.sun = new Sun(this, this.physics.world.bounds.centerX, this.physics.world.bounds.centerY); this.player = new Player(this, 100, this.physics.world.bounds.centerY); this.player.setVelocity(0, 200); this.cursors = this.input.keyboard.addKeys({ space: Phaser.Input.Keyboard.KeyCodes.SPACE, shift: Phaser.Input.Keyboard.KeyCodes.SHIFT, }); this.fuelManager = new FuelManager(this, 2, 5000); this.asteroidManager = new AsteroidManager(this, 3000, 100); this.physics.add.overlap(this.player, this.sun, this.handleSunCollision, null, this); this.gameOverUI = new GameOverUI(this); } create() { this.startGame() this.uiManager.createTextElements(); // Initialize GameOverUI if (!hasShownTutorial){ this.uiManager.createTutorialElements(); this.uiManager.showTutorial() } } freezeGame() { // Clear all game objects and timers this.fuelManager.clear(); this.asteroidManager.clear(); this.player.destroy(); this.sun.destroy(); console.log('Game has been frozen.'); } update(time, delta) { // Freeze game if game over is triggered if (this.gameFrozen) { return; } // Game logic updates this.handlePlayerMovement(); this.fuelManager.update(); this.asteroidManager.update(); this.player.updateCooldown(); this.uiManager.updateTextElements(this.sun.health, this.player.health, this.player.score); // Standardized game over check at end of update loop this.checkGameOver(); } displayGameOverScreenForTesting() { this.triggerGameOver(); } handlePlayerMovement() { if (!this.player.active) return; if (Phaser.Input.Keyboard.JustDown(this.cursors.space)) { this.player.startThrust(); this.player.stopRadialAcceleration(); } if (Phaser.Input.Keyboard.JustUp(this.cursors.space)) { this.player.stopThrust(); this.player.startRadialAcceleration(); } this.player.updateState(); } handleSunCollision(player, sun) { const playerCenter = player.getCenter(); const sunCenter = sun.getCenter(); const distance = Phaser.Math.Distance.Between(playerCenter.x, playerCenter.y, sunCenter.x, sunCenter.y); const radiiSum = player.getRadius() + sun.getRadius(); if (distance < radiiSum) { if (player.hasFuel) { player.deliverFuel(); player.increaseScore(); sun.refuel(); } else if (!player.collisionCooldown) { player.deactivate(); player.reduceHealth(player.health) } } } checkGameOver() { if (this.gameOverTriggered) return; if (!this.player.checkHealth() || !this.sun.checkHealth()) { this.triggerGameOver(); } } triggerGameOver() { if (this.gameOverTriggered) return; this.gameOverTriggered = true; this.gameFrozen = true; this.uiManager.hideTextElements() console.log('Game Over'); this.freezeGame(); // Update global scores window.gameData.currentScore = this.player.score; // Assuming player has a score property if (window.gameData.currentScore > window.gameData.highScore) { window.gameData.highScore = window.gameData.currentScore; } // Display game over UI this.gameOverUI.updateScores(); this.gameOverUI.setVisible(true); } retryGame() { this.gameOverUI.setVisible(false); // Reset game state this.gameOverTriggered = false; this.gameFrozen = false; this.scene.restart(); } renderDebugGraphics() { this.debugGraphics.clear(); this.debugGraphics.lineStyle(2, 0x00ff00, 1); this.debugGraphics.strokeCircle(this.player.x, this.player.y, this.player.getRadius()); this.debugGraphics.lineStyle(2, 0xff0000, 1); this.debugGraphics.strokeCircle(this.sun.x, this.sun.y, this.sun.getRadius()); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }, scene: MainScene }; window.phaserGame = new Phaser.Game(config);