class Example extends Phaser.Scene { constructor () { super(); this.score = 0; // Initialize score to 0 this.bulletSpeed = 1.1; // Set a nice cruising speed for the bullets this.gameStarted = false; // Initialize gameStarted to false this.gameOver = false; // Initialize gameOver to false this.timeRemaining = 120; // Initialize time remaining to 120 seconds (2 minutes) } preload () { this.load.image('futureAntarctica', 'https://play.rosebud.ai/assets/FutureAntarctica.png?2kRe'); this.load.image('logo', 'https://play.rosebud.ai/assets/logo.png?cQyV'); this.load.image('red', 'https://play.rosebud.ai/assets/red.png?BNG3'); this.load.image('blueBarrel', 'https://play.rosebud.ai/assets/BlueBarrel.png?QCvb'); // Load the BlueBarrel image } create () { const background = this.add.image(400, 300, 'futureAntarctica'); background.setScale(Math.max(this.scale.width / background.width, this.scale.height / background.height)); this.analyser = this.playGenerativeMusic(); this.graphics = this.add.graphics({ x: 400, y: 300 }); // Bullets group this.bullets = this.add.group({ classType: Phaser.GameObjects.Graphics }); // Bullet glow graphics this.bulletGlowGraphics = this.add.graphics(); this.prevNumPoints = 3; // Initialize previous number of points to 3 // Add BlueBarrel images to the scene const barrelWidth = 50; // Adjust this value to change the size of the BlueBarrel images const barrelHeight = 50; // Adjust this value to change the size of the BlueBarrel images this.leftBarrel = this.add.image(barrelWidth / 2, this.scale.height / 2, 'blueBarrel').setOrigin(0, 0.5).setScale(barrelWidth / this.textures.get('blueBarrel').getSourceImage().width, barrelHeight / this.textures.get('blueBarrel').getSourceImage().height).setAngle(90); // Position the left barrel touching the left edge and rotate it to point towards the center this.rightBarrel = this.add.image(this.scale.width - barrelWidth / 2, this.scale.height / 2, 'blueBarrel').setOrigin(1, 0.5).setScale(barrelWidth / this.textures.get('blueBarrel').getSourceImage().width, barrelHeight / this.textures.get('blueBarrel').getSourceImage().height).setAngle(-90); // Position the right barrel touching the right edge and rotate it to point towards the center this.topBarrel = this.add.image(this.scale.width / 2, barrelHeight / 2, 'blueBarrel').setOrigin(0.5, 0.5).setScale(barrelWidth / this.textures.get('blueBarrel').getSourceImage().width, barrelHeight / this.textures.get('blueBarrel').getSourceImage().height).setAngle(180); // Position the top barrel at the top edge and rotate it to point towards the center this.bottomBarrel = this.add.image(this.scale.width / 2, this.scale.height - barrelHeight / 2, 'blueBarrel').setOrigin(0.5, 0.5).setScale(barrelWidth / this.textures.get('blueBarrel').getSourceImage().width, barrelHeight / this.textures.get('blueBarrel').getSourceImage().height); this.cursors = this.input.keyboard.createCursorKeys(); // Calculate the maximum distance each barrel needs to travel this.maxLeftBarrelDistance = this.scale.height; this.maxRightBarrelDistance = this.scale.height; this.maxTopBarrelDistance = this.scale.width; this.maxBottomBarrelDistance = this.scale.width; // Set the speed for each barrel to reach the edge in the same time const barrelSpeed = 5; // Adjust this value to change the speed of the barrels const maxDistance = Math.max(this.maxLeftBarrelDistance, this.maxRightBarrelDistance, this.maxTopBarrelDistance, this.maxBottomBarrelDistance); const time = maxDistance / barrelSpeed; // Time in frames for the barrels to reach the edge this.leftBarrelSpeed = this.maxLeftBarrelDistance / time; this.rightBarrelSpeed = this.maxRightBarrelDistance / time; this.topBarrelSpeed = this.maxTopBarrelDistance / time; this.bottomBarrelSpeed = this.maxBottomBarrelDistance / time; // Add "SCORE: " text this.levelScoreText = this.add.text(this.scale.width / 2, this.scale.height * 0.15, `SCORE: ${this.score}`, { fontFamily: 'Arial', fontSize: '24px', color: '#ADD8E6', // Light blue color alpha: 0.5 // Faded text }); this.levelScoreText.setOrigin(0.5, 0.5); // Center the text // Add "Time Remaining: " text this.timeRemainingText = this.add.text(this.scale.width / 2, this.scale.height * 0.2, `Time Remaining: ${this.formatTime(this.timeRemaining)}`, { fontFamily: 'Arial', fontSize: '24px', color: '#ADD8E6', // Light blue color alpha: 0.5 // Faded text }); this.timeRemainingText.setOrigin(0.5, 0.5); // Center the text // Add semi-transparent black box behind the yellow text instructions const instructionsBackgroundRect = this.add.rectangle(this.scale.width / 2, this.scale.height * 0.82, this.scale.width * 0.8, 80, 0x000000, 0.25); // Create a semi-transparent black rectangle instructionsBackgroundRect.setOrigin(0.5, 0.5); // Center the rectangle // Add "Left/Right arrow keys = Move blue barrels." text this.instructionsText1 = this.add.text(this.scale.width / 1.85, this.scale.height * 0.78, 'Left/Right arrow keys = Move blue barrels.', { fontFamily: 'Arial', fontSize: '24px', color: '#FFFFFF', // Yellow color alpha: 1 // Opaque }); this.instructionsText1.setOrigin(0.5, 0.5); // Center the text // Add "Collect the blue energy dots." text this.instructionsText2 = this.add.text(this.scale.width / 2, this.scale.height * 0.85, 'Collect the blue energy dots.', { fontFamily: 'Arial', fontSize: '24px', color: '#FFFFFF', // Yellow color alpha: 1 // Opaque }); this.instructionsText2.setOrigin(0.5, 0.5); // Center the text // Add "Press ENTER to start." text this.startText = this.add.text(this.scale.width / 2, this.scale.height / 2, 'Press ENTER to start.', { fontFamily: 'Arial', fontSize: '48px', color: '#FFFFFF', // White color alpha: 1 // Opaque }); this.startText.setOrigin(0.5, 0.5); // Center the text // Listen for the ENTER key press this.input.keyboard.once('keydown-ENTER', () => { this.startText.destroy(); // Remove the "Press ENTER to start." text this.gameStarted = true; // Set gameStarted to true this.timeRemainingText.setText(`Time Remaining: ${this.formatTime(this.timeRemaining)}`); // Update the time remaining text this.timerEvent = this.time.addEvent({ delay: 1000, callback: this.updateTimer, callbackScope: this, loop: true }); // Start the timer event }); } update () { if (!this.gameStarted || this.gameOver) { if (this.gameOver) { // Display "Thanks for playing! To play again, please refresh the page." text const thanksText = this.add.text(this.scale.width / 2, this.scale.height / 2, 'Thanks for playing!\nTo play again, please refresh the page.', { fontFamily: 'Arial', fontSize: '45px', color: '#FFFFFF', // White color alpha: 1, // Opaque align: 'center' // Center the text }); thanksText.setOrigin(0.5, 0.5); // Center the text // Clear out the blue dots (bullets) from the screen this.bullets.clear(true, true); // Clear out the bullet glow graphics this.bulletGlowGraphics.clear(); } return; // Exit the update function if the game hasn't started or is over } this.graphics.clear(); const bufferLength = this.analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); this.analyser.getByteFrequencyData(dataArray); const baseRadius = 40; // Base radius of the shape const numRipples = 5; // Number of ripples to draw for (let r = 0; r < numRipples; r++) { // Determine number of points based on music frequency data const numPoints = Math.floor((dataArray[0] / 255.0) * 12) + 3; // Fire bullets when the shape transitions from a 3-vertex shape to one with more vertices if (this.prevNumPoints === 3 && numPoints > 3) { this.fireBullets(numPoints, dataArray, baseRadius); } this.prevNumPoints = numPoints; for (let i = 0; i < numPoints; i++) { const angle = (2 * Math.PI / numPoints) * (i + dataArray[i % bufferLength] / 255.0); let radius = baseRadius + r * 10 + (dataArray[i % bufferLength] / 255.0) * 100; // Modulate radius to create limbs or sides that jut out or collapse if (i % 2 === 0) { radius += (dataArray[i % bufferLength] / 255.0) * 50; } else { radius -= (dataArray[i % bufferLength] / 255.0) * 50; } const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); // Change the color of the audio visualizer to blue const hue = 0.67; // Blue hue value const saturation = 1.0; // Maximum saturation const lightness = 0.5; // Midpoint lightness const color = Phaser.Display.Color.HSLToColor(hue, saturation, lightness); if (i === 0) { this.graphics.fillStyle(color.color, 1 - r * 0.2); this.graphics.beginPath(); this.graphics.moveTo(x, y); } else { this.graphics.lineTo(x, y); } } this.graphics.closePath(); this.graphics.fillPath(); } // Update bullets positions and remove bullets that are out of screen bounds or hit a barrel this.bullets.getChildren().forEach(bullet => { bullet.x += bullet.vx * bullet.speed; bullet.y += bullet.vy * bullet.speed; // Check if bullet is out of screen bounds if (bullet.x < 0 || bullet.x > this.scale.width || bullet.y < 0 || bullet.y > this.scale.height) { bullet.destroy(); // Remove the bullet } // Check if bullet hits a barrel else if (this.checkBarrelCollision(bullet)) { bullet.destroy(); // Remove the bullet this.incrementScore(); // Increment the score } }); // Draw glow effect around bullets this.bulletGlowGraphics.clear(); this.bullets.getChildren().forEach(bullet => { this.bulletGlowGraphics.fillStyle(0x0099ff, 0.5); // Set glow color and transparency this.bulletGlowGraphics.fillCircle(bullet.x, bullet.y, 10); // Draw a circle with radius 10 around the bullet }); // Move barrels based on arrow key input if (this.cursors.left.isDown) { this.leftBarrel.y -= this.leftBarrelSpeed; // Move left barrel up this.rightBarrel.y += this.rightBarrelSpeed; // Move right barrel down this.bottomBarrel.x -= this.bottomBarrelSpeed; // Move bottom barrel left this.topBarrel.x += this.topBarrelSpeed; // Move top barrel right } else if (this.cursors.right.isDown) { this.leftBarrel.y += this.leftBarrelSpeed; // Move left barrel down this.rightBarrel.y -= this.rightBarrelSpeed; // Move right barrel up this.bottomBarrel.x += this.bottomBarrelSpeed; // Move bottom barrel right this.topBarrel.x -= this.topBarrelSpeed; // Move top barrel left } // Prevent barrels from going off-screen const leftBarrelBounds = this.leftBarrel.getBounds(); const rightBarrelBounds = this.rightBarrel.getBounds(); const topBarrelBounds = this.topBarrel.getBounds(); const bottomBarrelBounds = this.bottomBarrel.getBounds(); // Adjust clamping for left and right barrels this.leftBarrel.y = Phaser.Math.Clamp(this.leftBarrel.y, 0, this.scale.height - leftBarrelBounds.height); this.rightBarrel.y = Phaser.Math.Clamp(this.rightBarrel.y, 0, this.scale.height - rightBarrelBounds.height); this.bottomBarrel.x = Phaser.Math.Clamp(this.bottomBarrel.x, bottomBarrelBounds.width / 2, this.scale.width - bottomBarrelBounds.width / 2); this.topBarrel.x = Phaser.Math.Clamp(this.topBarrel.x, topBarrelBounds.width / 2, this.scale.width - topBarrelBounds.width / 2); } fireBullets (numPoints, dataArray, baseRadius) { // Choose a random vertex to fire bullets from const randomVertexIndex = Math.floor(Math.random() * numPoints); const angle = (2 * Math.PI / numPoints) * (randomVertexIndex + dataArray[randomVertexIndex % dataArray.length] / 255.0); let radius = baseRadius + (dataArray[randomVertexIndex % dataArray.length] / 255.0) * 100; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); // Create a new bullet from the random vertex const bullet = this.add.graphics({ x: 400 +x, y: 300 + y }); bullet.fillStyle(0x0099ff); // Set bullet color to blue bullet.fillCircle(0, 0, 5); // Draw a circle with radius 5 bullet.vx = this.bulletSpeed * Math.cos(angle); // Set bullet's x velocity bullet.vy = this.bulletSpeed * Math.sin(angle); // Set bullet's y velocity // Set a random speed for the bullet between half and double the current bullet speed bullet.speed = this.bulletSpeed * (0.5 + Math.random()); this.bullets.add(bullet); // Add the bullet to the bullets group } checkBarrelCollision(bullet) { const leftBarrelBounds = this.leftBarrel.getBounds(); const rightBarrelBounds = this.rightBarrel.getBounds(); const topBarrelBounds = this.topBarrel.getBounds(); const bottomBarrelBounds = this.bottomBarrel.getBounds(); if (bullet.x >= leftBarrelBounds.left && bullet.x <= leftBarrelBounds.right && bullet.y >= leftBarrelBounds.top && bullet.y <= leftBarrelBounds.bottom) { return true; // Collision with left barrel } else if (bullet.x >= rightBarrelBounds.left && bullet.x <= rightBarrelBounds.right && bullet.y >= rightBarrelBounds.top && bullet.y <= rightBarrelBounds.bottom) { return true; // Collision with right barrel } else if (bullet.x >=topBarrelBounds.left && bullet.x <= topBarrelBounds.right && bullet.y >= topBarrelBounds.top && bullet.y <= topBarrelBounds.bottom) { return true; // Collision with top barrel } else if (bullet.x >= bottomBarrelBounds.left && bullet.x <= bottomBarrelBounds.right && bullet.y >= bottomBarrelBounds.top && bullet.y <= bottomBarrelBounds.bottom) { return true; // Collision with bottom barrel } return false; // No collision } incrementScore() { if (!this.gameOver) { // Only increment score if the game is not over this.score++; // Increment the score this.levelScoreText.setText(`SCORE: ${this.score}`); // Update the text } } disableControls() { // Disable arrow key input this.cursors.left.enabled = false; this.cursors.right.enabled = false; } removeBarrels() { // Remove the barrels from the scene this.leftBarrel.destroy(); this.rightBarrel.destroy(); this.topBarrel.destroy(); this.bottomBarrel.destroy(); } updateTimer() { this.timeRemaining--; // Decrement the time remaining this.timeRemainingText.setText(`Time Remaining: ${this.formatTime(this.timeRemaining)}`); // Update the time remaining text if (this.timeRemaining === 0) { this.timerEvent.remove(); // Remove the timer event this.gameOver = true; // Set gameOver to true this.disableControls(); // Disable controls this.removeBarrels(); // Remove barrels } } formatTime(seconds) { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; } playGenerativeMusic() { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const gainNode = audioContext.createGain(); gainNode.gain.value = 0.15; gainNode.connect(audioContext.destination); const scales = [ [261.63, 293.66, 329.63, 392.00, 440.00, 523.25] ]; const analyser = audioContext.createAnalyser(); gainNode.connect(analyser); const getRandomScale = () => scales[Math.floor(Math.random() * scales.length)]; const getRandomNote = (scale) => scale[Math.floor(Math.random() * scale.length)]; const playNote = (frequency, startTime) => { const oscillator = audioContext.createOscillator(); oscillator.type = "sine"; oscillator.frequency.value = frequency; oscillator.connect(gainNode); oscillator.start(startTime); return oscillator; }; const playRandomNote = () => { const scale = getRandomScale(); const oscs = []; const numOscs = 2; for (let i = 0; i < numOscs; i++) { const note = getRandomNote(scale); const osc = playNote(note, audioContext.currentTime + i * 0.2); oscs.push(osc); } const duration = Math.random() * 2 + 0.5; setTimeout(() => { oscs.forEach(osc => osc.stop()); playRandomNote(); }, duration * 1000); }; playRandomNote(); return analyser; } } 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: 'matter', matter: { gravity: { y: 200 } } }, scene: Example }; window.phaserGame = new Phaser.Game(config);