class Joystick { constructor(scene, x, y) { this.scene = scene; this.x = x; this.y = y; this.joystick = null; this.create(); } create() { this.joystick = this.scene.plugins.get('rexVirtualJoystick').add(this.scene, { x: this.x, y: this.y, radius: 50, base: this.scene.add.circle(0, 0, 50, 0x888888).setAlpha(0.75), thumb: this.scene.add.circle(0, 0, 25, 0xcccccc).setAlpha(0.75), }); this.joystick.base.setScrollFactor(0).setDepth(1000); this.joystick.thumb.setScrollFactor(0).setDepth(1001); // Set joystick visibility to false initially this.joystick.base.setVisible(false); this.joystick.thumb.setVisible(false); // Show joystick when pointer is down and set its position this.scene.input.on('pointerdown', (pointer) => { this.joystick.base.setPosition(pointer.x, pointer.y); this.joystick.thumb.setPosition(pointer.x, pointer.y); this.joystick.base.setVisible(true); this.joystick.thumb.setVisible(true); }); // Hide joystick when pointer is up this.scene.input.on('pointerup', () => { this.joystick.base.setVisible(false); this.joystick.thumb.setVisible(false); }); } getVelocity() { const maxSpeed = 160; const joyForce = Math.min(this.joystick.force, this.joystick.radius); const joyAngle = this.joystick.angle; const velocityX = (joyForce / this.joystick.radius) * maxSpeed * Math.cos(joyAngle * Math.PI / 180); const velocityY = (joyForce / this.joystick.radius) * maxSpeed * Math.sin(joyAngle * Math.PI / 180); return { x: velocityX, y: velocityY }; } } class MusicCircle { constructor(scene, x, y, radius, color) { this.scene = scene; this.baseRadius = radius; this.hue = 0; this.circle = scene.add.circle(x, y, radius, color); scene.physics.add.existing(this.circle); this.circle.body.setCollideWorldBounds(true); this.circle.body.setBounce(1, 1); this.sizeIncreases = []; // New property to track size increases } update(bassFrequency, midFrequency) { this.hue = (this.hue + bassFrequency / 80) % 360; const rgb = Phaser.Display.Color.HSVToRGB(this.hue / 360, 1, 1); const normalizedBass = bassFrequency / 255; const radiusChange = this.baseRadius * normalizedBass * 1.5; const newRadius = this.baseRadius + radiusChange + this.getTotalSizeIncrease(); this.circle.setRadius(Phaser.Math.Linear(this.circle.radius, newRadius, 0.3)); this.circle.setFillStyle(Phaser.Display.Color.GetColor(rgb.r, rgb.g, rgb.b)); } setPosition(x, y) { this.circle.setPosition(x, y); } increaseSize() { const increase = this.baseRadius * 0.5; // 50% increase this.sizeIncreases.push({ amount: increase, timer: 5000 }); // 5 seconds duration } getTotalSizeIncrease() { return this.sizeIncreases.reduce((total, increase) => total + increase.amount, 0); } updateSizeIncreases(delta) { for (let i = this.sizeIncreases.length - 1; i >= 0; i--) { this.sizeIncreases[i].timer -= delta; if (this.sizeIncreases[i].timer <= 0) { this.sizeIncreases.splice(i, 1); } } } } class MusicRectangle { constructor(scene, x, y, width, height) { this.scene = scene; this.baseWidth = width; this.baseHeight = height; this.hue = 0; this.rectangle = scene.add.rectangle(x, y, width, height, 0x00ff00); this.rectangle.setOrigin(0, 0.5); } update(bassFrequency, midFrequency) { this.hue = (this.hue + bassFrequency / 80) % 360; const rgb = Phaser.Display.Color.HSVToRGB(this.hue / 360, 1, 1); const normalizedBass = bassFrequency / 255; const widthChange = this.baseWidth * normalizedBass * 0.2; const heightChange = this.baseHeight * normalizedBass * 0.2; const newWidth = this.baseWidth + widthChange; const newHeight = this.baseHeight + heightChange; this.rectangle.setSize(Phaser.Math.Linear(this.rectangle.width, newWidth, 0.3), Phaser.Math.Linear(this.rectangle.height, newHeight, 0.3)); this.rectangle.setFillStyle(Phaser.Display.Color.GetColor(rgb.r, rgb.g, rgb.b)); } } class StartScene extends Phaser.Scene { constructor() { super('StartScene'); this.useJoystick = false; } preload() { this.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true); } create() { const instructionsText = this.add.text(400, 150, 'HOW TO PLAY:\n\n' + '1. Control the character with arrow keys or joystick\n' + '2. Stay inside the moving pulsing circle to score points\n' + '3. Avoid black rectangles (they stun you)\n' + '4. Dodge brown rectangles (they push you)\n' + '5. Keep the green bar high for point multipliers!\n' + '6. At 4x multiplier, watch the bar transform!\n' + '7. Game ends after 45 seconds\n' + '8. Collect stars for special effects!', { fontSize: '24px', fill: '#ffffff', align: 'center' } ); instructionsText.setOrigin(0.5); const startText = this.add.text(400, 350, 'START', { fontSize: '64px', fill: '#ffffff', fontStyle: 'bold' }); startText.setOrigin(0.5); startText.setInteractive({ useHandCursor: true }); startText.on('pointerdown', () => { this.scene.start('Example', { useJoystick: this.useJoystick }); }); const checkboxBg = this.add.rectangle(200, 450, 30, 30, 0xffffff); checkboxBg.setOrigin(0.5); checkboxBg.setStrokeStyle(2, 0x000000); const checkbox = this.add.rectangle(200, 450, 20, 20, 0x000000); checkbox.setOrigin(0.5); checkbox.setVisible(false); const checkboxText = this.add.text(220, 450, 'Use on-screen joystick', { fontSize: '24px', fill: '#ffffff' }); checkboxText.setOrigin(0, 0.5); checkboxBg.setInteractive({ useHandCursor: true }); checkboxBg.on('pointerdown', () => { this.useJoystick = !this.useJoystick; checkbox.setVisible(this.useJoystick); }); // Add leaderboard button const leaderboardButton = this.add.text(400, 500, 'View Leaderboard', { fontSize: '32px', fill: '#ffffff', fontStyle: 'bold' }); leaderboardButton.setOrigin(0.5); leaderboardButton.setInteractive({ useHandCursor: true }); leaderboardButton.on('pointerdown', () => { this.scene.start('LeaderboardScene'); }); } } class MovingRectangle extends Phaser.GameObjects.Rectangle { constructor(scene, x, y, width, height) { super(scene, x, y, width, height, 0x000000); scene.add.existing(this); scene.physics.add.existing(this); } update() { if (this.x < -this.width || this.x > this.scene.sys.game.config.width + this.width || this.y < -this.height || this.y > this.scene.sys.game.config.height + this.height) { this.destroy(); } } } class BrownRectangle extends Phaser.GameObjects.Rectangle { constructor(scene, x, y, width, height) { super(scene, x, y, width, height, 0x8B4513); // Brown color scene.add.existing(this); scene.physics.add.existing(this); this.setOrigin(0.5); } update() { if (this.x < -this.width || this.x > this.scene.sys.game.config.width + this.width || this.y < -this.height || this.y > this.scene.sys.game.config.height + this.height) { this.destroy(); } } } class STARS extends Phaser.GameObjects.Star { constructor(scene, x, y, points, innerRadius, outerRadius, color) { super(scene, x, y, points, innerRadius, outerRadius, color); scene.add.existing(this); scene.physics.add.existing(this); this.body.setImmovable(true); } } class Example extends Phaser.Scene { constructor() { super('Example'); this.player = null; this.cursors = null; this.circle = null; this.score = 0; this.playerScore = 0; this.scoreText = null; this.multiplierText = null; this.scoreDecreaseTimer = 0; this.whiteRect = null; this.blackRect = null; this.greenRect = null; this.musicRectangle = null; this.movingRectangles = []; this.brownRectangles = []; this.rectangleSpawnTimer = 0; this.brownRectangleSpawnTimer = 0; this.playerStunned = false; this.playerStunTimer = 0; this.gameWon = false; this.music = null; this.gameStarted = false; this.useJoystick = false; this.joystick = null; this.confettiRectangles = []; this.gameTimer = null; this.timerText = null; this.stars = []; this.starSpawnTimer = 0; this.slowdownActive = false; this.slowdownTimer = 0; this.invincibleTimer = 0; this.maxScore = 1000; // New property to cap the score this.starSpawnEvent = null; // New property to hold the star spawn event } init(data) { this.useJoystick = data.useJoystick; // Reset game variables this.score = 0; this.playerScore = 0; this.gameWon = false; this.gameStarted = false; this.movingRectangles = []; this.brownRectangles = []; this.rectangleSpawnTimer = 0; this.brownRectangleSpawnTimer = 0; this.playerStunned = false; this.playerStunTimer = 0; this.stars = []; this.starSpawnTimer = 0; this.slowdownActive = false; this.slowdownTimer = 0; this.invincibleTimer = 0; // Reset music speed to normal if (this.music) { this.music.setRate(1); } } preload() { this.load.image('sky', `https://play.rosebud.ai/assets/DALL·E 2024-06-27 14.57.57 - A scene from a 2D platformer game inspired by 'The Giver' by Lois Lowry. The setting is The Giver's dwelling. Jonas, a young boy, is lying on a couch .webp?iRcJ`); this.load.image('logo', `https://play.rosebud.ai/assets/logo.png?WtXI`); this.load.image('red', `https://play.rosebud.ai/assets/red.png?RfMt`); this.load.image('chibi', `https://play.rosebud.ai/assets/chibi character, dark hair, ball cap, short sleeves, band t-shirt, blue pants. small body proportion, big head. cute..png?XQzf`); this.load.audio('backgroundMusic', 'https://play.rosebud.ai/assets/Pixel Blood Rage (1).mp3?BvsM'); } create() { this.add.image(400, 300, 'sky'); // Check if music is already playing if (!this.sound.get('backgroundMusic')) { this.music = this.sound.add('backgroundMusic', { loop: true }); this.music.setVolume(0.35); this.music.play(); } else { this.music = this.sound.get('backgroundMusic'); } // Ensure music is at normal speed this.music.setRate(1); this.analyser = this.sound.context.createAnalyser(); this.analyser.fftSize = 2048; this.music.source.connect(this.analyser); this.circle = new MusicCircle(this, 200, 200, 25, 0x0000ff); this.player = this.physics.add.sprite(400, 300, 'chibi'); this.player.setScale(0.15); this.player.body.setSize(this.player.width, this.player.height); this.player.setCollideWorldBounds(true); this.player.setDepth(1); this.cursors = this.input.keyboard.createCursorKeys(); if (this.useJoystick) { this.joystick = new Joystick(this, 200, 450); } this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#fff' }); this.multiplierText = this.add.text(16, 56, 'Multiplier: 1x', { fontSize: '24px', fill: '#fff' }); // Add timer text this.timerText = this.add.text(625, 16, 'Time: 45', { fontSize: '32px', fill: '#fff' }); this.physics.add.overlap(this.player, this.circle.circle, this.handleOverlap, null, this); this.whiteRect = this.add.rectangle(400, 50, 300, 30, 0xffffff); this.blackRect = this.add.rectangle(400, 50, 296, 26, 0x000000); this.greenRect = this.add.rectangle(252, 50, 0, 22, 0x00ff00); this.greenRect.setOrigin(0, 0.5); this.musicRectangle = new MusicRectangle(this, 252, 50, 0, 22); this.musicRectangle.rectangle.setVisible(false); this.player.body.moves = false; this.circle.circle.body.moves = true; this.startCountdown(); // Set up the game timer for 45 seconds this.gameTimer = this.time.delayedCall(45000, this.endGame, [], this); // Set up star spawn timer this.starSpawnEvent = this.time.addEvent({ delay: 5000, callback: this.spawnStar, callbackScope: this, loop: true }); } startCountdown() { const countdownTexts = ['Ready', 'On Your Marks', 'Get Set', '3', '2', '1', 'GO!']; let index = 0; const showNextText = () => { if (index < countdownTexts.length) { const text = this.add.text(400, 300, countdownTexts[index], { fontSize: '128px', fill: '#fff', fontStyle: 'bold', stroke: '#000', strokeThickness: 8 }); text.setOrigin(0.5); text.setDepth(100); const duration = index < 3 ? 1650 : 375; this.tweens.add({ targets: text, scale: { from: 2, to: 0.5 }, duration: duration, ease: 'Power2', onComplete: () => { text.destroy(); index++; showNextText(); } }); } else { this.startGame(); } }; showNextText(); } startGame() { this.gameStarted = true; this.player.body.moves = true; this.circle.circle.body.moves = true; } update(time, delta) { if (this.analyser) { const array = new Uint8Array(this.analyser.frequencyBinCount); this.analyser.getByteFrequencyData(array); const bassFrequency = array[0]; const midFrequency = array[Math.floor(array.length / 4)]; this.circle.update(bassFrequency, midFrequency); if (this.musicRectangle.rectangle.visible) { this.musicRectangle.update(bassFrequency, midFrequency); } } if (!this.gameStarted) return; if (this.gameWon) return; // Update timer text const remainingTime = Math.ceil((45000 - this.gameTimer.getElapsed()) / 1000); this.timerText.setText('Time: ' + remainingTime); if (!this.playerStunned) { let velocityX = 0; let velocityY = 0; if (this.useJoystick) { const velocity = this.joystick.getVelocity(); velocityX = velocity.x; velocityY = velocity.y; } else { if (this.cursors.left.isDown) { velocityX = -160; } else if (this.cursors.right.isDown) { velocityX = 160; } if (this.cursors.up.isDown) { velocityY = -160; } else if (this.cursors.down.isDown) { velocityY = 160; } } this.player.setVelocity(velocityX, velocityY); } else { this.playerStunTimer += delta; if (this.playerStunTimer >= 500) { this.playerStunned = false; this.playerStunTimer = 0; this.player.setTint(0xffffff); } } const pushSpeed = this.slowdownActive ? 62.5 : 125; // Half speed when slowdown is active const edgeThreshold = 200; const dx = this.circle.circle.x - this.player.x; const dy = this.circle.circle.y - this.player.y; const distance = Math.sqrt(dx * dx + dy * dy); let vx = 0; let vy = 0; if (distance < this.player.width / 4 + this.circle.circle.radius) { const angle = Math.atan2(dy, dx); vx = Math.cos(angle) * pushSpeed; vy = Math.sin(angle) * pushSpeed; } const leftEdgeDistance = this.circle.circle.x; const rightEdgeDistance = this.sys.game.config.width - this.circle.circle.x; const topEdgeDistance = this.circle.circle.y; const bottomEdgeDistance = this.sys.game.config.height - this.circle.circle.y; const applyEdgeForce = (distance, threshold, direction) => { if (distance < threshold) { const force = Math.exp((threshold - distance) / threshold) - 1; return force * pushSpeed * direction; } return 0; }; vx += applyEdgeForce(leftEdgeDistance, edgeThreshold, 1); vx += applyEdgeForce(rightEdgeDistance, edgeThreshold, -1); vy += applyEdgeForce(topEdgeDistance, edgeThreshold, 1); vy += applyEdgeForce(bottomEdgeDistance, edgeThreshold, -1); this.circle.circle.body.setVelocity(vx, vy); const circleGeom = new Phaser.Geom.Circle(this.circle.circle.x, this.circle.circle.y, this.circle.circle.radius); // Calculate multiplier based on green bar width let multiplier = 1; const greenBarPercentage = this.greenRect.width / 292; if (greenBarPercentage > 0.75) { multiplier = 4; } else if (greenBarPercentage > 0.5) { multiplier = 2; } if (Phaser.Geom.Circle.Contains(circleGeom, this.player.x, this.player.y)) { this.score = Math.min(this.score + 1, this.maxScore); this.scoreDecreaseTimer = 0; // Apply multiplier to score increase this.playerScore += multiplier; } else { this.scoreDecreaseTimer += delta; if (this.scoreDecreaseTimer >= 10) { this.score = Math.max(0, this.score - 1); this.scoreDecreaseTimer = 0; } } this.scoreText.setText('Score: ' + this.playerScore); this.multiplierText.setText('Multiplier: ' + multiplier + 'x'); const greenWidth = Math.min((this.score / this.maxScore) * 292, 292); this.greenRect.width = greenWidth; // Update music rectangle visibility if (multiplier === 4) { this.greenRect.setVisible(false); this.musicRectangle.rectangle.setVisible(true); this.musicRectangle.rectangle.width = this.greenRect.width; } else { this.greenRect.setVisible(true); this.musicRectangle.rectangle.setVisible(false); } this.rectangleSpawnTimer += delta; if (this.rectangleSpawnTimer >= (this.slowdownActive ? 4000 : 2000)) { this.spawnMovingRectangle(); this.rectangleSpawnTimer = 0; } this.brownRectangleSpawnTimer += delta; if (this.brownRectangleSpawnTimer >= (this.slowdownActive ? 6000 : 3000)) { this.spawnBrownRectangle(); this.brownRectangleSpawnTimer = 0; } for (let i = this.movingRectangles.length - 1; i >= 0; i--) { const rectangle = this.movingRectangles[i]; rectangle.update(); if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), rectangle.getBounds())) { this.handleRectangleCollision(rectangle); } if (!rectangle.active) { this.movingRectangles.splice(i, 1); } } for (let i = this.brownRectangles.length - 1; i >= 0; i--) { const rectangle = this.brownRectangles[i]; rectangle.update(); if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), rectangle.getBounds())) { this.handleBrownRectangleCollision(rectangle); } if (!rectangle.active) { this.brownRectangles.splice(i, 1); } } // Update star effects if (this.slowdownActive) { this.slowdownTimer += delta; if (this.slowdownTimer >= 5000) { this.slowdownActive = false; this.slowdownTimer = 0; this.music.setRate(1); } } if (this.invincibleTimer > 0) { this.invincibleTimer -= delta; if (this.invincibleTimer <= 0) { this.player.setTint(0xffffff); } } // Update stars for (let i = this.stars.length - 1; i >= 0; i--) { const star = this.stars[i]; if (this.physics.overlap(this.player, star)) { this.collectStar(star); this.stars.splice(i, 1); } } // Update circle size increases this.circle.updateSizeIncreases(delta); } handleOverlap(player, circle) { // This function is called when the player overlaps with the circle // We don't need to do anything here as we're handling scoring in the update function } spawnMovingRectangle() { const side = Phaser.Math.Between(0, 3); let x, y, width, height, velocityX, velocityY; const speed = this.slowdownActive ? 50 : 100; switch (side) { case 0: x = Phaser.Math.Between(0, this.sys.game.config.width); y = -20; width = 10; height = 20; velocityX = 0; velocityY = speed; break; case 1: x = this.sys.game.config.width + 20; y = Phaser.Math.Between(0, this.sys.game.config.height); width = 20; height = 10; velocityX = -speed; velocityY = 0; break; case 2: x = Phaser.Math.Between(0, this.sys.game.config.width); y = this.sys.game.config.height + 20; width = 10; height = 20; velocityX = 0; velocityY = -speed; break; case 3: x = -20; y = Phaser.Math.Between(0, this.sys.game.config.height); width = 20; height = 10; velocityX = speed; velocityY = 0; break; } const rectangle = new MovingRectangle(this, x, y, width, height); rectangle.body.setVelocity(velocityX, velocityY); this.movingRectangles.push(rectangle); } spawnBrownRectangle() { const side = Phaser.Math.Between(0, 3); let x, y, velocityX, velocityY, width, height; const speed = this.slowdownActive ? 75 : 150; switch (side) { case 0: width = 120; height = 40; x = Phaser.Math.Between(0, this.sys.game.config.width); y = -height / 2; velocityX = 0; velocityY = speed; break; case 1: width = 40; height = 120; x = this.sys.game.config.width + width / 2; y = Phaser.Math.Between(0, this.sys.game.config.height); velocityX = -speed; velocityY = 0; break; case 2: width = 120; height = 40; x = Phaser.Math.Between(0, this.sys.game.config.width); y = this.sys.game.config.height + height / 2; velocityX = 0; velocityY = -speed; break; case 3: width = 40; height = 120; x = -width / 2; y = Phaser.Math.Between(0, this.sys.game.config.height); velocityX = speed; velocityY = 0; break; } const rectangle = new BrownRectangle(this, x, y, width, height); rectangle.body.setVelocity(velocityX, velocityY); this.brownRectangles.push(rectangle); } handleRectangleCollision(rectangle) { rectangle.destroy(); if (this.invincibleTimer <= 0) { this.playerStunned = true; this.playerStunTimer = 0; this.player.setVelocity(0, 0); this.player.setTint(0xff0000); } } handleBrownRectangleCollision(rectangle) { if (this.invincibleTimer <= 0) { const pushForce = 200; const dx = this.player.x - rectangle.x; const dy = this.player.y - rectangle.y; const angle = Math.atan2(dy, dx); const pushX = Math.cos(angle) * pushForce; const pushY = Math.sin(angle) * pushForce; this.player.body.setVelocity(pushX, pushY); } } spawnStar() { const x = Phaser.Math.Between(50, 750); const y = Phaser.Math.Between(50, 550); const starType = Phaser.Math.Between(0, 2); let color; switch (starType) { case 0: color = 0x0000ff; // Blue break; case 1: color = 0xffff00; // Yellow break; case 2: color = 0xff0000; // Red break; } const star = new STARS(this, x, y, 5, 10, 20, color); this.stars.push(star); } collectStar(star) { star.destroy(); switch (star.fillColor) { case 0x0000ff: // Blue star this.activateSlowdown(); break; case 0xffff00: // Yellow star this.activateInvincibility(); break; case 0xff0000: // Red star this.increaseMusicCircleSize(); break; } } activateSlowdown() { this.slowdownActive = true; this.slowdownTimer = 0; this.music.setRate(0.5); } activateInvincibility() { this.invincibleTimer = 10000; // 10 seconds this.player.setTint(0xffff00); } increaseMusicCircleSize() { this.circle.increaseSize(); } endGame() { this.gameWon = true; this.player.body.moves = false; // Remove all rectangles this.movingRectangles.forEach(rect => rect.destroy()); this.brownRectangles.forEach(rect => rect.destroy()); this.movingRectangles = []; this.brownRectangles = []; // Stop star spawning if (this.starSpawnEvent) { this.starSpawnEvent.remove(); } // Create the final score text const finalScoreText = this.add.text(400, 300, 'Your Score:\n' + this.playerScore + '\nAwesome Job!', { fontSize: '64px', fill: '#ffffff', align: 'center', fontStyle: 'bold', stroke: '#000000', strokeThickness: 6 } ); finalScoreText.setOrigin(0.5); // Tween the player to the left side of the message this.tweens.add({ targets: this.player, x: 200, y: 300, duration: 1000, ease: 'Power2' }); // Keep the circle moving this.circle.circle.body.moves = true; // Don't stop the music // The music and circle will continue to animate in the background // Save the score to local storage this.saveScore(this.playerScore); // Add a button to view the leaderboard const leaderboardButton = this.add.text(400, 450, 'View Leaderboard', { fontSize: '32px', fill: '#ffffff', fontStyle: 'bold' }); leaderboardButton.setOrigin(0.5); leaderboardButton.setInteractive({ useHandCursor: true }); leaderboardButton.on('pointerdown', () => { this.scene.start('LeaderboardScene'); }); // Add a button to play again const playAgainButton = this.add.text(400, 500, 'Play Again', { fontSize: '32px', fill: '#ffffff', fontStyle: 'bold' }); playAgainButton.setOrigin(0.5); playAgainButton.setInteractive({ useHandCursor: true }); playAgainButton.on('pointerdown', () => { this.scene.restart(); }); // Reset the green rectangle to 0 width this.greenRect.width = 0; this.greenRect.setVisible(true); // Celebratory effect with the multiplier bar this.tweens.add({ targets: this.greenRect, width: 292, duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); // Rainbow effect for the multiplier bar this.time.addEvent({ delay: 400, callback: () => { const hue = (this.greenRect.fillColor + 5) % 360; const rgb = Phaser.Display.Color.HSVToRGB(hue / 360, 1, 1); this.greenRect.setFillStyle(Phaser.Display.Color.GetColor(rgb.r, rgb.g, rgb.b)); }, callbackScope: this, loop: true }); // Reset music speed to normal this.music.setRate(1); } saveScore(score) { let highScores = JSON.parse(localStorage.getItem('highScores')) || []; highScores.push(score); highScores.sort((a, b) => b - a); highScores = highScores.slice(0, 10); // Keep only top 10 scores localStorage.setItem('highScores', JSON.stringify(highScores)); } } class LeaderboardScene extends Phaser.Scene { constructor() { super('LeaderboardScene'); } create() { this.add.text(400, 50, 'Leaderboard', { fontSize: '64px', fill: '#ffffff', fontStyle: 'bold' }).setOrigin(0.5); const highScores = JSON.parse(localStorage.getItem('highScores')) || []; highScores.forEach((score, index) => { this.add.text(400, 150 + index * 50, `${index + 1}. ${score}`, { fontSize: '32px', fill: '#ffffff' }).setOrigin(0.5); }); const backButton = this.add.text(400, 550, 'Back to Main Menu', { fontSize: '32px', fill: '#ffffff', fontStyle: 'bold' }); backButton.setOrigin(0.5); backButton.setInteractive({ useHandCursor: true }); backButton.on('pointerdown', () => { this.scene.start('StartScene'); }); } } function loadScript(url) { return new Promise((resolve, reject) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('Script loading failed for ' + url)); document.head.appendChild(script); }); } const container = document.getElementById('renderDiv'); async function initializeGame() { try { await loadScript('https://cdn.jsdelivr.net/npm/phaser3-rex-plugins@1.1.79/dist/rexvirtualjoystickplugin.min.js'); console.log('Script loaded successfully'); 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 }, //debug: true } }, scene: [StartScene, Example, LeaderboardScene], plugins: { global: [{ key: 'rexVirtualJoystick', plugin: rexvirtualjoystickplugin, start: true }] } }; window.phaserGame = new Phaser.Game(config); } catch (error) { console.error('Failed to load external script or initialize the Phaser game:', error); } } initializeGame();

Other games like this

About The Giver Minigame