class StartScreen extends Phaser.Scene { constructor() { super({ key: 'StartScreen' }); } preload() { this.load.audio('menuMusic', 'https://play.rosebud.ai/assets/Welcome to the Grid.mp3?AO0d'); this.load.image('kartBackground', 'https://play.rosebud.ai/assets/kart editor.png?Z0jK'); this.load.image('tutorialImage', 'https://play.rosebud.ai/assets/Tutorial v6.png?SN5A'); } create() { // Play menu music this.sound.play('menuMusic', { loop: true }); // Add background const background = this.add.image(400, 300, 'kartBackground'); background.setOrigin(0.5, 0.5); background.setDisplaySize(800, 600); // Fit to game dimensions // Add welcome text this.add.text(400, 50, 'Kart Racing Track Editor', { fontSize: '48px', fill: '#fff', stroke: '#000000', strokeThickness: 4 }).setOrigin(0.5); // Add link text this.add.text(400, 380, 'To jump in and start racing, check out Kart Racing on Rosebud,\nor click above to start creating and editing your own tracks', { fontSize: '16px', fill: '#fff', align: 'center', lineSpacing: 10, backgroundColor: '#000000', padding: { x: 10, y: 5 }, shadow: { offsetX: 1, offsetY: 1, color: '#000000', blur: 2, fill: true } }).setOrigin(0.5); // Create Track Editor button and Tutorial button const trackEditorButton = this.add.text(400, 300, '🛠️ Track Editor', { 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 trackEditorButton.on('pointerover', () => trackEditorButton.setBackgroundColor('#3f51b5')); trackEditorButton.on('pointerout', () => trackEditorButton.setBackgroundColor('#2196F3')); // Add click handlers trackEditorButton.on('pointerdown', () => { this.sound.stopAll(); // Stop menu music before transitioning this.scene.start('RacingGame', { mode: 'editor' }); }); // Add informational text about Green Kart movement this.add.text(400, 470, "Your Green Kart will not move in the editor until you place at least a start line,\nselect race and ready up. (A start line will be drawn between your 2 points)", { fontSize: '16px', fill: '#fff', align: 'center', backgroundColor: '#000000', padding: { x: 10, y: 5 }, shadow: { offsetX: 1, offsetY: 1, color: '#000000', blur: 2, fill: true } }).setOrigin(0.5); } } 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('tutorialImage', 'https://play.rosebud.ai/assets/Tutorial v6.png?SN5A'); 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 only this.editorMode = data.mode === 'editor'; // 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 }); } // Create track background const background = this.add.tileSprite(0, 0, 800, 600, 'track'); // 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 ]); // Initialize graphics for line drawing this.graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xffffff } }); // Create grid lines below everything but above background this.gridGraphics = this.add.graphics(); this.gridGraphics.setDepth(0.5); // Above background but below other elements this.gridGraphics.lineStyle(1, 0x00FF00, 0.3); // Green with slight transparency this.gridGraphics.setVisible(false); // Hidden by default // Draw vertical grid lines every 40 pixels for (let x = 0; x <= 800; x += 40) { this.gridGraphics.moveTo(x, 0); this.gridGraphics.lineTo(x, 600); } // Draw horizontal grid lines every 40 pixels for (let y = 0; y <= 600; y += 40) { this.gridGraphics.moveTo(0, y); this.gridGraphics.lineTo(800, y); } this.gridGraphics.strokePath(); // 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; }); background.setOrigin(0, 0); // 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, '🛠️ Editor', { 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 grid toggle button this.gridVisible = false; // Set initial visibility to false // Create UI container (initially hidden) this.editorUI = this.add.container(100, 160); // Add background panel to block clicks through UI const uiBackground = this.add.rectangle(0, 0, 150, 187, 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 tutorialButton = this.add.text(0, 0, '📖 Tutorial', optionStyle).setInteractive(); const option1 = this.add.text(0, 24, '✏️ Draw Wall', optionStyle).setInteractive(); const option3 = this.add.text(0, 48, '💾 Save Wall', optionStyle).setInteractive(); const option2 = this.add.text(0, 72, '🗑️ Erase Wall', optionStyle).setInteractive(); const option5 = this.add.text(0, 96, '🎯 Draw AI Path', optionStyle).setInteractive(); const option6 = this.add.text(0, 120, '✅ Save AI Path', optionStyle).setInteractive(); const clearAIPathOption = this.add.text(0, 144, '❌ Clear AI Path', optionStyle).setInteractive(); const option4 = this.add.text(0, 168, '👁️ View AI Path', optionStyle).setInteractive(); const option7 = this.add.text(0, 192, '🏁 Draw Start/Finish Line', optionStyle).setInteractive(); const defineLapsButton = this.add.text(0, 216, '🔄 Define Laps', optionStyle).setInteractive(); const raceButton = this.add.text(0, 240, '🏎️ Race!', optionStyle).setInteractive(); const exitRaceButton = this.add.text(0, 264, '❌ Exit Race', optionStyle).setInteractive(); const option8 = this.add.text(0, 288, '📤 Save Track', optionStyle).setInteractive(); const option9 = this.add.text(0, 312, '📥 Load Track', optionStyle).setInteractive(); const gamepadButton = this.add.text(0, 336, '🎮 Drive with Gamepad', optionStyle).setInteractive(); const gridlinesButton = this.add.text(0, 360, 'Show Gridlines', optionStyle).setInteractive(); // Add click handler for gridlines button gridlinesButton.on('pointerdown', () => { this.gridVisible = !this.gridVisible; gridlinesButton.setText((this.gridVisible ? 'Hide' : 'Show') + ' Gridlines'); this.gridGraphics.setVisible(this.gridVisible); // Set button state if (this.gridVisible) { gridlinesButton.setBackgroundColor('#2196F3'); } else { gridlinesButton.setBackgroundColor('#f44336'); } }); // Add all UI elements to container, ensuring they're added after the background const allOptions = [option1, option2, option3, option4, option5, option6, clearAIPathOption, option7, raceButton, exitRaceButton, tutorialButton, option8, option9, defineLapsButton, gamepadButton, gridlinesButton]; 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(); }); } }); option1.on('pointerdown', () => { // Toggle line drawing mode this.isLineDrawingEnabled = !this.isLineDrawingEnabled; // Update button appearance to stay green while active if (this.isLineDrawingEnabled) { option1.setBackgroundColor('#4CAF50'); // Remove hover effect while active option1.off('pointerover'); option1.off('pointerout'); } else { option1.setBackgroundColor('#2196F3'); // Restore hover effects when inactive option1.on('pointerover', () => { option1.setBackgroundColor('#3f51b5'); option1.setPadding(6, 5, 6, 3); }); option1.on('pointerout', () => { option1.setBackgroundColor('#2196F3'); option1.setPadding(6, 4, 6, 4); }); } // Just reset drawing points without clearing graphics this.drawingPoints = []; // Redraw all saved lines 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(); }); } }); option2.on('pointerdown', () => { this.isErasing = !this.isErasing; if (this.isErasing) { option2.setBackgroundColor('#f44336'); // Remove hover effect while active option2.off('pointerover'); option2.off('pointerout'); this.input.on('pointerdown', this.handleErase, this); } else { option2.setBackgroundColor('#2196F3'); // Restore hover effects when inactive option2.on('pointerover', () => { option2.setBackgroundColor('#3f51b5'); option2.setPadding(6, 5, 6, 3); }); option2.on('pointerout', () => { option2.setBackgroundColor('#2196F3'); option2.setPadding(6, 4, 6, 4); }); this.input.off('pointerdown', this.handleErase, this); } }); option3.on('pointerdown', () => { if (this.drawingPoints.length >= 2) { // Save current line this.savedLines.push([...this.drawingPoints]); // Visual feedback option3.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { option3.setBackgroundColor('#444'); }); // Draw all saved lines in white this.graphics.lineStyle(4, 0xffffff); // Draw the newly saved line 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(); // Reset current drawing this.drawingPoints = []; } }); option5.on('pointerdown', () => { this.isPlacingCheckpoints = !this.isPlacingCheckpoints; if (this.isPlacingCheckpoints) { option5.setBackgroundColor('#4CAF50'); // Remove hover effect while active option5.off('pointerover'); option5.off('pointerout'); } else { option5.setBackgroundColor('#2196F3'); // Restore hover effects when inactive option5.on('pointerover', () => { option5.setBackgroundColor('#3f51b5'); option5.setPadding(6, 5, 6, 3); }); option5.on('pointerout', () => { option5.setBackgroundColor('#2196F3'); option5.setPadding(6, 4, 6, 4); }); // Clear existing checkpoints when disabling if (this.checkpoints && this.checkpoints.length > 0) { this.checkpoints.forEach(checkpoint => { if (checkpoint && checkpoint.text) checkpoint.text.destroy(); if (checkpoint && checkpoint.circle) checkpoint.circle.destroy(); }); } this.checkpoints = []; } }); option6.on('pointerdown', () => { if (this.checkpoints && this.checkpoints.length > 0) { this.aiPath = this.checkpoints.map(checkpoint => ({ x: checkpoint.x, y: checkpoint.y })); // Reset AI checkpoint indices this.aiCheckpointIndex = Array(3).fill(0); // Visual feedback for save option6.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { option6.setBackgroundColor('#444'); }); } }); // Add click handler for Clear AI Path clearAIPathOption.on('pointerdown', () => { // Clear the AI path array this.aiPath = null; // Clear any existing checkpoint texts this.checkpointTexts.forEach(text => text.destroy()); this.checkpointTexts = []; // Reset AI checkpoint indices this.aiCheckpointIndex = Array(3).fill(0); // Clear graphics and redraw track walls 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(); }); } // Visual feedback clearAIPathOption.setBackgroundColor('#ff0000'); this.time.delayedCall(200, () => { clearAIPathOption.setBackgroundColor('#444'); }); }); // 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) => { // 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; 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'); }); } }); option7.on('pointerdown', () => { // Always reset drawing state when button is clicked this.isDrawingSpawnLine = true; // Clear existing spawn line and points if (this.spawnLine) { this.spawnLine.destroy(); } if (this.spawnPointMarkers) { this.spawnPointMarkers.forEach(marker => marker.destroy()); } this.spawnPointMarkers = []; this.spawnLinePoints = []; // Set button to active state option7.setBackgroundColor('#4CAF50'); option7.off('pointerover'); option7.off('pointerout'); }); // Initialize spawnPointMarkers array in constructor this.spawnPointMarkers = []; // 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; } } } }); // Add click handler for tutorial button tutorialButton.on('pointerdown', () => { // Create a semi-transparent dark background const modalBg = this.add.rectangle(400, 300, 800, 600, 0x000000, 0.95) .setScrollFactor(0) .setDepth(1000) .setInteractive(); // Add the tutorial image with improved positioning and scaling const tutorial = this.add.image(400, 300, 'tutorialImage') .setScrollFactor(0) .setDepth(1001); // Calculate scale to fit the screen while maintaining aspect ratio const targetWidth = 700; // Adjusted for new image dimensions const targetHeight = 500; // Adjusted for new image dimensions const scaleX = targetWidth / tutorial.width; const scaleY = targetHeight / tutorial.height; const scale = Math.min(scaleX, scaleY); tutorial.setScale(scale); // Add a close button const closeButton = this.add.text(750, 50, '❌', { fontSize: '32px', fill: '#ffffff' }) .setScrollFactor(0) .setDepth(1002) .setInteractive({ useHandCursor: true }); // Close tutorial when clicking the X or the background const closeTutorial = () => { modalBg.destroy(); tutorial.destroy(); closeButton.destroy(); }; closeButton.on('pointerdown', closeTutorial); modalBg.on('pointerdown', closeTutorial); }); option8.on('pointerdown', () => { // Format track data as a JSX exportable constant with all required elements const trackData = { walls: [ // Include all saved lines ...this.savedLines, // Add border walls [{ 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 ] ], aiPath: this.aiPath, startFinish: { points: this.spawnLinePoints, rotation: this.finishLine ? this.finishLine.rotation : 0 }, kartPositions: { player: { x: this.player.x, y: this.player.y, rotation: this.player.rotation }, opponents: this.opponents.map(opponent => ({ x: opponent.x, y: opponent.y, rotation: opponent.rotation })) }, raceConfig: { totalLaps: this.totalLaps } }; // Create JSX content with proper export and metadata const jsxContent = ` // Auto-generated track data // Generated: ${new Date().toISOString()} export const trackData = ${JSON.stringify(trackData, null, 2)}; /* Track Configuration: - Total Laps: ${this.totalLaps} - Checkpoints: ${this.aiPath ? this.aiPath.length : 0} - Walls: ${this.savedLines.length} */ `; // Create data URI for JSX file const dataUri = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(jsxContent); // Create temporary link element to trigger download const downloadLink = document.createElement('a'); downloadLink.setAttribute('href', dataUri); downloadLink.setAttribute('download', 'ovalTrackv2.jsx'); document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); // Visual feedback option8.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { option8.setBackgroundColor('#444'); }); }); // Add click handler for loading track data option9.on('pointerdown', () => { // Create a file input element const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = '.jsx'; fileInput.onchange = (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { try { // Save the track data to localStorage localStorage.setItem('track_data', e.target.result); // Extract the trackData object from the JSX content const content = e.target.result; const match = content.match(/export const trackData = ({[\s\S]*});/); if (match) { const trackData = JSON.parse(match[1]); // Load race configuration if (trackData.raceConfig && trackData.raceConfig.totalLaps) { this.totalLaps = trackData.raceConfig.totalLaps; // Update 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}`); } // 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, 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(); // 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: '#ffffff', backgroundColor: '#000' } ).setOrigin(0.5).setAngle(Phaser.Math.RadToDeg(trackData.startFinish.rotation)); // Position cars const spacing = 1 / (this.opponents.length + 1); this.player.x = this.spawnLinePoints[0].x; this.player.y = this.spawnLinePoints[0].y; this.opponents.forEach((opponent, index) => { 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 ); }); } // Visual feedback option9.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { option9.setBackgroundColor('#444'); }); } } catch (error) { console.error('Error loading track:', error); } }; reader.readAsText(file); }; fileInput.click(); }); // Add click handler for Exit Race button exitRaceButton.on('pointerdown', () => { // Stop any currently playing music this.sound.stopAll(); // Play editor music this.sound.play('editorMusic', { loop: true }); // Find and destroy both the ready button and glow circle if they exist const readyButton = this.children.list.find(child => child.type === 'Text' && child.text === '🏁 READY!' ); const glowCircle = this.children.list.find(child => child.type === 'Arc' && child.fillColor === 0x00ff00 ); if (readyButton) { readyButton.destroy(); } if (glowCircle) { glowCircle.destroy(); } // Visual feedback exitRaceButton.setBackgroundColor('#ff0000'); this.time.delayedCall(200, () => { exitRaceButton.setBackgroundColor('#2196F3'); }); }); // Add click handler for Define Laps button defineLapsButton.on('pointerdown', () => { // Create a semi-transparent background const modalBg = this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7) .setScrollFactor(0) .setDepth(1000); // Create the input dialog const dialog = this.add.container(400, 300) .setScrollFactor(0) .setDepth(1001); // Add background for dialog // Create dialog background with rounded corners and shadow const dialogBg = this.add.rectangle(0, 0, 300, 200, 0x2196F3, 0.9) .setOrigin(0.5); dialog.add(dialogBg); // Add title text with editor style const titleText = this.add.text(0, -70, '🔢 Set Number of Laps', { fontSize: '20px', fill: '#fff', backgroundColor: '#3f51b5', padding: { x: 10, y: 6 }, borderRadius: 6, shadow: { offsetX: 1, offsetY: 1, color: '#000000', blur: 2, fill: true } }).setOrigin(0.5); dialog.add(titleText); // Create text display for input with editor style let currentValue = this.totalLaps.toString(); let isInputFocused = false; const inputText = this.add.text(0, 0, currentValue, { fontSize: '24px', fill: '#fff', backgroundColor: '#3f51b5', padding: { x: 15, y: 8 }, borderRadius: 6, shadow: { offsetX: 1, offsetY: 1, color: '#000000', blur: 2, fill: true } }) .setOrigin(0.5) .setInteractive({ useHandCursor: true }); // Add click handler for the input text inputText.on('pointerdown', () => { if (!isInputFocused) { isInputFocused = true; currentValue = ''; inputText.setText('_'); inputText.setBackgroundColor('#4a5fc1'); } }); dialog.add(inputText); // Set up keyboard input const keyHandler = (event) => { if (!isInputFocused) return; const key = event.key; if (key >= '0' && key <= '9') { // Append digit if under 50 const newValue = currentValue + key; if (parseInt(newValue) <= 50) { currentValue = newValue; inputText.setText(currentValue + '_'); } } else if (key === 'Backspace') { // Remove last digit currentValue = currentValue.slice(0, -1); inputText.setText((currentValue || '') + '_'); } else if (key === 'Enter') { // Confirm input const value = parseInt(currentValue); if (value >= 1 && value <= 50) { this.totalLaps = value; // Update all lap counters with new value this.lapCounters[0].setText(`Player: ${value}`); this.lapCounters[1].setText(`Orange: ${value}`); this.lapCounters[2].setText(`Blue: ${value}`); this.lapCounters[3].setText(`Yellow: ${value}`); modalBg.destroy(); dialog.destroy(); defineLapsButton.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { defineLapsButton.setBackgroundColor('#444'); }); // Remove keyboard listener window.removeEventListener('keydown', keyHandler); } } // Update display inputText.setText(currentValue); }; // Add keyboard listener window.addEventListener('keydown', keyHandler); // Add confirm button with editor style const confirmButton = this.add.text(0, 50, '✅ Confirm', { fontSize: '20px', fill: '#fff', backgroundColor: '#4CAF50', padding: { x: 12, y: 6 }, borderRadius: 6, shadow: { offsetX: 1, offsetY: 1, color: '#000000', blur: 2, fill: true } }) .setInteractive() .setOrigin(0.5); dialog.add(confirmButton); // Add handlers confirmButton.on('pointerdown', () => { const value = parseInt(currentValue); if (value >= 1 && value <= 50) { this.totalLaps = value; // Update all lap counters with new value this.lapCounters[0].setText(`Player: ${value}`); this.lapCounters[1].setText(`Orange: ${value}`); this.lapCounters[2].setText(`Blue: ${value}`); this.lapCounters[3].setText(`Yellow: ${value}`); modalBg.destroy(); dialog.destroy(); window.removeEventListener('keydown', keyHandler); // Visual feedback defineLapsButton.setBackgroundColor('#00ff00'); this.time.delayedCall(200, () => { defineLapsButton.setBackgroundColor('#2196F3'); // Restore hover effects defineLapsButton.on('pointerover', () => { defineLapsButton.setBackgroundColor('#3f51b5'); defineLapsButton.setPadding(6, 5, 6, 3); }); defineLapsButton.on('pointerout', () => { defineLapsButton.setBackgroundColor('#2196F3'); defineLapsButton.setPadding(6, 4, 6, 4); }); }); } }); // Add click outside to close modalBg.setInteractive(); modalBg.on('pointerdown', () => { modalBg.destroy(); dialog.destroy(); window.removeEventListener('keydown', keyHandler); }); }); // 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; } }); option4.on('pointerdown', () => { this.showAIPath = !this.showAIPath; if (this.showAIPath) { option4.setBackgroundColor('#4CAF50'); // Remove hover effect while active option4.off('pointerover'); option4.off('pointerout'); } else { option4.setBackgroundColor('#2196F3'); // Restore hover effects when inactive option4.on('pointerover', () => { option4.setBackgroundColor('#3f51b5'); option4.setPadding(6, 5, 6, 3); }); option4.on('pointerout', () => { option4.setBackgroundColor('#2196F3'); option4.setPadding(6, 4, 6, 4); }); } if (this.showAIPath && this.aiPath && this.aiPath.length > 0) { // Draw AI path visualization this.graphics.lineStyle(4, 0x00ffff, 0.5); // Draw lines between checkpoints for (let i = 0; i < this.aiPath.length; i++) { const currentCheckpoint = this.aiPath[i]; const nextCheckpoint = this.aiPath[(i + 1) % this.aiPath.length]; // Draw line between checkpoints this.graphics.beginPath(); this.graphics.moveTo(currentCheckpoint.x, currentCheckpoint.y); this.graphics.lineTo(nextCheckpoint.x, nextCheckpoint.y); this.graphics.strokePath(); // Draw checkpoint marker this.graphics.lineStyle(2, 0x00ff00, 1); this.graphics.strokeCircle(currentCheckpoint.x, currentCheckpoint.y, 15); // Add checkpoint number const checkpointText = this.add.text(currentCheckpoint.x - 5, currentCheckpoint.y - 5, `${i}`, { fontSize: '16px', fill: '#00ff00' }).setDepth(1); this.checkpointTexts.push(checkpointText); } } else { // Clear AI path visualization this.graphics.clear(); // Remove checkpoint number texts this.checkpointTexts.forEach(text => text.destroy()); this.checkpointTexts = []; // Redraw saved lines if any exist 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(); }); } } }); } 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(); }); } // Recreate border walls (same as in create()) 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 ]); // Redraw all saved lines including border walls this.graphics.clear(); 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, 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(); // 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: '#000000', 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; 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++; 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 ); const 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++; 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; 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 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 this.opponents.forEach(opponent => { opponent.body.setVelocity(0); opponent.body.setAngularVelocity(0); }); } } 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(); }); // Add "Return to Editor" button const editorButton = this.add.text(0, 140, '🛠️ Return to Editor', { 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 for editor button editorButton.on('pointerover', () => { editorButton.setBackgroundColor('#3f51b5'); }); editorButton.on('pointerout', () => { editorButton.setBackgroundColor('#2196F3'); }); // Add click handler to close results and return to editor editorButton.on('pointerdown', () => { // Play editor music this.sound.play('editorMusic', { loop: true }); modalBg.destroy(); resultsContainer.destroy(); }); resultsContainer.add(restartButton); resultsContainer.add(editorButton); } } 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: [StartScreen, RacingGame] }; window.phaserGame = new Phaser.Game(config);