class MenuScene extends Phaser.Scene { constructor() { super({ key: 'MenuScene' }); } create() { const centerX = this.cameras.main.centerX; const centerY = this.cameras.main.centerY; // Add title this.add.text(centerX, centerY - 100, 'TETRIS RACING', { fontSize: '48px', fill: '#fff', fontFamily: 'Arial' }).setOrigin(0.5); // Create buttons const button10Laps = this.add.rectangle(centerX, centerY, 200, 50, 0x00ff00); const buttonInfinite = this.add.rectangle(centerX, centerY + 70, 200, 50, 0x00ff00); const buttonLeaderboard = this.add.rectangle(centerX, centerY + 140, 200, 50, 0x00ff00); // Add text on buttons this.add.text(centerX, centerY, '10 LAPS', { fontSize: '24px', fill: '#000', fontFamily: 'Arial' }).setOrigin(0.5); this.add.text(centerX, centerY + 70, 'INFINITE', { fontSize: '24px', fill: '#000', fontFamily: 'Arial' }).setOrigin(0.5); this.add.text(centerX, centerY + 140, 'LEADERBOARD', { fontSize: '24px', fill: '#000', fontFamily: 'Arial' }).setOrigin(0.5); // Make buttons interactive button10Laps.setInteractive(); buttonInfinite.setInteractive(); buttonLeaderboard.setInteractive(); button10Laps.on('pointerdown', () => { this.scene.start('RacingGame', { gameMode: '10laps' }); }); buttonInfinite.on('pointerdown', () => { this.scene.start('RacingGame', { gameMode: 'infinite' }); }); buttonLeaderboard.on('pointerdown', () => { this.scene.start('LeaderboardScene'); }); } } class RacingGame extends Phaser.Scene { constructor() { super({ key: 'RacingGame' }); this.car = null; this.tetrisPieces = null; this.tetrisShapes = [ [ [1, 1, 1, 1] ], // I [ [1, 1], [1, 1] ], // O [ [1, 1, 1], [0, 1, 0] ], // T [ [1, 1, 1], [1, 0, 0] ], // L [ [1, 1, 1], [0, 0, 1] ], // J [ [1, 1, 0], [0, 1, 1] ], // Z [ [0, 1, 1], [1, 1, 0] ] // S ]; this.nextPieceIndex = Phaser.Math.Between(0, 6); this.nextPieceRotation = Phaser.Math.Between(0, 3); this.blockSize = 30; this.totalTime = 0; this.lapsCompleted = 0; this.bestLapTime = 0; this.speed = 0; this.maxSpeed = 400; this.acceleration = 10; this.drag = 0.98; this.startLineX = 800; this.startLineY = 30; // Position just below top wall this.lapTime = 0; this.lastLapTime = 0; this.isRacing = false; this.hasPassedOval = false; this.gameMode = null; this.targetLaps = 0; } init(data) { this.gameMode = data.gameMode; this.targetLaps = this.gameMode === '10laps' ? 10 : Infinity; this.lapsCompleted = 0; } preload() { // Load car asset this.load.image('car', 'https://play.rosebud.ai/assets/car.png?iJd8'); this.load.image('edge', 'https://play.rosebud.ai/assets/edge.png?3e65'); this.load.image('pano', 'https://play.rosebud.ai/assets/pano.png?hw92'); this.load.audio('tetris', 'https://play.rosebud.ai/assets/tetris.mp3?7HYM'); } create() { // Initialize tetris pieces group this.tetrisPieces = this.physics.add.staticGroup(); // Create grid cells (track) const cellWidth = 10; const cellHeight = 10; const gridGraphics = this.add.graphics(); // Draw track cells (grey) gridGraphics.fillStyle(0x666666); for (let x = 0; x < 160; x++) { for (let y = 0; y < 240; y++) { gridGraphics.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight); } } // Create walls group for collision this.walls = this.physics.add.staticGroup(); // Function to create rounded corners const createRoundedCorner = (startX, startY, radius, quadrant) => { for (let x = 0; x <= radius; x++) { for (let y = 0; y <= radius; y++) { const distance = Math.sqrt(x * x + y * y); if (distance <= radius && distance > radius - 3) { let wallX = startX + (quadrant[0] * (radius - x) * cellWidth); let wallY = startY + (quadrant[1] * (radius - y) * cellHeight); let randomGreen = Phaser.Math.Between(100, 255); let wall = this.add.rectangle(wallX, wallY, cellWidth * 3, cellHeight * 3, Phaser.Display.Color.GetColor(0, randomGreen, 0)); this.walls.add(wall); } } } }; // Create rounded corners createRoundedCorner(cellWidth / 2, cellHeight / 2, 10, [1, 1]); // Top-left createRoundedCorner(1600 - cellWidth / 2, cellHeight / 2, 10, [-1, 1]); // Top-right createRoundedCorner(cellWidth / 2, 2400 - cellHeight / 2, 10, [1, -1]); // Bottom-left createRoundedCorner(1600 - cellWidth / 2, 2400 - cellHeight / 2, 10, [-1, -1]); // Bottom-right // Create straight walls for edges (excluding corners) for (let x = 10; x < 150; x++) { let randomGreen1 = Phaser.Math.Between(100, 255); let randomGreen2 = Phaser.Math.Between(100, 255); let topWall = this.add.rectangle(x * cellWidth + cellWidth / 2, cellHeight / 2, cellWidth, cellHeight * 3, Phaser.Display.Color.GetColor(0, randomGreen1, 0)); let bottomWall = this.add.rectangle(x * cellWidth + cellWidth / 2, 2400 - cellHeight / 2, cellWidth, cellHeight * 3, Phaser.Display.Color.GetColor(0, randomGreen2, 0)); this.walls.add(topWall); this.walls.add(bottomWall); } for (let y = 10; y < 230; y++) { let randomGreen1 = Phaser.Math.Between(100, 255); let randomGreen2 = Phaser.Math.Between(100, 255); let leftWall = this.add.rectangle(cellWidth / 2, y * cellHeight + cellHeight / 2, cellWidth * 3, cellHeight, Phaser.Display.Color.GetColor(0, randomGreen1, 0)); let rightWall = this.add.rectangle(1600 - cellWidth / 2, y * cellHeight + cellHeight / 2, cellWidth * 3, cellHeight, Phaser.Display.Color.GetColor(0, randomGreen2, 0)); this.walls.add(leftWall); this.walls.add(rightWall); } // Create filled oval-shaped wall in the center const centerX = 800; const centerY = 1200; const verticalRadius = 820; const horizontalRadius = 350; // First create the outer boundary for (let angle = 0; angle < 360; angle += 2) { const rad = angle * Math.PI / 180; const x = centerX + horizontalRadius * Math.cos(rad); const y = centerY + verticalRadius * Math.sin(rad); let randomGreen = Phaser.Math.Between(100, 255); let wall = this.add.rectangle(x, y, cellWidth, cellHeight, Phaser.Display.Color.GetColor(0, randomGreen, 0)); this.walls.add(wall); } // Fill the oval for (let x = -horizontalRadius; x <= horizontalRadius; x += cellWidth) { for (let y = -verticalRadius; y <= verticalRadius; y += cellHeight) { // Check if point is inside the oval using the ellipse equation if ((x * x) / (horizontalRadius * horizontalRadius) + (y * y) / (verticalRadius * verticalRadius) <= 1) { let randomGreen = Phaser.Math.Between(100, 255); let wall = this.add.rectangle( centerX + x, centerY + y, cellWidth, cellHeight, Phaser.Display.Color.GetColor(0, randomGreen, 0) ); this.walls.add(wall); } } } // Add pano image in the center of the oval const panoImage = this.add.image(800, 1200, 'pano'); panoImage.setDepth(98); // Set depth to be above walls but below UI panoImage.setScale(0.8); // Adjust scale to fit within the oval // Create start line checkerboard pattern const startLineGraphics = this.add.graphics(); const checkerSize = 10; // Same size as walls const checkerWidth = 4; // 4 squares wide const checkerHeight = 35; // Height from top to center for (let y = 0; y < checkerHeight; y++) { for (let x = 0; x < checkerWidth; x++) { const color = ((x + y) % 2 === 0) ? 0x000000 : 0xFFFFFF; startLineGraphics.fillStyle(color); startLineGraphics.fillRect( this.startLineX + (x * checkerSize) - (checkerWidth * checkerSize / 2), this.startLineY + (y * checkerSize), checkerSize, checkerSize ); } } // Create countdown text // Create UI background // Create rounded UI background with graphics only const graphics = this.add.graphics(); graphics.lineStyle(2, 0xffffff, 0.2); graphics.strokeRoundedRect(980, 25, 200, 150, 15); graphics.fillStyle(0x000000, 0.7); graphics.fillRoundedRect(980, 25, 200, 150, 15); graphics.setScrollFactor(0); graphics.setDepth(99); // Create countdown text this.countdownText = this.add.text(600, 300, '', { fontFamily: 'Arial', fontSize: '128px', fill: '#fff', stroke: '#000', strokeThickness: 6, align: 'center' }).setOrigin(0.5).setScrollFactor(0).setDepth(100); // Create UI texts const textConfig = { fontFamily: 'Arial', fontSize: '16px', fill: '#fff', stroke: '#000', strokeThickness: 1 }; this.totalTimeText = this.add.text(990, 30, 'Total Time: 0.000', textConfig) .setScrollFactor(0) .setDepth(100); this.lapTimeText = this.add.text(990, 50, 'Lap Time: 0.000', textConfig) .setScrollFactor(0) .setDepth(100); this.bestLapText = this.add.text(990, 70, 'Best Lap: ---', textConfig) .setScrollFactor(0) .setDepth(100); this.lapsText = this.add.text(990, 90, 'Laps: 0', textConfig) .setScrollFactor(0) .setDepth(100); this.nextPieceText = this.add.text(990, 110, 'Next Piece:', textConfig) .setScrollFactor(0) .setDepth(100); // Create container for next piece preview this.previewContainer = this.add.container(1125, 140); this.previewContainer.setScrollFactor(0); this.previewContainer.setDepth(100); // Update the next piece preview initially this.updateNextPiecePreview(); // Start countdown sequence this.startCountdown(); // Create car this.car = this.add.sprite(800, 150, 'car'); this.car.angle = 90; // Turn 90 degrees right this.car.setScale(0.15); // Adjust scale based on the generated asset size // Enable physics on the car this.physics.add.existing(this.car, false); // Set exact sprite dimensions for hitbox this.car.body.setSize(212, 408); // Using the actual sprite dimensions from meta // Center the hitbox this.car.body.setOffset(0, 0); this.car.body.setDamping(true); this.car.body.setDrag(0.99); this.car.body.setAngularDrag(0.99); this.car.body.setMaxSpeed(this.maxSpeed); // Add collision between car and walls this.physics.add.collider(this.car, this.walls); this.physics.add.collider(this.car, this.tetrisPieces); // Setup camera to follow the car this.cameras.main.setBounds(0, 0, 1600, 2400); this.cameras.main.startFollow(this.car, true, 0.1, 0.1); this.physics.world.setBounds(0, 0, 1600, 2400); // Setup controls this.cursors = this.input.keyboard.createCursorKeys(); // Add R key for returning to menu this.input.keyboard.on('keydown-R', () => { if (this.tetrisMusic) { this.tetrisMusic.stop(); } this.scene.start('MenuScene'); }); } startCountdown() { const countdowns = ['3', '2', '1', 'GO!']; let index = 0; const showNumber = () => { if (index < countdowns.length) { this.countdownText.setAlpha(1); this.countdownText.setText(countdowns[index]); this.countdownText.setScale(1.5); this.tweens.add({ targets: this.countdownText, alpha: 0, scale: 1, duration: 450, ease: 'Power2' }); index++; if (index < countdowns.length + 1) { this.time.delayedCall(500, showNumber); } if (index === countdowns.length) { this.isRacing = true; this.lapTime = 0; // Play tetris music when race starts this.tetrisMusic = this.sound.add('tetris', { loop: true }); this.tetrisMusic.play(); } } }; showNumber(); } checkLap() { const carX = this.car.x; const carY = this.car.y; // Check if car has passed the oval if (carX > 800 && carY > 1200) { this.hasPassedOval = true; } // Check if car crosses start line from left to right if (this.hasPassedOval && carX >= this.startLineX - 20 && carX <= this.startLineX + 20 && carY >= this.startLineY && carY <= this.startLineY + 350) { // Display the current lap time that was just completed if (this.lapTime !== 0) { this.countdownText.setText(`Lap: ${(this.lapTime / 1000).toFixed(3)}s`); this.countdownText.setAlpha(1); this.countdownText.setPosition(600, 300); this.time.delayedCall(2000, () => { this.countdownText.setAlpha(0); }); } this.lastLapTime = this.lapTime; // Update best lap time if this lap is better or if it's the first lap if (this.bestLapTime === 0 || this.lapTime < this.bestLapTime) { this.bestLapTime = this.lapTime; this.bestLapText.setText(`Best Lap: ${(this.bestLapTime / 1000).toFixed(3)}`); } this.lapTime = 0; this.hasPassedOval = false; this.lapsCompleted++; this.lapsText.setText(`Laps: ${this.lapsCompleted}`); this.spawnTetrisPiece(); // Check if game is complete (10 laps mode) if (this.gameMode === '10laps' && this.lapsCompleted >= this.targetLaps) { this.isRacing = false; if (this.tetrisMusic) { this.tetrisMusic.stop(); } this.countdownText.setText('FINISH!'); this.countdownText.setAlpha(1); this.countdownText.setPosition(600, 300); // Create input dialog background const dialogBg = this.add.rectangle(600, 400, 400, 150, 0x000000); dialogBg.setAlpha(0.8); dialogBg.setScrollFactor(0); // Create name prompt text const promptText = this.add.text(600, 360, 'Enter your name:', { fontSize: '24px', fill: '#ffffff', fontFamily: 'Arial' }); promptText.setOrigin(0.5); promptText.setScrollFactor(0); // Create input field const inputField = document.createElement('input'); inputField.type = 'text'; inputField.style = 'width: 200px; padding: 8px; font-size: 16px; text-align: center;'; inputField.maxLength = 15; // Add input field to the game const inputElement = this.add.dom(600, 400, inputField); inputElement.setScrollFactor(0); // Create submit button const submitButton = this.add.rectangle(600, 450, 120, 40, 0x00ff00); submitButton.setScrollFactor(0); submitButton.setInteractive(); const submitText = this.add.text(600, 450, 'SUBMIT', { fontSize: '20px', fill: '#000000', fontFamily: 'Arial' }); submitText.setOrigin(0.5); submitText.setScrollFactor(0); // Handle submit button click submitButton.on('pointerdown', () => { const playerName = inputField.value.trim() || 'Anonymous'; const scores = JSON.parse(localStorage.getItem('tetrisRacingScores') || '[]'); // Add new score scores.push({ name: playerName, time: this.totalTime }); // Sort scores by time (ascending) scores.sort((a, b) => a.time - b.time); // Keep only top 5 scores scores.splice(5); // Save to localStorage localStorage.setItem('tetrisRacingScores', JSON.stringify(scores)); // Remove input elements inputElement.destroy(); dialogBg.destroy(); promptText.destroy(); submitButton.destroy(); submitText.destroy(); // Transition to leaderboard this.scene.start('LeaderboardScene'); }); } } } createTetrisPiece(x, y, shapeIndex, rotation) { const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xff00ff, 0xffff00, 0x00ffff]; const color = colors[shapeIndex % colors.length]; const shape = this.tetrisShapes[shapeIndex]; const blocks = []; const shadows = []; // Calculate the shape's dimensions const shapeWidth = shape[0].length * this.blockSize; const shapeHeight = shape.length * this.blockSize; const centerX = x + shapeWidth / 2; const centerY = y + shapeHeight / 2; // First create all shadows for (let row = 0; row < shape.length; row++) { for (let col = 0; col < shape[row].length; col++) { if (shape[row][col]) { // Calculate position relative to center const relX = (col * this.blockSize) - (shapeWidth / 2); const relY = (row * this.blockSize) - (shapeHeight / 2); // Apply rotation const rad = rotation * Math.PI / 2; const rotatedX = relX * Math.cos(rad) - relY * Math.sin(rad); const rotatedY = relX * Math.sin(rad) + relY * Math.cos(rad); // Create drop shadow with increased offset and size const shadow = this.add.rectangle( centerX + rotatedX + 15, centerY + rotatedY + 15, this.blockSize, this.blockSize, 0x000000, 0.4 ); shadow.setDepth(1); shadows.push(shadow); } } } // Then create all blocks for (let row = 0; row < shape.length; row++) { for (let col = 0; col < shape[row].length; col++) { if (shape[row][col]) { const relX = (col * this.blockSize) - (shapeWidth / 2); const relY = (row * this.blockSize) - (shapeHeight / 2); const rad = rotation * Math.PI / 2; const rotatedX = relX * Math.cos(rad) - relY * Math.sin(rad); const rotatedY = relX * Math.sin(rad) + relY * Math.cos(rad); // Create block at final position const block = this.add.rectangle( centerX + rotatedX, centerY + rotatedY, this.blockSize * 0.95, this.blockSize * 0.95, color ); block.setDepth(2); // Add a slight border to make the hitbox visible const border = this.add.rectangle( centerX + rotatedX, centerY + rotatedY, this.blockSize, this.blockSize, 0x000000, 0 ); border.setStrokeStyle(1, 0x000000); border.setDepth(2); this.tetrisPieces.add(block); blocks.push(block); } } } return blocks; } isValidPosition(x, y, shape, rotation) { const shapeData = this.tetrisShapes[shape]; const bounds = []; // Calculate the shape's dimensions const shapeWidth = shapeData[0].length * this.blockSize; const shapeHeight = shapeData.length * this.blockSize; const centerX = x + shapeWidth / 2; const centerY = y + shapeHeight / 2; // Create virtual bounds for each block for (let row = 0; row < shapeData.length; row++) { for (let col = 0; col < shapeData[row].length; col++) { if (shapeData[row][col]) { const relX = (col * this.blockSize) - (shapeWidth / 2); const relY = (row * this.blockSize) - (shapeHeight / 2); const rad = rotation * Math.PI / 2; const rotatedX = relX * Math.cos(rad) - relY * Math.sin(rad); const rotatedY = relX * Math.sin(rad) + relY * Math.cos(rad); const blockBounds = new Phaser.Geom.Rectangle( centerX + rotatedX - (this.blockSize / 2), centerY + rotatedY - (this.blockSize / 2), this.blockSize, this.blockSize ); bounds.push(blockBounds); } } } // Check for collisions with walls and world bounds for (const blockBounds of bounds) { // Check world bounds if (blockBounds.x < 0 || blockBounds.x + blockBounds.width > 1600 || blockBounds.y < 0 || blockBounds.y + blockBounds.height > 2400) { return false; } // Check wall collisions for (const wall of this.walls.getChildren()) { if (Phaser.Geom.Rectangle.Overlaps(blockBounds, wall.getBounds())) { return false; } } } return true; } spawnTetrisPiece() { const margin = 100; // Margin from walls let validPosition = false; let x, y; // Use the current piece parameters const currentShapeIndex = this.nextPieceIndex; const currentRotation = this.nextPieceRotation; // Generate next piece parameters for future use this.nextPieceIndex = Phaser.Math.Between(0, this.tetrisShapes.length - 1); this.nextPieceRotation = Phaser.Math.Between(0, 3); // Try to find a valid position for the current piece let attempts = 0; const maxAttempts = 100; while (!validPosition && attempts < maxAttempts) { if (attempts < 50) { x = Phaser.Math.Between(margin, 1600 - margin); y = Phaser.Math.Between(margin, 2400 - margin); } else { // Try positions further from walls const extendedMargin = margin * 2; x = Phaser.Math.Between(extendedMargin, 1600 - extendedMargin); y = Phaser.Math.Between(extendedMargin, 2400 - extendedMargin); } if (this.isValidPosition(x, y, currentShapeIndex, currentRotation)) { validPosition = true; this.createTetrisPiece(x, y, currentShapeIndex, currentRotation); break; } attempts++; } // Update the preview for the next piece this.updateNextPiecePreview(); } update() { if (this.isRacing) { this.lapTime += this.game.loop.delta; this.totalTime += this.game.loop.delta; this.lapTimeText.setText(`Lap Time: ${(this.lapTime / 1000).toFixed(3)}`); this.totalTimeText.setText(`Total Time: ${(this.totalTime / 1000).toFixed(3)}`); this.checkLap(); // Calculate current velocity magnitude const velocityMagnitude = Math.sqrt( this.car.body.velocity.x * this.car.body.velocity.x + this.car.body.velocity.y * this.car.body.velocity.y ); // Calculate zoom factor based on speed (1 at rest, 0.8 at max speed) const minZoom = 0.8; // 20% zoom out const maxZoom = 1.0; const speedFactor = Math.min(velocityMagnitude / this.maxSpeed, 1); const targetZoom = maxZoom - (speedFactor * (maxZoom - minZoom)); // Smoothly interpolate current zoom to target zoom const currentZoom = this.cameras.main.zoom; const smoothFactor = 0.1; const newZoom = currentZoom + (targetZoom - currentZoom) * smoothFactor; // Apply the zoom this.cameras.main.setZoom(newZoom); } // Only allow movement if racing has started if (!this.isRacing) return; // Rotation if (this.cursors.left.isDown) { this.car.body.setAngularVelocity(-150); } else if (this.cursors.right.isDown) { this.car.body.setAngularVelocity(150); } else { this.car.body.setAngularVelocity(0); } // Acceleration if (this.cursors.space.isDown || this.cursors.up.isDown) { // Calculate velocity based on car's rotation const rotation = Phaser.Math.DegToRad(this.car.angle - 90); const velocityX = Math.cos(rotation) * this.acceleration; const velocityY = Math.sin(rotation) * this.acceleration; this.car.body.velocity.x += velocityX; this.car.body.velocity.y += velocityY; } // Apply drag this.car.body.velocity.x *= this.drag; this.car.body.velocity.y *= this.drag; // Keep car within bounds if (this.car.x < 0) this.car.x = 0; if (this.car.x > 1600) this.car.x = 1600; if (this.car.y < 0) this.car.y = 0; if (this.car.y > 2400) this.car.y = 2400; // Add edge images to all corners // Bottom-right corner const edgeBottomRight = this.add.image(1600 - 45, 2400 - 45, 'edge'); edgeBottomRight.setOrigin(0.5); edgeBottomRight.setScale(0.2); edgeBottomRight.setAngle(0); // Bottom-left corner const edgeBottomLeft = this.add.image(45, 2400 - 45, 'edge'); edgeBottomLeft.setOrigin(0.5); edgeBottomLeft.setScale(0.2); edgeBottomLeft.setAngle(90); // Top-left corner const edgeTopLeft = this.add.image(45, 45, 'edge'); edgeTopLeft.setOrigin(0.5); edgeTopLeft.setScale(0.2); edgeTopLeft.setAngle(180); // Top-right corner const edgeTopRight = this.add.image(1600 - 45, 45, 'edge'); edgeTopRight.setOrigin(0.5); edgeTopRight.setScale(0.2); edgeTopRight.setAngle(270); } getShapeName(index) { const shapeNames = ['I', 'O', 'T', 'L', 'J', 'Z', 'S']; return shapeNames[index]; } updateNextPiecePreview() { // Clear previous preview this.previewContainer.removeAll(true); const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xff00ff, 0xffff00, 0x00ffff]; const color = colors[this.nextPieceIndex % colors.length]; const shape = JSON.parse(JSON.stringify(this.tetrisShapes[this.nextPieceIndex])); // Apply rotation to the preview shape for (let i = 0; i < this.nextPieceRotation; i++) { shape.reverse(); for (let y = 0; y < shape.length; y++) { for (let x = 0; x < y; x++) { [shape[x][y], shape[y][x]] = [shape[y][x], shape[x][y]]; } } } const previewBlockSize = 15; // Smaller block size for preview // Calculate shape dimensions const shapeWidth = shape[0].length * previewBlockSize; const shapeHeight = shape.length * previewBlockSize; // Create preview blocks for (let row = 0; row < shape.length; row++) { for (let col = 0; col < shape[row].length; col++) { if (shape[row][col]) { const block = this.add.rectangle( (col * previewBlockSize) - (shapeWidth / 2), (row * previewBlockSize) - (shapeHeight / 2), previewBlockSize * 0.9, previewBlockSize * 0.9, color ); const border = this.add.rectangle( (col * previewBlockSize) - (shapeWidth / 2), (row * previewBlockSize) - (shapeHeight / 2), previewBlockSize, previewBlockSize, 0x000000, 0 ); border.setStrokeStyle(1, 0x000000); this.previewContainer.add([border, block]); } } } } } class LeaderboardScene extends Phaser.Scene { constructor() { super({ key: 'LeaderboardScene' }); this.playerName = ''; this.finalTime = 0; } init(data) { // No initialization needed for view-only leaderboard } create() { const centerX = this.cameras.main.centerX; const centerY = this.cameras.main.centerY; // Create back button const backButton = this.add.rectangle(100, 50, 150, 50, 0x00ff00); this.add.text(100, 50, 'BACK', { fontSize: '24px', fill: '#000', fontFamily: 'Arial' }).setOrigin(0.5); backButton.setInteractive(); backButton.on('pointerdown', () => { this.scene.start('MenuScene'); }); // Add R key for returning to menu this.input.keyboard.on('keydown-R', () => { this.scene.start('MenuScene'); }); // Display current leaderboard this.displayLeaderboard(centerX, centerY); } // View-only leaderboard doesn't need these methods displayLeaderboard(centerX, startY) { const scores = JSON.parse(localStorage.getItem('tetrisRacingScores') || '[]'); // Add title this.add.text(centerX, startY - 150, 'LEADERBOARD', { fontSize: '48px', fill: '#fff', fontFamily: 'Arial' }).setOrigin(0.5); if (scores.length === 0) { this.add.text(centerX, startY, 'No scores yet!', { fontSize: '24px', fill: '#fff', fontFamily: 'Arial' }).setOrigin(0.5); } else { scores.forEach((score, index) => { this.add.text(centerX, startY + (index * 40) - 50, `${index + 1}. ${score.name} - ${(score.time / 1000).toFixed(3)}s`, { fontSize: '24px', fill: '#fff', fontFamily: 'Arial' }).setOrigin(0.5); }); } } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: container, dom: { createContainer: true }, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 1200, height: 600, physics: { default: 'arcade', arcade: { debug: false, gravity: { x: 0, y: 0 } } }, scene: [MenuScene, RacingGame, LeaderboardScene] }; window.phaserGame = new Phaser.Game(config);