const rainbowColors = [ 0xFF0000, // Red 0xFF1100, 0xFF3300, 0xFF4400, 0xFF6600, // Orange 0xFF7700, 0xFF8800, 0xFF9900, 0xFFAA00, 0xFFCC00, // Yellow 0xFFDD00, 0xFFEE00, 0xFFFF00, 0xCCFF00, 0x99FF00, // Yellow-Green 0x66FF00, 0x33FF00, 0x00FF00, // Green 0x00FF33, 0x00FF66, 0x00FF99, // Aqua 0x00FFCC, 0x00FFFF, // Cyan 0x00CCFF, 0x0099FF, 0x0066FF, // Blue 0x0033FF, 0x0000FF, // Deep Blue 0x3300FF, // Indigo 0x6600FF, 0x9900FF, // Violet 0xCC00FF // Purple ]; // Utility function to darken a color function darkenColor(color) { const r = ((color >> 16) & 0xFF) * 0.5; const g = ((color >> 8) & 0xFF) * 0.5; const b = (color & 0xFF) * 0.5; return (Math.floor(r) << 16) | (Math.floor(g) << 8) | Math.floor(b); } class Example extends Phaser.Scene { preload() { this.load.image('logo', 'https://play.rosebud.ai/assets/logo.png?bHcg'); this.load.audio('bgMusic', 'https://play.rosebud.ai/assets/bg_music.mp3?6sbg'); this.load.audio('powerupSound', 'https://play.rosebud.ai/assets/powerup_sound.wav?tUwS'); this.load.audio('jumpSound', 'https://play.rosebud.ai/assets/jump_sound.wav?bLCz'); this.load.audio('gameoverSound', 'https://play.rosebud.ai/assets/gameover_sound.wav?2Cwp'); this.load.image('title3', 'https://play.rosebud.ai/assets/title3.png?X8E8'); } constructor() { super(); this.isMuted = false; // Track mute state this.score = 0; // Initialize score this.bestScore = parseInt(localStorage.getItem('bestScore')) || 0; // Get best score from localStorage this.angle = 0; // Track the dot's position this.gameOver = false; // Track game over state this.radiuses = [200, 160, 120, 80, 40]; // All circle radiuses this.currentRadiusIndex = 0; // Track current orbit this.isAnimating = false; // Track if animation is in progress this.originalRadiuses = [200, 160, 120, 80, 40]; // Keep original values this.rings = []; // Array to store ring sprites this.growingCircle = null; // Store reference to the growing circle this.colorIndex = Phaser.Math.Between(0, rainbowColors.length - 1); // Random starting color this.orbitingDots = []; // Array to store orbiting dots data this.ringsSpawned = 0; } create() { // Start background music this.bgMusic = this.sound.add('bgMusic', { loop: true, volume: 0.5 }); this.bgMusic.play(); // Add game title at the top this.title3 = this.add.image(100, 525, 'title3'); this.title3.smoothed = true; this.title3.setScale(0.2); this.title3.setDepth(1); this.title3.setAlpha(0.8); // Create mute button const muteButton = this.add.text(750, 30, '🔊', { fontSize: '32px', fontFamily: 'Arial', color: '#ffffff', padding: { x: 10, y: 5 } }); muteButton.setOrigin(0.5); muteButton.setDepth(2); muteButton.setInteractive({ useHandCursor: true }); // Add hover effects muteButton.on('pointerover', () => { muteButton.setScale(1.1); }); muteButton.on('pointerout', () => { muteButton.setScale(1.0); }); // Add click handler muteButton.on('pointerdown', (pointer, event) => { this.isMuted = !this.isMuted; if (this.isMuted) { muteButton.setText('🔈'); this.sound.mute = true; } else { muteButton.setText('🔊'); this.sound.mute = false; } pointer.event.stopPropagation(); }); // Add logo in the lower right corner this.logo = this.add.image(725, 525, 'logo'); this.logo.setScale(0.25); // Scale down the 512x512 logo this.logo.setDepth(1); // Ensure it's visible above other elements this.logo.smoothed = true; // Enable image smoothing //this.logo.setBlendMode(Phaser.BlendModes.SCREEN); // Use screen blend mode for smoother appearance // Set initial background color (3 steps ahead of first ring color, but darker) const bgColorIndex = (this.colorIndex + 3) % rainbowColors.length; this.cameras.main.setBackgroundColor(darkenColor(rainbowColors[bgColorIndex])); // Create a texture for the white dot // Create textures for white and red dots const dotTexture = this.add.graphics(); dotTexture.fillStyle(0xffffff); dotTexture.fillCircle(7.5, 7.5, 7.5); dotTexture.generateTexture('dot', 15, 15); dotTexture.clear(); // Create glow effect (yellow circle underneath) dotTexture.fillStyle(0xffff00, 0.5); // Semi-transparent yellow for glow dotTexture.fillCircle(7.5, 7.5, 7.5); // Slightly larger for glow // Draw red fill on top dotTexture.fillStyle(0xff0000); dotTexture.fillCircle(7.5, 7.5, 5.5); // Slightly smaller red circle dotTexture.generateTexture('redDot', 15, 15); dotTexture.destroy(); // Create ring textures with different colors // Generate textures for each ring for (let i = 0; i < 5; i++) { this.colorIndex = (this.colorIndex + 1) % rainbowColors.length; const color = rainbowColors[this.colorIndex]; const ringGraphics = this.add.graphics(); // Draw transparent rectangle background ringGraphics.fillStyle(0x000000, 0); ringGraphics.fillRect(0, 0, 640, 640); // Draw the ring ringGraphics.lineStyle(15, rainbowColors[this.colorIndex]); ringGraphics.strokeCircle(320, 320, 300); ringGraphics.generateTexture('ring' + i, 640, 640); ringGraphics.destroy(); const ring = this.add.sprite(400, 300, 'ring' + i); ring.setScale(this.radiuses[i] / 300); ring.setAlpha(0.5); this.rings.push(ring); // Add orbiting dots only for rings 3 and 4 (indices start at 0) if (i >= 3) { const numDots = Phaser.Math.Between(1, 8); const speed = Phaser.Math.FloatBetween(0.005, 0.015); for (let j = 0; j < numDots; j++) { const dot = this.add.sprite(400, 300, 'redDot'); const startAngle = (Math.PI * 2 / numDots) * j; dot.setScale(this.radiuses[i] / 300); // Initial scale matching the ring this.orbitingDots.push({ sprite: dot, ringIndex: i, angle: startAngle, speed: speed }); dot.setDepth(0.5); // Above rings but below white dot } } } // Create the growing circle sprite (starting very small) const growCircle = this.add.graphics(); growCircle.lineStyle(15, 0xffffff); growCircle.strokeCircle(320, 320, 300); growCircle.generateTexture('growCircle', 640, 640); growCircle.destroy(); // Create and add growing circle to rings array var growingRing = this.add.sprite(400, 300, 'growCircle'); growingRing.setScale(0.01); // Start very small growingRing.setAlpha(0.5); // Start invisible this.rings.push(growingRing); //this.growingCircle = growingRing; // Keep reference for easy access // Add click handler to the entire scene this.input.on('pointerdown', (pointer) => { // Check if pointer is near mute button (within 40 pixels) const distanceToMuteButton = Phaser.Math.Distance.Between( pointer.x, pointer.y, 750, 30 // mute button coordinates ); if (distanceToMuteButton < 40) { return; // Do nothing if near mute button } // Remove logo and instruction text on first click if (this.logo) { this.logo.destroy(); this.logo = null; } if (this.instructionText) { this.instructionText.destroy(); this.instructionText = null; } if (this.title3) { this.title3.destroy(); this.title3 = null; } if (!this.isAnimating && !this.gameOver) { this.ringsSpawned++; this.isAnimating = true; // Play jump sound this.sound.play('jumpSound', { volume: 1 //0.3 }); this.score++; // Increment score if (this.score > this.bestScore) { this.bestScore = this.score; localStorage.setItem('bestScore', this.bestScore.toString()); } this.scoreText.setText('Score: ' + this.score); // Update score display // Create a new growing ring with next rainbow color this.colorIndex = (this.colorIndex + 1) % rainbowColors.length; const ringColor = (this.ringsSpawned % 17 === 0) ? 0xFFFFFF : rainbowColors[this.colorIndex]; const growCircle = this.add.graphics(); //growCircle.lineStyle(15, rainbowColors[this.colorIndex]); growCircle.lineStyle(15, ringColor); growCircle.strokeCircle(320, 320, 300); growCircle.generateTexture('growCircle' + this.colorIndex, 640, 640); growCircle.destroy(); const growingRing = this.add.sprite(400, 300, 'growCircle' + this.colorIndex); growingRing.setScale(0.01); // Start very small growingRing.setAlpha(0.5); growingRing.isWhite = (this.ringsSpawned % 17 === 0) ? true : false; this.rings.push(growingRing); // Add orbiting dots for the new ring only if it's not a white ring if (this.ringsSpawned % 17 !== 0) { const numDots = Phaser.Math.Between(1, 8); const speed = Phaser.Math.FloatBetween(0.005, 0.015); for (let j = 0; j < numDots; j++) { const dot = this.add.sprite(400, 300, 'redDot'); const startAngle = (Math.PI * 2 / numDots) * j; dot.setScale(0.01); // Start very small like the new ring this.orbitingDots.push({ sprite: dot, ringIndex: this.rings.length - 1, // Index of the newly added ring angle: startAngle, speed: speed }); dot.setDepth(0.5); // Above rings but below white dot } } // Calculate scale increase (equivalent to 40px radius increase) const scaleIncrease = 40 / 300; // 40px increase relative to 300px base // Update background color to be 3 steps ahead of innermost ring but darker const bgColorIndex = (this.colorIndex + 3) % rainbowColors.length; this.cameras.main.setBackgroundColor(darkenColor(rainbowColors[bgColorIndex])); // Animate all rings growing this.tweens.add({ targets: this.rings, duration: 150, scaleX: `+=${scaleIncrease}`, scaleY: `+=${scaleIncrease}`, onComplete: () => { // Reset the radiuses array to original values this.radiuses = [...this.originalRadiuses]; // Remove the oldest growing ring if there are too many const maxGrowingRings = 50; // Adjust this number as needed const regularRingCount = 5; // Number of regular colored rings while (this.rings.length > regularRingCount + maxGrowingRings) { const oldestGrowingRing = this.rings[regularRingCount]; // Remove associated dots this.orbitingDots = this.orbitingDots.filter(dot => { if (dot.ringIndex === regularRingCount) { dot.sprite.destroy(); return false; } // Adjust ringIndex for remaining dots if (dot.ringIndex > regularRingCount) { dot.ringIndex--; } return true; }); oldestGrowingRing.destroy(); this.rings.splice(regularRingCount, 1); } this.isAnimating = false; } }); } }); // Create instruction text this.instructionText = this.add.text(400, 300, 'Tap to jump to the next orbit.\nAvoid the red obstacles.', { fontSize: '38px', fontFamily: 'Arial', color: '#ffffff', align: 'center', shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); this.instructionText.setOrigin(0.5); this.instructionText.setDepth(1); // Create score text this.scoreText = this.add.text(400, 30, 'Score: 0', { fontSize: '32px', fontFamily: 'Arial', color: '#ffffff', padding: { x: 16, y: 8 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); this.scoreText.setOrigin(0.5, 0.5); // Center align the text this.scoreText.setDepth(1); // Ensure text is always visible // Create white dot as a sprite (added last to be on top) this.dot = this.add.sprite(400, 100, 'dot'); this.dot.setDepth(1); // Ensure dot is always on top } update() { if (this.gameOver) return; // Don't update if game is over // Update white dot position const currentRadius = this.radiuses[this.currentRadiusIndex]; const x = 400 + Math.cos(this.angle) * currentRadius; const y = 300 + Math.sin(this.angle) * currentRadius; this.dot.setPosition(x, y); // Check collision with white rings for (let i = 5; i < this.rings.length; i++) { const ring = this.rings[i]; if (!ring.powerupShown) ring.powerupShown = false; // Initialize flag if not exists const ringRadius = ring.scaleX * 300; const distanceToCenter = Phaser.Math.Distance.Between( this.dot.x, this.dot.y, 400, 300 ); // Check if this is a white ring (every 17th ring) //if ((i - 4) % 17 === 0) { if (ring.isWhite == true) { // If distance is within 15 pixels of the ring radius if (Math.abs(distanceToCenter - ringRadius) < 15 && !ring.powerupShown) { ring.powerupShown = true; // Mark that we've shown the powerup for this ring // Play powerup sound this.sound.play('powerupSound', { volume: 0.5 }); // Create pixel explosion for each red dot this.orbitingDots.forEach(dot => { // Create particle emitter for explosion const particles = this.add.particles('redDot'); const emitter = particles.createEmitter({ x: dot.sprite.x, y: dot.sprite.y, speed: { min: -200, max: 200 }, angle: { min: 0, max: 360 }, scale: { start: 0.4, end: 0 }, lifespan: 500, blendMode: 'ADD', quantity: 10 }); // Destroy the particle system after animation completes this.time.delayedCall(500, () => { particles.destroy(); }); dot.sprite.destroy(); }); // Show "Powerup!" text const powerupText = this.add.text(400, 300, 'Powerup!', { fontSize: '48px', fontFamily: 'Arial', color: '#ffffff', shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); powerupText.setOrigin(0.5); powerupText.setDepth(2); // Animate the text this.tweens.add({ targets: powerupText, scaleX: 1.2, scaleY: 1.2, duration: 200, yoyo: true, repeat: 1, onComplete: () => { this.tweens.add({ targets: powerupText, alpha: 0, y: 250, duration: 1000, ease: 'Power2', onComplete: () => { powerupText.destroy(); } }); } }); this.orbitingDots = []; } } } // Update orbiting red dots for (let dot of this.orbitingDots) { // Get the current scale of the associated ring const ringScale = this.rings[dot.ringIndex].scaleX; // Calculate the current radius based on the ring's scale (300 is the base circle size) const currentRadius = ringScale * 300; const dotX = 400 + Math.cos(dot.angle) * currentRadius; const dotY = 300 + Math.sin(dot.angle) * currentRadius; dot.sprite.setPosition(dotX, dotY); dot.sprite.setScale(ringScale); // Update dot scale to match ring dot.angle += dot.speed; // Check collision with white dot const distance = Phaser.Math.Distance.Between( this.dot.x, this.dot.y, dotX, dotY ); // If distance is less than sum of radii (15 pixels), collision occurred if (distance < 15) { this.handleGameOver(); return; } if (dot.angle >= Math.PI * 2) { dot.angle = 0; } } // Update main white dot angle this.angle += 0.02; if (this.angle >= Math.PI * 2) { this.angle = 0; } } handleGameOver() { this.gameOver = true; this.isAnimating = false; // Fade out background music this.tweens.add({ targets: this.bgMusic, volume: 0, duration: 500, onComplete: () => { this.bgMusic.stop(); } }); // Play game over sound this.sound.play('gameoverSound', { volume: 0.5 }); // Stop all tweens this.tweens.killAll(); // Create semi-transparent black overlay const overlay = this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7); overlay.setDepth(2); // Create game over text const gameOverText = this.add.text(400, 250, 'GAME OVER', { fontSize: '64px', fontFamily: 'Arial', color: '#ffffff', padding: { x: 16, y: 8 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); gameOverText.setOrigin(0.5); gameOverText.setDepth(2); // Create final score text const finalScoreText = this.add.text(400, 330, `Final Score: ${this.score}`, { fontSize: '32px', fontFamily: 'Arial', color: '#ffffff', padding: { x: 16, y: 8 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); finalScoreText.setOrigin(0.5); finalScoreText.setDepth(2); // Create best score text const bestScoreText = this.add.text(400, 380, `Best Score: ${this.bestScore}`, { fontSize: '32px', fontFamily: 'Arial', color: '#ffff00', padding: { x: 16, y: 8 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); bestScoreText.setOrigin(0.5); bestScoreText.setDepth(2); // Add play again button after 1 second delay this.time.delayedCall(1000, () => { const playAgainButton = this.add.text(400, 470, 'Play Again', { fontSize: '32px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#2e587c', padding: { x: 20, y: 10 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 8, fill: true } }); playAgainButton.setOrigin(0.5); playAgainButton.setDepth(2); playAgainButton.setInteractive({ useHandCursor: true }); // Add hover effect playAgainButton.on('pointerover', () => { playAgainButton.setStyle({ backgroundColor: '#4f8bbd' }); }); playAgainButton.on('pointerout', () => { playAgainButton.setStyle({ backgroundColor: '#2e587c' }); }); // Add click handler to restart the game playAgainButton.on('pointerdown', () => { // Remove all input listeners this.input.removeAllListeners('pointerdown'); // Reset powerupShown flags for all rings this.rings.forEach(ring => ring.powerupShown = false); // Destroy all existing game objects if (this.instructionText) this.instructionText.destroy(); if (this.title3) this.title3.destroy(); if (this.bgMusic) this.bgMusic.stop(); this.rings.forEach(ring => ring.destroy()); this.rings = []; this.orbitingDots.forEach(dot => dot.sprite.destroy()); this.orbitingDots = []; // Reset game variables this.score = 0; this.angle = 0; this.gameOver = false; this.currentRadiusIndex = 0; this.isAnimating = false; this.colorIndex = Phaser.Math.Between(0, rainbowColors.length - 1); this.logo = null; // Reset logo reference for new game // Restart the scene this.scene.restart(); }); }); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, scene: Example, render: { antialias: true, pixelArt: false, roundPixels: false, antialiasGL: true } }; window.phaserGame = new Phaser.Game(config);