class StartScreen extends Phaser.Scene { constructor() { super({ key: 'StartScreen' }); } preload() { this.load.audio('menuMusic', 'https://play.rosebud.ai/assets/Neon Reverie.mp3?dK5P'); this.load.image('rookieBackground', 'https://play.rosebud.ai/assets/rookie.png?oN0B'); } create() { // Play menu music this.sound.play('menuMusic', { loop: true }); // Add background const background = this.add.image(400, 300, 'rookieBackground'); background.setOrigin(0.5, 0.5); background.setDisplaySize(800, 600); // Fit to game dimensions // Add back button const backButton = this.add.text(20, 560, '← Back to Menu', { fontSize: '16px', fill: '#ffffff', backgroundColor: '#2196F3', padding: { x: 10, y: 5 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setInteractive(); // Add hover effects backButton.on('pointerover', () => backButton.setBackgroundColor('#3f51b5')); backButton.on('pointerout', () => backButton.setBackgroundColor('#2196F3')); // Add click handler backButton.on('pointerdown', () => { this.sound.stopAll(); this.scene.start('IntroScreen'); }); // Add welcome text this.add.text(400, 50, 'Rookie Series', { fontSize: '48px', fill: '#fff', stroke: '#000000', strokeThickness: 4 }).setOrigin(0.5); // Create track selection buttons const tracks = [{ name: 'Oval Track', id: 'oval' }, { name: 'Rookie Speedway', id: 'star' }, { name: 'Soft Apex Line', id: 'figure8' }, { name: 'Entry Circuit', id: 'twister' }]; tracks.forEach((track, index) => { const button = this.add.text(400, 200 + (index * 80), track.name, { fontSize: '32px', fill: '#fff', backgroundColor: '#2196F3', padding: { x: 30, y: 15 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }) .setOrigin(0.5) .setInteractive(); // Add hover effects button.on('pointerover', () => button.setBackgroundColor('#3f51b5')); button.on('pointerout', () => button.setBackgroundColor('#2196F3')); // Add click handler button.on('pointerdown', () => { if (track.id === 'oval' || track.id === 'star' || track.id === 'figure8' || track.id === 'twister') { // Fetch the appropriate track file content const trackUrl = track.id === 'oval' ? 'https://play.rosebud.ai/assets/Oval.jsx?Lysh' : track.id === 'star' ? 'https://play.rosebud.ai/assets/Rookie Speedway.jsx?gOEd' : track.id === 'figure8' ? 'https://play.rosebud.ai/assets/Soft Apex.jsx?tAdh' : 'https://play.rosebud.ai/assets/Entry Circuit.jsx?2ED9'; fetch(trackUrl) .then(response => response.text()) .then(content => { // Extract the trackData object from the JSX content const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); this.sound.stopAll(); // Pass the extracted track data to the RacingGame scene this.scene.start('RacingGame', { trackId: track.id, trackData: trackData, autoStart: true }); } }) .catch(error => { console.error('Error loading track:', error); // Fallback to starting the game without track data this.sound.stopAll(); this.scene.start('RacingGame', { trackId: track.id }); }); } else { this.sound.stopAll(); this.scene.start('RacingGame', { trackId: track.id, autoStart: true }); } }); }); } } class RacingGame extends Phaser.Scene { constructor() { super({ key: 'RacingGame' }); this.player = null; this.useGamepad = false; // Flag to track if gamepad control is enabled this.gamepad = null; // Store the active gamepad this.hasStartedFirstLap = false; // Flag to track if first lap has started this.totalLaps = 3; // Default number of laps this.raceStartTime = 0; // Track when race starts this.totalRaceTime = 0; // Track total race time this.raceTimeText = null; // Display for race time this.finishPosition = 0; // Track the finishing positions this.checkpointTexts = []; // Array to store checkpoint number texts this.lapCounters = []; // Array to store lap counter texts this.raceStarted = false; // New flag to control race start this.countdownText = null; // Reference to countdown text this.opponentLaps = [0, 0, 0]; // Track laps for each opponent this.opponents = []; this.opponents.justCrossedLine = false; // Initialize justCrossedLine for each opponent this.isErasing = false; this.showAIPath = false; this.isPlacingCheckpoints = false; this.opponents = []; this.checkpoints = []; this.aiPath = null; // Store the AI path this.aiCheckpointIndex = Array(3).fill(0); // Track current checkpoint for each AI this.isDrawingSpawnLine = false; this.justCrossedLine = false; // Prevent multiple line crosses this.finishLine = null; // Physics object for finish line this.startFinishText = null; // Text indicating start/finish line this.spawnLinePoints = []; this.spawnLine = null; this.graphics = null; this.isDrawing = false; this.drawingPoints = []; this.isLineDrawingEnabled = false; this.savedLines = []; // Array to store all saved lines this.playerLap = 0; this.currentCheckpoint = 0; this.previousRotation = 0; this.currentSpeed = 0; this.maxSpeed = 300; this.currentTurnSpeed = 0; this.maxTurnSpeed = 150; // Maximum turning speed this.turnAcceleration = 15; // How quickly turning speed increases this.editorOpen = false; } preload() { // Load all game assets this.load.image('resultsBg', 'https://play.rosebud.ai/assets/background tutorial.png?lOF9'); this.load.audio('editorMusic', 'https://play.rosebud.ai/assets/Neon Reverie.mp3?dK5P'); this.load.audio('raceMusic1', 'https://play.rosebud.ai/assets/Fast Lane Fever.mp3?zQ43'); this.load.audio('raceMusic2', 'https://play.rosebud.ai/assets/Pixel Skylines.mp3?u6ap'); this.load.image('track', 'https://play.rosebud.ai/assets/Track.png?fOaa'); this.load.image('playerCar', 'https://play.rosebud.ai/assets/Greenkart.PNG?vZKO'); this.load.image('opponentCar1', 'https://play.rosebud.ai/assets/Orangekart.PNG?VrFT'); this.load.image('opponentCar2', 'https://play.rosebud.ai/assets/Bluekart.PNG?ZliW'); this.load.image('opponentCar3', 'https://play.rosebud.ai/assets/Yellowkart.PNG?3Gd8'); } create(data) { // Store mode and autoStart flag this.editorMode = data.mode === 'editor'; this.autoStart = data.autoStart || false; // Create background const background = this.add.tileSprite(0, 0, 800, 600, 'track'); background.setOrigin(0, 0); // Initialize graphics for track drawing immediately this.graphics = this.add.graphics(); this.graphics.lineStyle(4, 0xffffff, 1); // Draw track walls if ((data.trackId === 'oval' || data.trackId === 'star' || data.trackId === 'figure8' || data.trackId === 'twister') && data.trackData) { // Load race configuration if (data.trackData.raceConfig && data.trackData.raceConfig.totalLaps) { this.totalLaps = data.trackData.raceConfig.totalLaps; } // Store and immediately draw the track data this.savedLines = data.trackData.walls || []; this.aiPath = data.trackData.aiPath || null; this.spawnLinePoints = data.trackData.startFinish?.points || []; // Draw the walls if (this.savedLines.length > 0) { this.savedLines.forEach(line => { this.graphics.beginPath(); this.graphics.moveTo(line[0].x, line[0].y); for (let i = 1; i < line.length; i++) { this.graphics.lineTo(line[i].x, line[i].y); } this.graphics.strokePath(); }); } // Draw the spawn/finish line if (this.spawnLinePoints.length === 2) { this.spawnLine = this.add.graphics(); this.spawnLine.lineStyle(4, 0x000000, 1); this.spawnLine.beginPath(); this.spawnLine.moveTo(this.spawnLinePoints[0].x, this.spawnLinePoints[0].y); this.spawnLine.lineTo(this.spawnLinePoints[1].x, this.spawnLinePoints[1].y); this.spawnLine.strokePath(); // Add the finish line collision rectangle const length = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); this.finishLine = this.add.rectangle( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, length, 20 ); const angle = Phaser.Math.Angle.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); this.finishLine.setRotation(angle); this.physics.add.existing(this.finishLine, true); // Add start/finish text this.startFinishText = this.add.text( (this.spawnLinePoints[0].x + this.spawnLinePoints[1].x) / 2, (this.spawnLinePoints[0].y + this.spawnLinePoints[1].y) / 2, 'START/FINISH', { fontSize: '16px', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 5, y: 2 } } ).setOrigin(0.5).setAngle(Phaser.Math.RadToDeg(angle)); } } // Load track data if provided (for Oval Track) if ((data.trackId === 'oval' || data.trackId === 'figure8' || data.trackId === 'twister') && data.trackData) { // Load race configuration if (data.trackData.raceConfig && data.trackData.raceConfig.totalLaps) { this.totalLaps = data.trackData.raceConfig.totalLaps; } // Store and draw the track data this.savedLines = data.trackData.walls || []; this.aiPath = data.trackData.aiPath || null; this.spawnLinePoints = data.trackData.startFinish?.points || []; // Draw the walls if (this.savedLines.length > 0) { this.graphics.clear(); this.graphics.lineStyle(4, 0xffffff, 1); this.savedLines.forEach(line => { this.graphics.beginPath(); this.graphics.moveTo(line[0].x, line[0].y); for (let i = 1; i < line.length; i++) { this.graphics.lineTo(line[i].x, line[i].y); } this.graphics.strokePath(); }); } // Draw the spawn/finish line if (this.spawnLinePoints.length === 2) { // Create spawn line graphics this.spawnLine = this.add.graphics(); this.spawnLine.lineStyle(4, 0x000000, 1); this.spawnLine.beginPath(); this.spawnLine.moveTo(this.spawnLinePoints[0].x, this.spawnLinePoints[0].y); this.spawnLine.lineTo(this.spawnLinePoints[1].x, this.spawnLinePoints[1].y); this.spawnLine.strokePath(); // Add the finish line collision rectangle const length = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); this.finishLine = this.add.rectangle( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, length, 20 ); const angle = Phaser.Math.Angle.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); this.finishLine.setRotation(angle); this.physics.add.existing(this.finishLine, true); // Add start/finish text this.startFinishText = this.add.text( (this.spawnLinePoints[0].x + this.spawnLinePoints[1].x) / 2, (this.spawnLinePoints[0].y + this.spawnLinePoints[1].y) / 2, 'START/FINISH', { fontSize: '16px', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 5, y: 2 } } ).setOrigin(0.5).setAngle(Phaser.Math.RadToDeg(angle)); } } // Initialize race timer this.raceStartTime = this.time.now; // Create background for timer const timerBg = this.add.graphics(); timerBg.setScrollFactor(0).setDepth(999); // Fill main background timerBg.fillStyle(0x000000, 0.6); timerBg.fillRoundedRect(660, 560, 120, 30, 8); // Add glossy effect timerBg.fillStyle(0xffffff, 0.1); timerBg.fillRoundedRect(660, 560, 120, 15, { tl: 8, tr: 8, bl: 0, br: 0 }); // Add border timerBg.lineStyle(2, 0xffffff, 0.8); timerBg.strokeRoundedRect(660, 560, 120, 30, 8); // Create timer text with enhanced styling this.raceTimeText = this.add.text(720, 575, '00:00.00', { fontSize: '18px', fontStyle: 'bold', fill: '#ffffff', padding: { x: 10, y: 5 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setOrigin(0.5).setScrollFactor(0).setDepth(1000); // If in editor mode, automatically open the editor if (this.editorMode) { this.editorOpen = true; // Play editor music this.sound.play('editorMusic', { loop: true }); } // Add border around the track const border = this.add.graphics(); border.lineStyle(6, 0xffffff); // White border, 6 pixels thick border.strokeRect(3, 3, 794, 594); // Slightly adjusted inset to accommodate thinner border this.savedLines.push([{ x: 4, y: 4 }, { x: 796, y: 4 }, // Top line { x: 796, y: 596 }, { x: 4, y: 596 }, // Bottom line { x: 4, y: 596 }, { x: 4, y: 4 } // Left line to close the shape ]); // Set up mouse input for drawing // Set up mouse input this.input.on('pointerdown', (pointer) => { if (!this.editorOpen || !this.isLineDrawingEnabled) return; this.isDrawing = true; this.drawingPoints = []; this.drawingPoints.push({ x: pointer.x, y: pointer.y }); }); this.input.on('pointermove', (pointer) => { if (!this.isDrawing || !this.editorOpen || !this.isLineDrawingEnabled) return; this.drawingPoints.push({ x: pointer.x, y: pointer.y }); // Redraw all saved lines first this.graphics.clear(); if (this.savedLines.length > 0) { this.graphics.lineStyle(4, 0xffffff); this.savedLines.forEach(line => { this.graphics.beginPath(); this.graphics.moveTo(line[0].x, line[0].y); for (let i = 1; i < line.length; i++) { this.graphics.lineTo(line[i].x, line[i].y); } this.graphics.strokePath(); }); } // Draw the current line being drawn this.graphics.lineStyle(4, 0xffffff); this.graphics.beginPath(); this.graphics.moveTo(this.drawingPoints[0].x, this.drawingPoints[0].y); for (let i = 1; i < this.drawingPoints.length; i++) { this.graphics.lineTo(this.drawingPoints[i].x, this.drawingPoints[i].y); } this.graphics.strokePath(); }); this.input.on('pointerup', () => { this.isDrawing = false; }); // Create checkpoints for lap counting and AI guidance this.createCheckpoints(); // Create player with proper sprite const playerScale = 0.045; // Reduced by 25% from 0.06 this.player = this.add.sprite(400, 500, 'playerCar'); this.player.setScale(playerScale); this.player.setDepth(1); this.physics.add.existing(this.player); this.player.body.setDamping(true); this.player.body.setDrag(0.99); this.player.body.setAngularDrag(0.99); this.player.body.setMaxSpeed(300); // Create AI opponents with proper sprites const startPositions = [520, 540, 560]; const opponentSprites = ['opponentCar1', 'opponentCar2', 'opponentCar3']; const opponentScales = [0.045, 0.045, 0.045]; // All karts reduced by 25% // Define speed ranges for each AI car const speedRanges = [{ min: 250, max: 300 }, // Orange - Medium { min: 270, max: 330 }, // Blue - Fast { min: 220, max: 290 } // Yellow - Slower ]; for (let i = 0; i < 3; i++) { const opponent = this.add.sprite(400, startPositions[i], opponentSprites[i]); opponent.setScale(opponentScales[i]); opponent.setDepth(1); this.physics.add.existing(opponent); opponent.body.setDamping(true); opponent.body.setDrag(0.99); opponent.body.setAngularDrag(0.99); opponent.body.setMaxSpeed(speedRanges[i].max); opponent.currentCheckpoint = 0; opponent.currentSpeed = 0; opponent.currentTurnSpeed = 0; opponent.previousRotation = 0; // Assign random speed within the car's range opponent.maxSpeed = Phaser.Math.Between(speedRanges[i].min, speedRanges[i].max); opponent.hasStartedFirstLap = false; // Initialize first lap flag opponent.maxTurnSpeed = 150; opponent.turnAcceleration = 15; // Add speed variation properties opponent.speedUpdateTime = 0; opponent.speedRange = speedRanges[i]; // Add path following characteristics opponent.pathingAccuracy = Phaser.Math.FloatBetween(0.85, 1.0); // How accurately they follow the path opponent.drivingStyle = { turnVariation: Phaser.Math.FloatBetween(-0.1, 0.1), // Individual turning bias pathDeviation: Phaser.Math.FloatBetween(0.9, 1.1) // How much they deviate from ideal path }; this.opponents.push(opponent); } // Setup input with both WASD and arrow keys this.keys = this.input.keyboard.addKeys({ 'W': Phaser.Input.Keyboard.KeyCodes.W, 'S': Phaser.Input.Keyboard.KeyCodes.S, 'A': Phaser.Input.Keyboard.KeyCodes.A, 'D': Phaser.Input.Keyboard.KeyCodes.D, 'P': Phaser.Input.Keyboard.KeyCodes.P, 'UP': Phaser.Input.Keyboard.KeyCodes.UP, 'DOWN': Phaser.Input.Keyboard.KeyCodes.DOWN, 'LEFT': Phaser.Input.Keyboard.KeyCodes.LEFT, 'RIGHT': Phaser.Input.Keyboard.KeyCodes.RIGHT }); // Add P key handler for editor this.input.keyboard.on('keydown-P', (event) => { this.editorOpen = !this.editorOpen; if (this.editorOpen) { const pointer = this.input.activePointer; this.editorUI.setPosition(pointer.x, pointer.y); } this.editorUI.setVisible(this.editorOpen); }); // Add UI for lap counters const carColors = ['#00ff00', '#FFA500', '#87CEEB', '#FFFF00']; // Player + 3 opponents (Sky blue for Blue car) const carLabels = ['Player', 'Orange', 'Blue', 'Yellow']; // Create lap counters across the top for (let i = 0; i < 4; i++) { const xPos = 150 + (i * 160); // Create background rectangle // Create gradient background const bgRect = this.add.graphics(); bgRect.setScrollFactor(0); // Create gradient fill bgRect.fillStyle(0x000000, 0.6); bgRect.fillRoundedRect(xPos - 70, 10, 140, 40, 15); // Add glossy effect bgRect.fillStyle(0xffffff, 0.1); bgRect.fillRoundedRect(xPos - 70, 10, 140, 20, { tl: 15, tr: 15, bl: 0, br: 0 }); // Add border bgRect.lineStyle(2, carColors[i].replace('#', '0x'), 0.8); bgRect.strokeRoundedRect(xPos - 70, 10, 140, 40, 15); // Create lap counter text with enhanced styling const counter = this.add.text(xPos, 30, `${carLabels[i]}: ${this.totalLaps}`, { fontSize: '24px', fontStyle: 'bold', fill: carColors[i], padding: { x: 10, y: 5 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setOrigin(0.5, 0.5) .setScrollFactor(0); this.lapCounters.push(counter); } // Create Editor button // Create mute button // Create background for sound button with gradient and border const muteBg = this.add.graphics(); muteBg.fillStyle(0x000000, 0.6); muteBg.fillRoundedRect(16, 570, 70, 25, 8); muteBg.fillStyle(0xffffff, 0.1); muteBg.fillRoundedRect(16, 570, 70, 12, { tl: 8, tr: 8, bl: 0, br: 0 }); muteBg.lineStyle(2, 0xFFA500, 0.8); muteBg.strokeRoundedRect(16, 570, 70, 25, 8); const muteButton = this.add.text(51, 582, '🔊 Sound', { fontSize: '10px', fill: '#fff', padding: { x: 7, y: 4 } }).setOrigin(0.5).setInteractive(); // Add hover effect for mute button muteButton.on('pointerover', () => { muteBg.clear(); muteBg.fillStyle(0x000000, 0.8); // Darker background on hover muteBg.fillRoundedRect(16, 570, 70, 25, 8); muteBg.fillStyle(0xffffff, 0.15); // Slightly brighter highlight muteBg.fillRoundedRect(16, 570, 70, 12, { tl: 8, tr: 8, bl: 0, br: 0 }); muteBg.lineStyle(2, 0xFFA500, 1); // Brighter border on hover muteBg.strokeRoundedRect(16, 570, 70, 25, 8); }); muteButton.on('pointerout', () => { muteBg.clear(); muteBg.fillStyle(0x000000, 0.6); muteBg.fillRoundedRect(16, 570, 70, 25, 8); muteBg.fillStyle(0xffffff, 0.1); muteBg.fillRoundedRect(16, 570, 70, 12, { tl: 8, tr: 8, bl: 0, br: 0 }); muteBg.lineStyle(2, 0xFFA500, 0.8); muteBg.strokeRoundedRect(16, 570, 70, 25, 8); }); // Add click handler for mute button muteButton.on('pointerdown', () => { if (this.sound.mute) { this.sound.setMute(false); muteButton.setText('🔊 Sound'); } else { this.sound.setMute(true); muteButton.setText('🔇 Muted'); } }); // Create editor button and position it next to mute button // Create background for editor button with gradient and border const editorBg = this.add.graphics(); editorBg.fillStyle(0x000000, 0.6); editorBg.fillRoundedRect(91, 570, 70, 25, 8); editorBg.fillStyle(0xffffff, 0.1); editorBg.fillRoundedRect(91, 570, 70, 12, { tl: 8, tr: 8, bl: 0, br: 0 }); editorBg.lineStyle(2, 0xFFA500, 0.8); editorBg.strokeRoundedRect(91, 570, 70, 25, 8); const editorButton = this.add.text(126, 582, '⚙️ Options', { fontSize: '10px', fill: '#fff', padding: { x: 7, y: 4 } }).setOrigin(0.5).setInteractive(); // Add hover effect for editor button editorButton.on('pointerover', () => { editorBg.clear(); editorBg.fillStyle(0x000000, 0.8); // Darker background on hover editorBg.fillRoundedRect(91, 570, 70, 25, 8); editorBg.fillStyle(0xffffff, 0.15); // Slightly brighter highlight editorBg.fillRoundedRect(91, 570, 70, 12, { tl: 8, tr: 8, bl: 0, br: 0 }); editorBg.lineStyle(2, 0xFFA500, 1); // Brighter border on hover editorBg.strokeRoundedRect(91, 570, 70, 25, 8); }); editorButton.on('pointerout', () => { editorBg.clear(); editorBg.fillStyle(0x000000, 0.6); editorBg.fillRoundedRect(91, 570, 70, 25, 8); editorBg.fillStyle(0xffffff, 0.1); editorBg.fillRoundedRect(91, 570, 70, 12, { tl: 8, tr: 8, bl: 0, br: 0 }); editorBg.lineStyle(2, 0xFFA500, 0.8); editorBg.strokeRoundedRect(91, 570, 70, 25, 8); }); // Create UI container (initially hidden) - positioned above options button this.editorUI = this.add.container(100, 515); // Moved to just above the options button // Add background panel to block clicks through UI const uiBackground = this.add.rectangle(0, -75, 150, 75, 0x000000, 0.01); uiBackground.setOrigin(0, 0); uiBackground.setInteractive(); this.editorUI.add(uiBackground); // Create options // Style configuration for all options const optionStyle = { fontSize: '11px', fill: '#fff', backgroundColor: '#2196F3', padding: { x: 4, y: 3 }, borderRadius: 6, shadow: { offsetX: 1, offsetY: 1, color: '#000000', blur: 2, fill: true } }; const raceButton = this.add.text(0, -75, '🏎️ Restart Race', optionStyle).setInteractive(); const gamepadButton = this.add.text(0, -51, '🎮 Drive with Gamepad', optionStyle).setInteractive(); const menuButton = this.add.text(0, -27, '🏠 Back to Menu', optionStyle).setInteractive(); // Add all UI elements to container, ensuring they're added after the background const allOptions = [raceButton, gamepadButton, menuButton]; // Auto-start the race if flag is set if (this.autoStart && this.spawnLinePoints.length === 2) { this.time.delayedCall(500, () => { raceButton.emit('pointerdown'); }); } // Add click handler for menu button menuButton.on('pointerdown', () => { window.location.reload(); }); allOptions.forEach(option => { this.editorUI.add(option); option.setDepth(1); // Add hover effects option.on('pointerover', () => { option.setBackgroundColor('#3f51b5'); option.setPadding(6, 5, 6, 3); // Create pressed effect }); option.on('pointerout', () => { option.setBackgroundColor('#2196F3'); option.setPadding(6, 4, 6, 4); // Reset padding }); }); this.editorUI.setVisible(false); // Add click handler for checkpoint placement this.input.on('pointerdown', (pointer) => { if (this.isPlacingCheckpoints && this.editorOpen) { // Check if click is not on the editor UI const editorBounds = this.editorUI.getBounds(); if (!Phaser.Geom.Rectangle.Contains(editorBounds, pointer.x, pointer.y)) { const checkpoint = this.add.text(pointer.x, pointer.y, String(this.checkpoints.length), { fontSize: '24px', fill: '#00ff00' }); checkpoint.setOrigin(0.5); // Add a visual circle around the checkpoint const circle = this.add.circle(pointer.x, pointer.y, 15, 0x00ff00, 0.5); this.checkpoints.push({ x: pointer.x, y: pointer.y, text: checkpoint, circle: circle }); } } }); // Add click handlers editorButton.on('pointerdown', () => { this.editorOpen = !this.editorOpen; this.editorUI.setVisible(this.editorOpen); // Redraw all saved lines when toggling editor this.graphics.clear(); if (this.savedLines.length > 0) { this.graphics.lineStyle(4, 0xffffff); this.savedLines.forEach(line => { this.graphics.beginPath(); this.graphics.moveTo(line[0].x, line[0].y); for (let i = 1; i < line.length; i++) { this.graphics.lineTo(line[i].x, line[i].y); } this.graphics.strokePath(); }); } }); // Add click handler for race button raceButton.on('pointerdown', () => { if (this.spawnLinePoints.length === 2) { // Only allow race start if spawn line exists this.hasStartedFirstLap = false; // Reset player first lap flag this.opponents.forEach(opponent => opponent.hasStartedFirstLap = false); // Reset AI first lap flags // Hide editor UI and set editorOpen to false this.editorUI.setVisible(false); this.editorOpen = false; // Reset lap counters, positions and AI pathing this.aiCheckpointIndex = Array(3).fill(0); // Reset AI to first checkpoint this.playerLap = 0; this.opponentLaps = [0, 0, 0]; this.finishPosition = 0; // Reset lap counter displays this.lapCounters[0].setText(`Player: ${this.totalLaps}`); this.lapCounters[1].setText(`Orange: ${this.totalLaps}`); this.lapCounters[2].setText(`Blue: ${this.totalLaps}`); this.lapCounters[3].setText(`Yellow: ${this.totalLaps}`); // Calculate line angle and spacing for car positioning const lineAngle = Phaser.Math.Angle.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); const lineLength = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); // Reset car positions const carStartOffset = 50; // Calculate positions for 4 cars (1 player + 3 AI) evenly spaced const totalCars = 4; const spacing = 1 / (totalCars - 1); // Equal spacing between cars // Position player at start (0% along the line) const playerT = 0; // Calculate offset from spawn point const spawnDirection = { x: this.spawnLinePoints[1].x - this.spawnLinePoints[0].x, y: this.spawnLinePoints[1].y - this.spawnLinePoints[0].y }; const length = Math.sqrt(spawnDirection.x * spawnDirection.x + spawnDirection.y * spawnDirection.y); const normalizedDirection = { x: spawnDirection.x / length, y: spawnDirection.y / length }; this.player.x = this.spawnLinePoints[0].x + (normalizedDirection.x * 20); this.player.y = this.spawnLinePoints[0].y + (normalizedDirection.y * 20); this.player.rotation = lineAngle - Math.PI / 2; this.player.body.setVelocity(0, 0); this.player.body.setAngularVelocity(0); this.currentSpeed = 0; this.currentTurnSpeed = 0; // Reset AI cars positions and physics this.opponents.forEach((opponent, index) => { if (!opponent || !opponent.body) return; // Skip if opponent or its body is undefined // Position each AI car at their respective positions (33%, 66%, 100% along the line) const t = spacing * (index + 1); if (index === 2) { // Yellow car // Calculate position with offset for yellow car const offsetDirection = { x: this.spawnLinePoints[0].x - this.spawnLinePoints[1].x, y: this.spawnLinePoints[0].y - this.spawnLinePoints[1].y }; const offsetLength = Math.sqrt(offsetDirection.x * offsetDirection.x + offsetDirection.y * offsetDirection.y); const normalizedOffset = { x: offsetDirection.x / offsetLength, y: offsetDirection.y / offsetLength }; opponent.x = Phaser.Math.Linear(this.spawnLinePoints[0].x, this.spawnLinePoints[1].x, t) + (normalizedOffset.x * 20); opponent.y = Phaser.Math.Linear(this.spawnLinePoints[0].y, this.spawnLinePoints[1].y, t) + (normalizedOffset.y * 20); } else { opponent.x = Phaser.Math.Linear(this.spawnLinePoints[0].x, this.spawnLinePoints[1].x, t); opponent.y = Phaser.Math.Linear(this.spawnLinePoints[0].y, this.spawnLinePoints[1].y, t); } opponent.rotation = lineAngle - Math.PI / 2; if (opponent.body) { opponent.body.setVelocity(0, 0); opponent.body.setAngularVelocity(0); } opponent.currentSpeed = 0; opponent.currentTurnSpeed = 0; }); // Create and display the ready button // Create glowing background for ready button const glowGraphics = this.add.graphics(); glowGraphics.setScrollFactor(0); // Add pulsing glow effect this.tweens.add({ targets: glowGraphics, alpha: { from: 0.4, to: 0.7 }, duration: 800, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); // Create a pulsing glow circle behind the text const glowCircle = this.add.circle(400, 300, 120, 0x00ff00, 0.3); glowCircle.setScrollFactor(0); // Add pulse effect to the glow this.tweens.add({ targets: glowCircle, scaleX: 1.2, scaleY: 1.2, alpha: 0.1, duration: 800, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); const readyButton = this.add.text(400, 300, '🏁 READY!', { fontSize: '48px', fill: '#ffffff', padding: { x: 20, y: 10 }, shadow: { offsetX: 3, offsetY: 3, color: '#000000', blur: 15, fill: true } }) .setAlpha(1) .setOrigin(0.5) .setInteractive() .setScrollFactor(0); // Disable car controls until race starts this.raceStarted = false; readyButton.on('pointerdown', () => { readyButton.destroy(); glowCircle.destroy(); // Stop editor music before starting race music this.sound.stopAll(); // Randomly choose and start background music const musicChoice = Math.random() < 0.5 ? 'raceMusic1' : 'raceMusic2'; this.sound.play(musicChoice, { loop: true }); this.startCountdown(); }); // Visual feedback for race button raceButton.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { raceButton.setBackgroundColor('#444'); }); } }); // Add spawn line drawing handler this.input.on('pointerdown', (pointer) => { if (this.isDrawingSpawnLine && this.editorOpen) { const editorBounds = this.editorUI.getBounds(); if (!Phaser.Geom.Rectangle.Contains(editorBounds, pointer.x, pointer.y)) { // Add point to array this.spawnLinePoints.push({ x: pointer.x, y: pointer.y }); // Create and store point marker const marker = this.add.circle(pointer.x, pointer.y, 5, 0x000000); this.spawnPointMarkers.push(marker); // If we have two points, draw the line if (this.spawnLinePoints.length === 2) { if (this.spawnLine) { this.spawnLine.destroy(); } // Draw the spawn line this.spawnLine = this.add.graphics(); this.spawnLine.lineStyle(4, 0x000000); this.spawnLine.beginPath(); this.spawnLine.moveTo(this.spawnLinePoints[0].x, this.spawnLinePoints[0].y); this.spawnLine.lineTo(this.spawnLinePoints[1].x, this.spawnLinePoints[1].y); this.spawnLine.strokePath(); // Create an invisible finish line rectangle for collision detection if (this.finishLine) { this.finishLine.destroy(); } // Create a thin rectangle along the spawn line for finish line detection const angle = Phaser.Math.Angle.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); const length = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); this.finishLine = this.add.rectangle( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, length, 20 // Increased height for better detection ); this.finishLine.setRotation(angle); this.physics.add.existing(this.finishLine, true); // Add text to indicate start/finish if (this.startFinishText) { this.startFinishText.destroy(); } this.startFinishText = this.add.text( (this.spawnLinePoints[0].x + this.spawnLinePoints[1].x) / 2, (this.spawnLinePoints[0].y + this.spawnLinePoints[1].y) / 2, 'START/FINISH', { fontSize: '16px', fill: '#ffffff', backgroundColor: '#000' } ).setOrigin(0.5).setAngle(Phaser.Math.RadToDeg(angle)); // Add visual indicators for start and end this.spawnLine.fillStyle(0x000000); this.spawnLine.fillCircle(this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, 5); this.spawnLine.fillCircle(this.spawnLinePoints[1].x, this.spawnLinePoints[1].y, 5); // Clear the temporary point markers this.spawnPointMarkers.forEach(marker => marker.destroy()); this.spawnPointMarkers = []; // Reset drawing state this.isDrawingSpawnLine = false; option7.setBackgroundColor('#2196F3'); // Restore hover effects when inactive option7.on('pointerover', () => { option7.setBackgroundColor('#3f51b5'); option7.setPadding(6, 5, 6, 3); }); option7.on('pointerout', () => { option7.setBackgroundColor('#2196F3'); option7.setPadding(6, 4, 6, 4); }); // Position cars along the line // Calculate line angle and length const lineAngle = Phaser.Math.Angle.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); const lineLength = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); // Calculate positions for all cars const totalCars = 4; // Player + 3 AI cars // Position player at the start // Calculate offset from spawn point const spawnDirection = { x: this.spawnLinePoints[1].x - this.spawnLinePoints[0].x, y: this.spawnLinePoints[1].y - this.spawnLinePoints[0].y }; const spawnLineLength = Math.sqrt(spawnDirection.x * spawnDirection.x + spawnDirection.y * spawnDirection.y); const normalizedDirection = { x: spawnDirection.x / spawnLineLength, y: spawnDirection.y / spawnLineLength }; this.player.x = this.spawnLinePoints[0].x + (normalizedDirection.x * 20); this.player.y = this.spawnLinePoints[0].y + (normalizedDirection.y * 20); this.player.rotation = lineAngle - Math.PI / 2; // Position AI cars with precise spacing this.opponents.forEach((opponent, index) => { let t = (index + 1) / (totalCars - 1); // This ensures even distribution (0.33, 0.66, 1.0) // Special handling for yellow car (index 2) if (index === 2) { // Move yellow car 20 pixels in from its end position const spawnDirection = { x: this.spawnLinePoints[0].x - this.spawnLinePoints[1].x, y: this.spawnLinePoints[0].y - this.spawnLinePoints[1].y }; const length = Math.sqrt(spawnDirection.x * spawnDirection.x + spawnDirection.y * spawnDirection.y); const normalizedDirection = { x: spawnDirection.x / length, y: spawnDirection.y / length }; opponent.x = Phaser.Math.Linear(this.spawnLinePoints[0].x, this.spawnLinePoints[1].x, t) + (normalizedDirection.x * 20); opponent.y = Phaser.Math.Linear(this.spawnLinePoints[0].y, this.spawnLinePoints[1].y, t) + (normalizedDirection.y * 20); } else { opponent.x = Phaser.Math.Linear(this.spawnLinePoints[0].x, this.spawnLinePoints[1].x, t); opponent.y = Phaser.Math.Linear(this.spawnLinePoints[0].y, this.spawnLinePoints[1].y, t); } opponent.rotation = lineAngle - Math.PI / 2; }); // Disable car controls until race starts this.raceStarted = false; } } } }); // Removing save/load track functionality as it's no longer needed // Add gamepad button handler gamepadButton.on('pointerdown', () => { this.useGamepad = !this.useGamepad; if (this.useGamepad) { gamepadButton.setBackgroundColor('#4CAF50'); gamepadButton.setText('🎮 Gamepad Active'); // Remove hover effect while active gamepadButton.off('pointerover'); gamepadButton.off('pointerout'); // Remove any existing listeners this.input.gamepad.off('connected'); this.input.gamepad.off('disconnected'); // Check if gamepad is already connected if (this.input.gamepad.total > 0) { this.gamepad = this.input.gamepad.getPad(0); } // Start checking for gamepad this.input.gamepad.on('connected', (pad) => { this.gamepad = pad; this.useGamepad = true; gamepadButton.setBackgroundColor('#4CAF50'); gamepadButton.setText('🎮 Gamepad Active'); }); this.input.gamepad.on('disconnected', (pad) => { this.gamepad = null; this.useGamepad = false; gamepadButton.setBackgroundColor('#2196F3'); gamepadButton.setText('🎮 Drive with Gamepad'); }); } else { gamepadButton.setBackgroundColor('#2196F3'); gamepadButton.setText('🎮 Drive with Gamepad'); // Restore hover effects when inactive gamepadButton.on('pointerover', () => { gamepadButton.setBackgroundColor('#3f51b5'); gamepadButton.setPadding(6, 5, 6, 3); }); gamepadButton.on('pointerout', () => { gamepadButton.setBackgroundColor('#2196F3'); gamepadButton.setPadding(6, 4, 6, 4); }); this.gamepad = null; } }); } handleErase(pointer) { if (!this.isErasing || !this.editorOpen) return; const px = pointer.x; const py = pointer.y; // Check each saved line for proximity to click this.savedLines = this.savedLines.filter(line => { for (let i = 1; i < line.length; i++) { const x1 = line[i - 1].x; const y1 = line[i - 1].y; const x2 = line[i].x; const y2 = line[i].y; // Calculate distance from point to line segment const distance = this.pointToLineDistance(px, py, x1, y1, x2, y2); if (distance < 20) { // If click is within 20 pixels of the line return false; // Remove this line } } return true; // Keep this line }); // Redraw remaining lines this.graphics.clear(); if (this.savedLines.length > 0) { this.graphics.lineStyle(4, 0xffffff); this.savedLines.forEach(line => { this.graphics.beginPath(); this.graphics.moveTo(line[0].x, line[0].y); for (let i = 1; i < line.length; i++) { this.graphics.lineTo(line[i].x, line[i].y); } this.graphics.strokePath(); }); } } pointToLineDistance(px, py, x1, y1, x2, y2) { const A = px - x1; const B = py - y1; const C = x2 - x1; const D = y2 - y1; const dot = A * C + B * D; const lenSq = C * C + D * D; let param = -1; if (lenSq !== 0) param = dot / lenSq; let xx, yy; if (param < 0) { xx = x1; yy = y1; } else if (param > 1) { xx = x2; yy = y2; } else { xx = x1 + param * C; yy = y1 + param * D; } const dx = px - xx; const dy = py - yy; return Math.sqrt(dx * dx + dy * dy); } loadTrackData(trackData) { // Clear existing track elements if (this.spawnLine) this.spawnLine.destroy(); if (this.finishLine) this.finishLine.destroy(); if (this.startFinishText) this.startFinishText.destroy(); this.graphics.clear(); this.savedLines = []; this.aiPath = null; this.spawnLinePoints = []; // Load walls this.savedLines = trackData.walls; if (this.savedLines.length > 0) { this.graphics.lineStyle(4, 0xffffff); this.savedLines.forEach(line => { this.graphics.beginPath(); this.graphics.moveTo(line[0].x, line[0].y); for (let i = 1; i < line.length; i++) { this.graphics.lineTo(line[i].x, line[i].y); } this.graphics.strokePath(); }); } // Load AI path if (trackData.aiPath) { this.aiPath = trackData.aiPath; } // Load start/finish line if (trackData.startFinish && trackData.startFinish.points) { this.spawnLinePoints = trackData.startFinish.points; // Recreate the finish line this.spawnLine = this.add.graphics(); this.spawnLine.lineStyle(4, 0xff00ff); this.spawnLine.beginPath(); this.spawnLine.moveTo(this.spawnLinePoints[0].x, this.spawnLinePoints[0].y); this.spawnLine.lineTo(this.spawnLinePoints[1].x, this.spawnLinePoints[1].y); this.spawnLine.strokePath(); // Recreate finish line collision const length = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); this.finishLine = this.add.rectangle( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, length, 10 ); this.finishLine.setRotation(trackData.startFinish.rotation); this.physics.add.existing(this.finishLine, true); // Recreate start/finish text this.startFinishText = this.add.text( (this.spawnLinePoints[0].x + this.spawnLinePoints[1].x) / 2, (this.spawnLinePoints[0].y + this.spawnLinePoints[1].y) / 2, 'START/FINISH', { fontSize: '16px', fill: '#ff00ff', backgroundColor: '#000' } ).setOrigin(0.5).setAngle(Phaser.Math.RadToDeg(trackData.startFinish.rotation)); // Calculate positioning angles and offsets // Calculate line angle and length const lineAngle = Phaser.Math.Angle.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); const lineLength = Phaser.Math.Distance.Between( this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); // Calculate starting position along the line // Calculate positions for 4 cars evenly spaced const totalCars = 4; const spacing = 1 / (totalCars - 1); // Equal spacing between cars // Position player at start (0% along the line) const playerT = 0; this.player.x = Phaser.Math.Linear(this.spawnLinePoints[0].x, this.spawnLinePoints[1].x, playerT); this.player.y = Phaser.Math.Linear(this.spawnLinePoints[0].y, this.spawnLinePoints[1].y, playerT); this.player.rotation = lineAngle - Math.PI / 2; // Face perpendicular to line // Position AI cars along the line this.opponents.forEach((opponent, index) => { // Position each AI car at their respective positions (33%, 66%, 100% along the line) const t = spacing * (index + 1); opponent.x = Phaser.Math.Linear(this.spawnLinePoints[0].x, this.spawnLinePoints[1].x, t); opponent.y = Phaser.Math.Linear(this.spawnLinePoints[0].y, this.spawnLinePoints[1].y, t); opponent.rotation = lineAngle - Math.PI / 2; // Face perpendicular to line }); } } createCheckpoints() { // We no longer need the circular checkpoints as we'll use the spawn line // This method is kept for future reference or additional checkpoint needs } startCountdown() { // Create centered countdown text this.countdownText = this.add.text(400, 300, '3', { fontSize: '128px', fill: '#ffff00', padding: { x: 20, y: 10 }, shadow: { offsetX: 3, offsetY: 3, color: '#000000', blur: 15, fill: true } }) .setOrigin(0.5) .setScrollFactor(0) .setDepth(1000); // Start countdown sequence this.time.delayedCall(1000, () => { this.countdownText.setText('2'); this.time.delayedCall(1000, () => { this.countdownText.setText('1'); this.time.delayedCall(1000, () => { this.countdownText.setText('GO!'); this.countdownText.setFill('#00ff00'); this.countdownText.setShadow(3, 3, '#004400', 15, true); this.raceStarted = true; // Start race timer this.raceStartTime = this.time.now; // Reset race timer when race starts this.raceStartTime = this.time.now; // Remove countdown text after a brief delay this.time.delayedCall(500, () => { this.countdownText.destroy(); }); }); }); }); } update() { // Update race time only if player hasn't finished if (this.raceTimeText) { if (this.raceStarted && this.playerLap < this.totalLaps) { const currentTime = this.time.now - this.raceStartTime; if (this.raceTimeText && !this.raceTimeText.destroyed) { const minutes = Math.floor(currentTime / 60000); const seconds = Math.floor((currentTime % 60000) / 1000); const milliseconds = currentTime % 1000; this.raceTimeText.setText( `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${Math.floor(milliseconds/10).toString().padStart(2, '0')}` ); this.raceTimeText.setFill('#ffffff'); // Keep white during active race } this.totalRaceTime = currentTime; } else if (!this.raceStarted) { this.raceTimeText.setText('00:00.00'); this.raceTimeText.setFill('#ffffff'); // Keep white before race starts } } // Check collisions for current drawing points if (this.drawingPoints.length >= 2) { // Check collision with player for (let i = 1; i < this.drawingPoints.length; i++) { const line = new Phaser.Geom.Line( this.drawingPoints[i - 1].x, this.drawingPoints[i - 1].y, this.drawingPoints[i].x, this.drawingPoints[i].y ); if (Phaser.Geom.Intersects.LineToCircle(line, new Phaser.Geom.Circle(this.player.x, this.player.y, this.player.width * this.player.scaleX / 2))) { this.currentSpeed = 0; } // Check collision with opponents this.opponents.forEach(opponent => { if (Phaser.Geom.Intersects.LineToCircle(line, new Phaser.Geom.Circle(opponent.x, opponent.y, opponent.width * opponent.scaleX / 2))) { opponent.currentSpeed = 0; } }); } } // Check collisions for saved lines this.savedLines.forEach(savedLine => { for (let i = 1; i < savedLine.length; i++) { const line = new Phaser.Geom.Line( savedLine[i - 1].x, savedLine[i - 1].y, savedLine[i].x, savedLine[i].y ); if (Phaser.Geom.Intersects.LineToCircle(line, new Phaser.Geom.Circle(this.player.x, this.player.y, this.player.width * this.player.scaleX / 2))) { this.currentSpeed = 0; } this.opponents.forEach(opponent => { if (Phaser.Geom.Intersects.LineToCircle(line, new Phaser.Geom.Circle(opponent.x, opponent.y, opponent.width * opponent.scaleX / 2))) { opponent.currentSpeed = 0; } }); } }); // Calculate the rotation change const rotationChange = Math.abs(Phaser.Math.Angle.Wrap(this.player.rotation - this.previousRotation)); // Calculate speed reduction based on turn severity const turnSpeedMultiplier = 1 - (rotationChange * 2); // More rotation = more speed reduction // Player controls - only active after race starts if (this.raceStarted) { if (this.useGamepad && this.gamepad) { // Gamepad controls const accelerator = this.gamepad.buttons[7].value; // RT button const brake = this.gamepad.buttons[6].value; // LT button const steeringAxis = this.gamepad.axes[0].value; // Left stick X-axis // Acceleration/Braking with triggers if (accelerator > 0.1) { this.currentSpeed = Math.min(this.currentSpeed + (10 * accelerator), this.maxSpeed); } else if (brake > 0.1) { this.currentSpeed = Math.max(this.currentSpeed - (15 * brake), -150); } else { this.currentSpeed *= 0.98; } // Steering with analog stick if (Math.abs(steeringAxis) > 0.1) { this.currentTurnSpeed = Math.min(this.currentTurnSpeed + this.turnAcceleration, this.maxTurnSpeed); this.player.body.setAngularVelocity(this.currentTurnSpeed * steeringAxis); } else { this.currentTurnSpeed = 0; this.player.body.setAngularVelocity(0); } } else { // Keyboard controls if (this.keys.W.isDown || this.keys.UP.isDown) { this.currentSpeed = Math.min(this.currentSpeed + 10, this.maxSpeed); } else if (this.keys.S.isDown || this.keys.DOWN.isDown) { this.currentSpeed = Math.max(this.currentSpeed - 15, -150); } else { this.currentSpeed *= 0.98; } if (this.keys.A.isDown || this.keys.LEFT.isDown) { this.currentTurnSpeed = Math.min(this.currentTurnSpeed + this.turnAcceleration, this.maxTurnSpeed); this.player.body.setAngularVelocity(-this.currentTurnSpeed); } else if (this.keys.D.isDown || this.keys.RIGHT.isDown) { this.currentTurnSpeed = Math.min(this.currentTurnSpeed + this.turnAcceleration, this.maxTurnSpeed); this.player.body.setAngularVelocity(this.currentTurnSpeed); } else { this.currentTurnSpeed = 0; this.player.body.setAngularVelocity(0); } } } // Apply speed with turn penalty const adjustedSpeed = this.currentSpeed * Math.max(0.3, turnSpeedMultiplier); this.physics.velocityFromRotation(this.player.rotation, adjustedSpeed, this.player.body.velocity); // Store current rotation for next frame this.previousRotation = this.player.rotation; // Check for finish line crossing using line segment if (this.spawnLinePoints.length === 2 && !this.justCrossedLine) { // Calculate distance from player to finish line segment // Calculate the direction vector of the finish line const lineDirectionX = this.spawnLinePoints[1].x - this.spawnLinePoints[0].x; const lineDirectionY = this.spawnLinePoints[1].y - this.spawnLinePoints[0].y; // Calculate the perpendicular vector pointing towards the racing direction const perpendicularX = lineDirectionY; const perpendicularY = -lineDirectionX; const dotProduct = (this.player.body.velocity.x * perpendicularX + this.player.body.velocity.y * perpendicularY); // Calculate distance to line const distance = this.pointToLineDistance( this.player.x, this.player.y, this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); // Calculate player's speed const speed = Math.sqrt( Math.pow(this.player.body.velocity.x, 2) + Math.pow(this.player.body.velocity.y, 2) ); // Check if player is close enough to the line and moving fast enough // Only count the lap if the player is crossing the line in the correct direction if (distance < 30 && speed > 30 && !this.justCrossedLine && dotProduct > 0) { if (!this.hasStartedFirstLap) { this.hasStartedFirstLap = true; } else if (this.playerLap < this.totalLaps) { this.playerLap++; const remainingLaps = this.totalLaps - this.playerLap; if (remainingLaps === 0) { this.finishPosition++; if (this.lapCounters[0] && !this.lapCounters[0].destroyed) { this.lapCounters[0].setText(`Player:${this.getOrdinal(this.finishPosition)}`); } // Stop updating race time and change color to green when player finishes if (this.raceTimeText) { this.raceTimeText.setFill('#00ff00'); // Only change to green at finish } // Check if this is the last kart to finish if (this.finishPosition === 4) { this.showFinishScreen(); } } else { this.lapCounters[0].setText(`Player: ${remainingLaps}`); } } this.justCrossedLine = true; // Reset after a short delay to prevent multiple triggers this.time.delayedCall(1000, () => { this.justCrossedLine = false; }); } } // AI opponents will be controlled by custom pathing if (this.raceStarted && this.aiPath && this.aiPath.length > 0) { this.opponents.forEach((opponent, index) => { // Check for finish line crossing for AI if (this.spawnLinePoints.length === 2) { const distance = this.pointToLineDistance( opponent.x, opponent.y, this.spawnLinePoints[0].x, this.spawnLinePoints[0].y, this.spawnLinePoints[1].x, this.spawnLinePoints[1].y ); let speed = 0; if (opponent.body && opponent.body.velocity) { speed = Math.sqrt( Math.pow(opponent.body.velocity.x, 2) + Math.pow(opponent.body.velocity.y, 2) ); } if (distance < 50 && speed > 30 && !opponent.justCrossedLine) { if (!opponent.hasStartedFirstLap) { opponent.hasStartedFirstLap = true; } else if (this.opponentLaps[index] < this.totalLaps) { this.opponentLaps[index]++; const remainingLaps = this.totalLaps - this.opponentLaps[index]; if (remainingLaps === 0) { this.finishPosition++; if (this.lapCounters[index + 1] && !this.lapCounters[index + 1].destroyed) { this.lapCounters[index + 1].setText(`${['Orange', 'Blue', 'Yellow'][index]}:${this.getOrdinal(this.finishPosition)}`); } // Check if this is the last kart to finish if (this.finishPosition === 4) { this.showFinishScreen(); } } else { this.lapCounters[index + 1].setText(`${['Orange', 'Blue', 'Yellow'][index]}:${remainingLaps}`); } } opponent.justCrossedLine = true; this.time.delayedCall(1000, () => { opponent.justCrossedLine = false; }); } } // Check if aiPath and current checkpoint exist before accessing if (this.aiPath && this.aiPath[this.aiCheckpointIndex[index]]) { const currentCheckpoint = this.aiPath[this.aiCheckpointIndex[index]]; // Calculate angle to target with variation based on car type const dx = currentCheckpoint.x - opponent.x; const dy = currentCheckpoint.y - opponent.y; // Blue car (index 1) gets ±90 degrees variation, others get ±15 degrees const maxAngleVariation = index === 1 ? Math.PI / 3 : 0.262; // 60 degrees = π/3 radians, 15 degrees = 0.262 radians const angleVariation = Phaser.Math.FloatBetween(-maxAngleVariation, maxAngleVariation); const targetAngle = Math.atan2(dy, dx) + angleVariation; // Calculate rotation change like player const rotationChange = Math.abs(Phaser.Math.Angle.Wrap(opponent.rotation - opponent.previousRotation)); const turnSpeedMultiplier = 1 - (rotationChange * 2); // Rotate towards target with gradual turning let angleDiff = Phaser.Math.Angle.Wrap(targetAngle - opponent.rotation); // Add variation to turning responsiveness const turnResponsiveness = Phaser.Math.FloatBetween(0.08, 0.12); // Varies between 0.08 and 0.12 if (Math.abs(angleDiff) > 0.1) { opponent.currentTurnSpeed = Math.min(opponent.currentTurnSpeed + opponent.turnAcceleration, opponent.maxTurnSpeed); opponent.rotation += angleDiff * turnResponsiveness; } else { opponent.currentTurnSpeed = 0; } // Move towards target const distance = Phaser.Math.Distance.Between( opponent.x, opponent.y, currentCheckpoint.x, currentCheckpoint.y ); // Store the last position and time if not yet set if (!opponent.lastPosition) { opponent.lastPosition = { x: opponent.x, y: opponent.y }; opponent.lastMoveTime = this.time.now; } // Check if the car hasn't moved significantly in the last second if (this.time.now - opponent.lastMoveTime > 1000) { const moveDistance = Phaser.Math.Distance.Between( opponent.x, opponent.y, opponent.lastPosition.x, opponent.lastPosition.y ); // If car hasn't moved much and is near checkpoint, force it to move forward if (moveDistance < 10 && distance < 50) { opponent.currentSpeed = opponent.speedRange.max * 0.5; if (opponent.body && opponent.body.velocity) { this.physics.velocityFromRotation(opponent.rotation, opponent.currentSpeed, opponent.body.velocity); } } // Update last position and time opponent.lastPosition = { x: opponent.x, y: opponent.y }; opponent.lastMoveTime = this.time.now; } if (distance > 50) { // Update speed randomly every 3 seconds if (this.time.now > opponent.speedUpdateTime) { opponent.maxSpeed = Phaser.Math.Between(opponent.speedRange.min, opponent.speedRange.max); opponent.speedUpdateTime = this.time.now + 3000; } // Accelerate with random variations const accelerationRate = Phaser.Math.Between(8, 12); opponent.currentSpeed = Math.min(opponent.currentSpeed + accelerationRate, opponent.maxSpeed); // Apply speed with turn penalty if (opponent.body && opponent.body.velocity) { const adjustedSpeed = opponent.currentSpeed * Math.max(0.3, turnSpeedMultiplier); this.physics.velocityFromRotation(opponent.rotation, adjustedSpeed, opponent.body.velocity); } } else { // Move to next checkpoint opponent.currentSpeed *= 0.98; // Natural deceleration this.aiCheckpointIndex[index] = (this.aiCheckpointIndex[index] + 1) % this.aiPath.length; } } // Store current rotation for next frame opponent.previousRotation = opponent.rotation; }); } else { // If no path is set, keep AI stationary if (this.opponents && this.opponents.length > 0) { this.opponents.forEach(opponent => { // Add additional safety check if (!opponent || !opponent.body) return; // Skip if opponent or its body is undefined try { opponent.body.setVelocity(0); opponent.body.setAngularVelocity(0); } catch (error) { console.warn('Failed to set opponent velocity:', error); } }); } } } getOrdinal(n) { const s = ["th", "st", "nd", "rd"]; const v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); } showFinishScreen() { // Stop the race music this.sound.stopAll(); // Create a semi-transparent background // Create background image with proper fitting and no transparency const modalBg = this.add.image(400, 300, 'resultsBg') .setScrollFactor(0) .setDepth(2000) .setDisplaySize(800, 600) .setAlpha(1); // Create the results container const resultsContainer = this.add.container(400, 300) .setScrollFactor(0) .setDepth(2001); // Add title const titleText = this.add.text(0, -200, '🏁 Race Results! 🏁', { fontSize: '48px', fontFamily: 'Arial', fill: '#FFD700', stroke: '#000000', strokeThickness: 8, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setOrigin(0.5); resultsContainer.add(titleText); // Define position icons const positionIcons = { 1: '🏆', // Gold trophy 2: '🥈', // Silver medal 3: '🥉', // Bronze medal 4: '4th' // Plain text for 4th }; // Get final positions for all racers const finalPositions = []; // Add player position finalPositions.push({ name: 'Player', position: parseInt(this.lapCounters[0].text.match(/\d+/)[0]) }); // Add AI positions ['Orange', 'Blue', 'Yellow'].forEach((name, index) => { finalPositions.push({ name: name, position: parseInt(this.lapCounters[index + 1].text.match(/\d+/)[0]) }); }); // Sort by position finalPositions.sort((a, b) => a.position - b.position); // Display results finalPositions.forEach((racer, index) => { const yPos = -120 + (index * 60); // Reduced vertical spacing const icon = positionIcons[racer.position]; const nameColor = racer.name === 'Player' ? '#00ff00' : racer.name === 'Orange' ? '#FFA500' : racer.name === 'Blue' ? '#0000ff' : racer.name === 'Yellow' ? '#FFFF00' : '#FFFFFF'; let displayText = `${icon} ${racer.name}`; // Add race time for player if (racer.name === 'Player') { const minutes = Math.floor(this.totalRaceTime / 60000); const seconds = Math.floor((this.totalRaceTime % 60000) / 1000); const milliseconds = Math.floor((this.totalRaceTime % 1000) / 10); displayText += ` - ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')} (${this.totalLaps} laps)`; } const resultText = this.add.text(0, yPos, displayText, { fontSize: '28px', // Reduced font size fontFamily: 'Arial', fill: nameColor, stroke: '#000000', strokeThickness: 3, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 2, fill: true } }).setOrigin(0.5); resultsContainer.add(resultText); }); // Add buttons container to hold both buttons const restartButton = this.add.text(0, 220, '🏠 Return to Menu', { fontSize: '24px', fontFamily: 'Arial', fill: '#FFFFFF', backgroundColor: '#2196F3', padding: { x: 20, y: 10 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }) .setOrigin(0.5) .setInteractive({ useHandCursor: true }); // Add hover effects restartButton.on('pointerover', () => { restartButton.setBackgroundColor('#3f51b5'); }); restartButton.on('pointerout', () => { restartButton.setBackgroundColor('#2196F3'); }); // Add click handler to restart the game restartButton.on('pointerdown', () => { window.location.reload(); }); resultsContainer.add(restartButton); } } class IntroScreen extends Phaser.Scene { constructor() { super({ key: 'IntroScreen' }); } preload() { this.load.image('introBackground', 'https://play.rosebud.ai/assets/intro v2.png?gHLI'); } create() { const background = this.add.image(400, 300, 'introBackground'); background.setOrigin(0.5, 0.5); background.setDisplaySize(800, 600); // Add title text const title = this.add.text(400, 100, 'Welcome to Kart Racing', { fontSize: '48px', fill: '#ffffff', fontStyle: 'bold', stroke: '#000000', strokeThickness: 6, shadow: { offsetX: 3, offsetY: 3, color: '#000000', blur: 5, fill: true } }).setOrigin(0.5); // Create Level Select button const levelSelectButton = this.add.text(400, 250, 'Rookie Series', { fontSize: '32px', fill: '#ffffff', backgroundColor: '#2196F3', padding: { x: 30, y: 15 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setOrigin(0.5).setInteractive(); // Create Advanced Series button const rookieButton = this.add.text(400, 350, 'Advanced Series', { fontSize: '32px', fill: '#ffffff', backgroundColor: '#2196F3', padding: { x: 30, y: 15 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setOrigin(0.5).setInteractive(); // Create Community Series button const communityButton = this.add.text(400, 450, 'Community Series', { fontSize: '32px', fill: '#ffffff', backgroundColor: '#2196F3', padding: { x: 30, y: 15 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setOrigin(0.5).setInteractive(); // Add hover effects for Community Series button communityButton.on('pointerover', () => { communityButton.setBackgroundColor('#3f51b5'); }); communityButton.on('pointerout', () => { communityButton.setBackgroundColor('#2196F3'); }); // Add click handler for Community Series communityButton.on('pointerdown', () => { this.scene.start('CommunityScreen'); }); // Add keyboard/controller instruction text const keyboardText = this.add.text(400, 525, 'Use W,A,S,D, Arrow Keys, or Controller to drive your kart', { fontSize: '16px', fill: '#ffffff', align: 'center', stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); // Add controller instruction text // Add spacing paragraph this.add.text(400, 540, '', { fontSize: '16px' }).setOrigin(0.5); const controllerText = this.add.text(400, 560, 'To use a controller, first select the track and click "options"\nat the bottom left, and select "drive with gamepad".', { fontSize: '16px', fill: '#ffffff', align: 'center', lineSpacing: 5, stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); // Add hover effects for Rookie Series button levelSelectButton.on('pointerover', () => { levelSelectButton.setBackgroundColor('#3f51b5'); }); levelSelectButton.on('pointerout', () => { levelSelectButton.setBackgroundColor('#2196F3'); }); // Add hover effects for Rookie Championship button rookieButton.on('pointerover', () => { rookieButton.setBackgroundColor('#3f51b5'); }); rookieButton.on('pointerout', () => { rookieButton.setBackgroundColor('#2196F3'); }); // Add click handlers levelSelectButton.on('pointerdown', () => { this.scene.start('StartScreen'); }); rookieButton.on('pointerdown', () => { this.scene.start('AdvancedScreen'); }); } } class AdvancedScreen extends Phaser.Scene { constructor() { super({ key: 'AdvancedScreen' }); } preload() { this.load.audio('advancedMusic', 'https://play.rosebud.ai/assets/Welcome to the Grid.mp3?AO0d'); this.load.image('kartBackground', 'https://play.rosebud.ai/assets/kart background.png?wx0B'); } create() { // Stop any currently playing sounds this.sound.stopAll(); // Play advanced series music this.sound.play('advancedMusic', { loop: true }); // Add background const background = this.add.image(400, 300, 'kartBackground'); background.setOrigin(0.5, 0.5); background.setDisplaySize(800, 600); // Add back button const backButton = this.add.text(20, 560, '← Back to Menu', { fontSize: '16px', fill: '#ffffff', backgroundColor: '#2196F3', padding: { x: 10, y: 5 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setInteractive(); // Add hover effects backButton.on('pointerover', () => backButton.setBackgroundColor('#3f51b5')); backButton.on('pointerout', () => backButton.setBackgroundColor('#2196F3')); // Add click handler backButton.on('pointerdown', () => { this.sound.stopAll(); this.scene.start('IntroScreen'); }); // Add title text this.add.text(400, 50, 'Advanced Series', { fontSize: '48px', fill: '#fff', stroke: '#000000', strokeThickness: 4 }).setOrigin(0.5); // Create track selection buttons const tracks = [{ name: 'Switchback Raceway', id: 'advanced1' }, { name: 'The Gauntlet', id: 'advanced2' }, { name: 'City Speedway', id: 'advanced3' }, { name: 'The Jagged Edge', id: 'advanced4' }]; tracks.forEach((track, index) => { const button = this.add.text(400, 200 + (index * 80), track.name, { fontSize: '32px', fill: '#fff', backgroundColor: '#2196F3', padding: { x: 30, y: 15 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }) .setOrigin(0.5) .setInteractive(); // Add hover effects button.on('pointerover', () => button.setBackgroundColor('#3f51b5')); button.on('pointerout', () => button.setBackgroundColor('#2196F3')); // Add click handler button.on('pointerdown', () => { this.sound.stopAll(); if (track.id === 'advanced1') { // Use Switchback track for Switchback Raceway with full initialization fetch('https://play.rosebud.ai/assets/Switchback.jsx?RjJb') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', // Use oval initialization pattern trackData: trackData, autoStart: true }); } }); } else if (track.id === 'advanced2') { // Use Gauntlet track for The Gauntlet with full initialization fetch('https://play.rosebud.ai/assets/Gauntlet2.jsx?oh2D') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', // Use oval initialization pattern trackData: trackData, autoStart: true }); } }); } else if (track.id === 'advanced3') { // Use City Speedway track for Advanced 3 with full initialization fetch('https://play.rosebud.ai/assets/City Speedway.jsx?RwDt') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', // Use oval initialization pattern trackData: trackData, autoStart: true }); } }); } else if (track.id === 'advanced4') { // Use Jagged Edge track for Advanced 4 with full initialization fetch('https://play.rosebud.ai/assets/Jagged Edge2.jsx?Bxt9') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', // Use oval initialization pattern trackData: trackData, autoStart: true }); } }); } }); }); } } class CommunityScreen extends Phaser.Scene { constructor() { super({ key: 'CommunityScreen' }); } preload() { this.load.audio('communityMusic', 'https://play.rosebud.ai/assets/Welcome to the Grid.mp3?AO0d'); this.load.image('customBackground', 'https://play.rosebud.ai/assets/kart editor.png?dgZJ'); } create() { // Stop any currently playing sounds this.sound.stopAll(); // Play community series music this.sound.play('communityMusic', { loop: true }); // Add background const background = this.add.image(400, 300, 'customBackground'); background.setOrigin(0.5, 0.5); background.setDisplaySize(800, 600); // Add back button const backButton = this.add.text(20, 560, '← Back to Menu', { fontSize: '16px', fill: '#ffffff', backgroundColor: '#2196F3', padding: { x: 10, y: 5 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }).setInteractive(); // Add hover effects backButton.on('pointerover', () => backButton.setBackgroundColor('#3f51b5')); backButton.on('pointerout', () => backButton.setBackgroundColor('#2196F3')); // Add click handler backButton.on('pointerdown', () => { this.sound.stopAll(); this.scene.start('IntroScreen'); }); // Add title text this.add.text(400, 50, 'Community Series', { fontSize: '48px', fill: '#fff', stroke: '#000000', strokeThickness: 4 }).setOrigin(0.5); // Add description text this.add.text(400, 100, 'These tracks are custom made and voted on by players.\nThey will update monthly with top-voted tracks from Rosebud\'s Discord.\nTo create a custom track use the game "Kart Racing Track Editor"', { fontSize: '16px', fill: '#ffffff', align: 'center', stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); // Add update date text this.add.text(400, 140, 'Tracks Updated Apr 12, 2025', { fontSize: '16px', fill: '#ffffff', align: 'center', stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); // Create track selection buttons const tracks = [{ name: 'Jbones Circuit', id: 'jbones' }, { name: 'Family Track', id: 'jordan' }, { name: 'CMS Roval', id: 'roval' }, { name: 'Your Track Here', id: 'community4' }]; tracks.forEach((track, index) => { const button = this.add.text(400, 200 + (index * 80), track.name, { fontSize: '32px', fill: '#fff', backgroundColor: '#2196F3', padding: { x: 30, y: 15 }, shadow: { offsetX: 2, offsetY: 2, color: '#000000', blur: 4, fill: true } }) .setOrigin(0.5) .setInteractive(); // Add hover effects button.on('pointerover', () => button.setBackgroundColor('#3f51b5')); button.on('pointerout', () => button.setBackgroundColor('#2196F3')); // Add click handler button.on('pointerdown', () => { this.sound.stopAll(); if (track.id === 'jbones') { fetch('https://play.rosebud.ai/assets/jbones circuit.jsx?7pXa') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', trackData: trackData, autoStart: true }); } }); } else if (track.id === 'roval') { fetch('https://play.rosebud.ai/assets/roval.jsx?lYTz') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', trackData: trackData, autoStart: true }); } }); } else if (track.id === 'jordan') { fetch('https://play.rosebud.ai/assets/jordan time trial.jsx?AGDC') .then(response => response.text()) .then(content => { const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Ensure track data has all required properties trackData.walls = trackData.walls || []; trackData.aiPath = trackData.aiPath || []; trackData.startFinish = trackData.startFinish || { points: [] }; trackData.raceConfig = trackData.raceConfig || { totalLaps: 3 }; this.scene.start('RacingGame', { trackId: 'oval', trackData: trackData, autoStart: true }); } }); } else { // Default behavior for other placeholders this.scene.start('RacingGame', { trackId: 'oval', autoStart: true }); } }); }); } } 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: { debug: false } }, input: { gamepad: true }, scene: [IntroScreen, StartScreen, AdvancedScreen, CommunityScreen, RacingGame] }; window.phaserGame = new Phaser.Game(config);