class CarSelectionScene extends Phaser.Scene { constructor() { super({ key: 'CarSelectionScene' }); } preload() { // Load the background music this.load.audio('menuMusic', 'https://play.rosebud.ai/assets/1-006. Main Menu B (Kart Select)__.mp3?BY6Q'); this.load.image('mario_car', 'https://play.rosebud.ai/assets/mario.png?9MbQ'); this.load.image('luigi_car', 'https://play.rosebud.ai/assets/luigi.png?OCJn'); this.load.image('toad_car', 'https://play.rosebud.ai/assets/toad.png?ou1h'); this.load.image('bowser_car', 'https://play.rosebud.ai/assets/bowser.png?wqCV'); this.load.image('dk_car', 'https://play.rosebud.ai/assets/dk.png?hvGE'); this.load.image('peach_car', 'https://play.rosebud.ai/assets/peach.png?X25p'); this.load.image('yoshi_car', 'https://play.rosebud.ai/assets/yoshi-kart.png?1YAG'); this.load.image('ddkong_car', 'https://play.rosebud.ai/assets/dd kong.png?crhU'); } create() { // Play the background music this.menuMusic = this.sound.add('menuMusic', { loop: true, volume: 0.7 }); this.menuMusic.play(); // Add title text this.add.text(400, 100, 'Select Your Racer!', { fontSize: '32px', fill: '#fff' }).setOrigin(0.5); const characters = [{ key: 'mario_car', name: 'Mario' }, { key: 'luigi_car', name: 'Luigi' }, { key: 'toad_car', name: 'Toad' }, { key: 'bowser_car', name: 'Bowser' }, { key: 'dk_car', name: 'DK' }, { key: 'peach_car', name: 'Peach' }, { key: 'yoshi_car', name: 'Yoshi' }, { key: 'ddkong_car', name: 'DD Kong' }]; // Calculate grid layout const startX = 200; const startY = 300; const spacing = 200; const itemsPerRow = 3; characters.forEach((char, index) => { const x = startX + (index % itemsPerRow) * spacing; const y = startY + Math.floor(index / itemsPerRow) * spacing; // Create character sprite const sprite = this.add.sprite(x, y, char.key).setInteractive(); sprite.setScale(0.8); // Add character name this.add.text(x, y + 60, char.name, { fontSize: '24px', fill: '#fff' }).setOrigin(0.5); // Add hover effect sprite.on('pointerover', () => { sprite.setScale(1); }); sprite.on('pointerout', () => { sprite.setScale(0.8); }); // Add click handler sprite.on('pointerdown', () => { // Stop the music before changing scenes this.menuMusic.stop(); this.scene.start('RacingGame', { selectedCar: char.key }); }); }); } } class RacingGame extends Phaser.Scene { constructor() { super({ key: 'RacingGame' }); this.speed = 0; // Start with 0 speed until countdown finishes this.baseSpeed = 50; // Min speed in mph this.maxSpeed = 100; // Max speed in mph this.currentItem = 'mushroom'; // Start with mushroom item this.acceleration = 5 * 2.237; // Reduced acceleration for lower max speed this.car = null; this.npcRacers = []; this.obstacles = null; this.raceStarted = false; this.score = 0; this.gameOver = false; this.speedRecoveryTimer = null; this.distanceTraveled = 0; this.finishLinePosition = 5000; // 5000 feet this.gameWon = false; this.finalLapPlayed = false; this.raceStartTime = 0; this.finishedRacers = []; this.raceResults = []; this.starBoostActive = false; this.starBoostTimer = null; this.normalMaxSpeed = 300; // Store normal max speed } preload() { // Load racer faces this.load.image('mario_face', 'https://play.rosebud.ai/assets/mario_face.png?3u66'); this.load.image('luigi_face', 'https://play.rosebud.ai/assets/luigi_face.png?c4Rq'); this.load.image('donkey_kong_face', 'https://play.rosebud.ai/assets/donkey_kong_face.png?TWPw'); this.load.image('yoshi_face', 'https://play.rosebud.ai/assets/yoshi_face.png?2K2o'); this.load.image('dd_kong_face', 'https://play.rosebud.ai/assets/dd_kong_face.png?Fvah'); this.load.image('bowser_face', 'https://play.rosebud.ai/assets/bowser_face.png?wRkb'); this.load.image('peach_face', 'https://play.rosebud.ai/assets/peach_face.png?DOmt'); this.load.image('toad_face', 'https://play.rosebud.ai/assets/toad_face.png?e8yt'); // Load item box sprite and powerups this.load.spritesheet('item_box', 'https://play.rosebud.ai/assets/item-box-sprite.gif?B7HD', { frameWidth: 111, frameHeight: 101 }); this.load.image('star', 'https://play.rosebud.ai/assets/star2.png?NVLD'); this.load.image('mushroom', 'https://play.rosebud.ai/assets/mushroom2.png?QmWI'); this.load.image('bomb', 'https://play.rosebud.ai/assets/bomb2.png?ATSI'); this.load.image('red_shell', 'https://play.rosebud.ai/assets/red-shell-item.gif?On9o'); this.load.image('explosion', 'https://play.rosebud.ai/assets/2d explosion.png?G8Bc'); this.load.audio('explosionSound', 'https://play.rosebud.ai/assets/explosion-101soundboards.mp3?PhzT'); this.load.audio('starTheme', 'https://play.rosebud.ai/assets/super-mario-bros-nes-music-star-theme-cut-mp3.mp3?0Jbr'); this.load.audio('itemBoxSound', 'https://play.rosebud.ai/assets/mario-kart-item-box-sound-mp3cut (4).mp3?gaB0'); // Load all game assets this.load.audio('mushroomBoostSound', 'https://play.rosebud.ai/assets/mushroom-item-boost.mp3?5xy4'); this.load.audio('finalLapSound', 'https://play.rosebud.ai/assets/1-015-Final Lap!.mp3?pV65'); this.load.audio('winSound', 'https://play.rosebud.ai/assets/1-018-Race-Complete.mp3?qgBe'); this.load.audio('MarioKartStadium', 'https://play.rosebud.ai/assets/1-011-MarioKartStadium.mp3?TeSK'); this.load.audio('countdownSound', 'https://play.rosebud.ai/assets/1-010-321Go.mp3?lTNb'); this.load.image('road_line', 'https://play.rosebud.ai/assets/road_line.png?lekX'); // Player car will be loaded based on selection this.load.image('obstacle_cone', 'https://play.rosebud.ai/assets/obstacle_cone.png?gA9w'); this.load.image('obstacle_barrier', 'https://play.rosebud.ai/assets/obstacle_barrier.png?9bit'); this.load.image('obstacle_oil', 'https://play.rosebud.ai/assets/obstacle_oil.png?Igqg'); this.load.image('piranha_plant', 'https://play.rosebud.ai/assets/piranha-plant-1.png?qQy2'); this.load.image('road_texture', 'https://play.rosebud.ai/assets/road_texture.png?ymb6'); this.load.image('side_grass', 'https://play.rosebud.ai/assets/side_grass.png?FIcS'); this.load.image('road_line', 'https://play.rosebud.ai/assets/road_line.png?lekX'); this.load.image('dk_image', 'https://play.rosebud.ai/assets/dk.png?hvGE'); this.load.image('peach_image', 'https://play.rosebud.ai/assets/peach.png?X25p'); this.load.image('bowser_image', 'https://play.rosebud.ai/assets/bowser.png?wqCV'); this.load.image('ddkong_image', 'https://play.rosebud.ai/assets/dd kong.png?crhU'); this.load.image('toad_image', 'https://play.rosebud.ai/assets/toad.png?ou1h'); this.load.image('luigi_image', 'https://play.rosebud.ai/assets/luigi.png?OCJn'); this.load.image('mario_image', 'https://play.rosebud.ai/assets/mario.png?9MbQ'); this.load.image('game_over_screen', 'https://play.rosebud.ai/assets/game_over_screen.png?Dufr'); } createRankingDisplay() { // Create container for ranking display this.rankingTexts = []; // Style for ranking texts const rankStyle = { fontSize: '24px', fill: '#ffffff', align: 'right', backgroundColor: '#000000', padding: { x: 10, y: 5 }, resolution: 2 }; // Create background for ranking display const bg = this.add.rectangle(20, 20, 400, 140, 0x000000, 0.7); bg.setOrigin(0, 0); bg.setDepth(1); // Background depth // Create text objects for each position for (let i = 0; i < 4; i++) { const rankText = this.add.text(30, 30 + (i * 32), '', rankStyle); rankText.setOrigin(0, 0); rankText.setScrollFactor(0); rankText.setDepth(2); // Ranking text above background but below sprites this.rankingTexts.push(rankText); } } create() { // Create item box animation // Create item box animation this.anims.create({ key: 'item_box_spin', frames: this.anims.generateFrameNumbers('item_box', { start: 0, end: 3, first: 0 }), frameRate: 12, repeat: -1, yoyo: false }); // Create ranking display this.createRankingDisplay(); // Create item display container at bottom left this.itemDisplay = this.add.container(100, 1100); this.itemDisplay.setDepth(100); // Ensure it's above other elements // Add background for item display const itemBg = this.add.rectangle(0, 0, 80, 80, 0x000000, 0.7); itemBg.setOrigin(0.5); this.itemDisplay.add(itemBg); // Add click detection to the background itemBg.setInteractive(); itemBg.on('pointerdown', () => this.activateItem()); // Add powerup sprites this.starSprite = this.add.sprite(0, 0, 'star'); this.starSprite.setScale(1.5); this.starSprite.setVisible(false); this.starSprite.setOrigin(0.5); this.itemDisplay.add(this.starSprite); this.redShellSprite = this.add.sprite(0, 0, 'red_shell'); this.redShellSprite.setScale(0.5); this.redShellSprite.setVisible(false); this.redShellSprite.setOrigin(0.5); this.itemDisplay.add(this.redShellSprite); this.mushroomSprite = this.add.sprite(0, 0, 'mushroom'); this.mushroomSprite.setScale(1.5); this.mushroomSprite.setVisible(false); this.mushroomSprite.setOrigin(0.5); this.itemDisplay.add(this.mushroomSprite); this.bombSprite = this.add.sprite(0, 0, 'bomb'); this.bombSprite.setScale(1.5); this.bombSprite.setVisible(false); // Hide bomb at start this.bombSprite.setOrigin(0.5); this.itemDisplay.add(this.bombSprite); // Make mushroom visible at start this.mushroomSprite.setVisible(true); // Make sure the item display stays fixed on screen this.itemDisplay.setScrollFactor(0); // currentItem is already set in constructor // Create tiled road background this.road = this.add.tileSprite(400, 640, 800, 1280, 'road_texture'); // Create finish line this.finishLine = this.add.sprite(400, -50, 'road_line'); this.finishLine.setScale(2, 0.3); // Make it wider and thicker this.finishLine.setOrigin(0.5); this.finishLine.setTint(0xFFFFFF); // Make it white this.finishLine.setDepth(1); // Ensure it appears above the road but below cars this.finishLine.alpha = 0.8; // Set initial alpha // Add grass sides this.leftGrass = this.add.tileSprite(50, 640, 100, 1280, 'side_grass'); this.rightGrass = this.add.tileSprite(750, 640, 100, 1280, 'side_grass'); // Add road lines that move this.roadLines = []; for (let i = 0; i < 5; i++) { let line = this.add.image(400, i * 150, 'road_line'); line.setScale(0.05); // Scale down the road line this.roadLines.push(line); } // Create car // Get the selected car from scene data const data = this.scene.settings.data; const selectedCar = data ? data.selectedCar : 'yoshi_car'; this.car = this.add.sprite(400, 1000, selectedCar); // Move player car lower this.car.setScale(0.5); // Adjust scale for the new sprite this.car.setDepth(5); // Set higher depth for player car this.car.currentSpeed = this.speed; // Track car's current speed this.car.baseSpeed = this.baseSpeed; // Track car's base speed this.car.position = 1; // Track race position // Create obstacle group first this.obstacles = this.physics.add.group(); // Create item boxes group this.itemBoxes = this.physics.add.group(); // Add collision detection between car and item boxes this.physics.add.overlap(this.car, this.itemBoxes, this.handleItemBoxCollision, null, this); // Track collected items for each racer this.collectedItems = new Map(); // Spawn item boxes periodically this.time.addEvent({ delay: 5000, // Every 5 seconds callback: this.spawnItemBox, callbackScope: this, loop: true }); // Create NPC racers from remaining characters const allCharacters = ['mario_car', 'luigi_car', 'toad_car', 'bowser_car', 'dk_car', 'peach_car', 'yoshi_car', 'ddkong_car']; const availableCharacters = allCharacters.filter(char => char !== selectedCar); // Create 3 NPC racers // Only create NPC racers if they don't exist yet if (this.npcRacers.length === 0) { // Shuffle available characters array const shuffledCharacters = [...availableCharacters].sort(() => Math.random() - 0.5); // Take first 3 characters for NPCs for (let i = 0; i < Math.min(3, shuffledCharacters.length); i++) { const npcChar = shuffledCharacters[i]; const npcX = 150 + (i * 250); // Evenly space NPCs horizontally const npcY = 400; // Initial Y position above player const npcRacer = this.add.sprite(npcX, npcY, npcChar); npcRacer.setScale(0.5); npcRacer.setDepth(5); // Set higher depth for NPC racers this.physics.add.existing(npcRacer); npcRacer.body.setCollideWorldBounds(true); npcRacer.body.setSize(100, 100); npcRacer.body.setOffset(-25, -20); // Add properties for AI behavior npcRacer.moveTimer = 0; npcRacer.targetX = npcX; npcRacer.baseSpeed = 85 + (Math.random() * 5); // Random base speed between 85-90 npcRacer.maxSpeed = 100; // Maximum speed cap at 100 npcRacer.currentSpeed = npcRacer.baseSpeed; // Start at base speed npcRacer.position = i + 2; // Initial race position npcRacer.distanceTraveled = 0; // Track distance this.npcRacers.push(npcRacer); // Add collision between NPCs and obstacles this.physics.add.collider(npcRacer, this.obstacles, this.handleNPCObstacleCollision, null, this); // Add collision between NPCs and item boxes this.physics.add.overlap(npcRacer, this.itemBoxes, this.handleItemBoxCollision, null, this); // Initialize collected items counter for this NPC this.collectedItems.set(npcRacer, 0); } } this.physics.add.existing(this.car); this.car.body.setCollideWorldBounds(true); this.car.body.setSize(100, 100); // Larger collision box for better detection this.car.body.setOffset(-25, -20); // Center the collision box // Enable physics for grass areas this.physics.add.existing(this.leftGrass, true); this.physics.add.existing(this.rightGrass, true); // Add overlap detection for grass this.physics.add.overlap(this.car, [this.leftGrass, this.rightGrass], this.handleGrassSlowdown, null, this); // Text displays removed // Add DK image to the corner (temporarily disabled) // this.dkImage = this.add.image(740, 60, 'dk_image'); // this.dkImage.setScale(0.7); // this.dkImage.setScrollFactor(0); // Add Peach image to the corner (temporarily disabled) // this.peachImage = this.add.image(660, 60, 'peach_image'); // this.peachImage.setScale(0.7); // this.peachImage.setScrollFactor(0); // Setup input handlers this.cursors = this.input.keyboard.createCursorKeys(); this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); // Add collision detection between car and obstacles this.physics.add.collider(this.car, this.obstacles, this.handleObstacleCollision, null, this); // Initialize base speed and max speed (in mph) this.baseSpeed = 50; // Min speed 50 mph this.maxSpeed = 100; // Max speed 100 mph // Variables for swipe detection this.touchStartX = 0; this.touchStartTime = 0; const swipeThreshold = 50; // Minimum swipe distance const swipeTimeThreshold = 300; // Maximum time for swipe in ms // Touch start handler this.input.on('pointerdown', (pointer) => { if (this.gameOver) { this.scene.restart(); this.gameOver = false; this.score = 0; return; } this.touchStartX = pointer.x; this.touchStartTime = pointer.time; }); // Touch end handler this.input.on('pointerup', (pointer) => { const swipeTime = pointer.time - this.touchStartTime; const swipeDistance = pointer.x - this.touchStartX; // Check if it's a valid swipe (fast enough and long enough) if (swipeTime < swipeTimeThreshold && Math.abs(swipeDistance) > swipeThreshold) { if (swipeDistance > 0) { // Swipe right this.car.body.setVelocityX(200); } else { // Swipe left this.car.body.setVelocityX(-200); } } }); // Touch move handler for continuous movement this.input.on('pointermove', (pointer) => { if (pointer.isDown) { const moveDistance = pointer.x - this.touchStartX; if (Math.abs(moveDistance) > swipeThreshold) { if (moveDistance > 0) { this.car.body.setVelocityX(200); } else { this.car.body.setVelocityX(-200); } } } }); // Spawn obstacles periodically this.time.addEvent({ delay: 2000, callback: this.spawnObstacle, callbackScope: this, loop: true }); // Remove score increment timer since we're not displaying score // this.time.addEvent({ // delay: 1000, // callback: this.increaseScore, // callbackScope: this, // loop: true // }); // Add countdown text this.sound.play('countdownSound'); const countdownText = this.add.text(400, 640, '3', { fontSize: '64px', fill: '#fff' }).setOrigin(0.5); // Countdown sequence this.time.delayedCall(1000, () => { countdownText.setText('2'); }); this.time.delayedCall(2000, () => { countdownText.setText('1'); }); this.time.delayedCall(3000, () => { countdownText.setText('GO!'); // Start the race this.speed = this.baseSpeed; // Start at base speed this.raceStarted = true; this.raceStartTime = this.time.now; this.lastUpdateTime = this.time.now; // Play race music // Add race music with proper audio key this.raceMusic = this.sound.add('MarioKartStadium', { loop: true, volume: 0.7 }); this.raceMusic.play(); }); this.time.delayedCall(4000, () => { countdownText.destroy(); }); } updateRankingDisplay() { if (!this.rankingTexts || !this.rankingTexts.length) return; // Constants for distance calculations const CAR_LENGTH_FT = 6; const SCREEN_HEIGHT_FT = 77; // 1280px represents ~77ft const PX_PER_FT = 1280 / SCREEN_HEIGHT_FT; // Get all racers (player and NPCs) const allRacers = [this.car, ...this.npcRacers]; // Sort racers by distance traveled const sortedRacers = [...allRacers].sort((a, b) => b.distanceTraveled - a.distanceTraveled); // Update each ranking text and racer position sortedRacers.forEach((racer, index) => { if (!this.rankingTexts[index]) return; const position = index + 1; const suffix = position === 1 ? 'st' : position === 2 ? 'nd' : position === 3 ? 'rd' : 'th'; let name; const racerKey = racer.texture.key.replace('_car', '').toUpperCase(); if (racer === this.car) { if (racerKey === 'MARIO' || racerKey === 'LUIGI' || racerKey === 'DK' || racerKey === 'YOSHI' || racerKey === 'DDKONG' || racerKey === 'BOWSER' || racerKey === 'PEACH' || racerKey === 'TOAD') { // Create face sprite if not exists if (!this.faceSprites) this.faceSprites = new Map(); if (!this.faceSprites.has(racer)) { const faceKey = racerKey === 'DK' ? 'donkey_kong_face' : racerKey === 'DDKONG' ? 'dd_kong_face' : racerKey.toLowerCase() + '_face'; const faceSprite = this.add.image(0, 0, faceKey); faceSprite.setScale(2.5); faceSprite.setScrollFactor(0); faceSprite.setDepth(3); // Set depth higher than background and text faceSprite.setVisible(true); this.faceSprites.set(racer, faceSprite); } name = ' (YOU)'; // Space for face sprite plus (YOU) } else { name = `${racerKey} (YOU)`; } } else { if (racerKey === 'MARIO' || racerKey === 'LUIGI' || racerKey === 'DK' || racerKey === 'YOSHI' || racerKey === 'DDKONG' || racerKey === 'BOWSER' || racerKey === 'PEACH' || racerKey === 'TOAD') { // Create face sprite if not exists if (!this.faceSprites) this.faceSprites = new Map(); if (!this.faceSprites.has(racer)) { const faceKey = racerKey === 'DK' ? 'donkey_kong_face' : racerKey === 'DDKONG' ? 'dd_kong_face' : racerKey.toLowerCase() + '_face'; const faceSprite = this.add.image(0, 0, faceKey); faceSprite.setScale(1.5); faceSprite.setScrollFactor(0); faceSprite.setDepth(3); // Set depth higher than background and text this.faceSprites.set(racer, faceSprite); } name = ' '; // Space for face sprite } else { name = racerKey; } } const speed = Math.round(racer === this.car ? this.speed : racer.currentSpeed); // Update Mario face sprite position if exists if (this.faceSprites && this.faceSprites.has(racer)) { const faceSprite = this.faceSprites.get(racer); faceSprite.x = this.rankingTexts[index].x + 10; faceSprite.y = this.rankingTexts[index].y + 12; faceSprite.setVisible(true); } // Calculate distances const distanceToFinish = Math.max(0, Math.round(this.finishLinePosition - racer.distanceTraveled)); const distanceFromPlayer = Math.round(racer.distanceTraveled - this.car.distanceTraveled); // Calculate visual position on screen if (racer === this.car) { // Player car stays at bottom racer.y = 1000; } else { // Calculate other cars' positions relative to player const relativeScreenPos = 1000 - (distanceFromPlayer * PX_PER_FT); // Only show cars within visible screen range if (relativeScreenPos > -50 && relativeScreenPos < 1280) { racer.y = relativeScreenPos; racer.visible = true; } else { racer.visible = false; } } // Format display text const speedText = `${speed}mph`.padStart(8, ' '); // Increased padding from 6 to 8 spaces const distanceText = `${distanceToFinish}ft`.padStart(7, ' '); const relativeDistText = racer === this.car ? '' : ` (${distanceFromPlayer > 0 ? '+' : ''}${distanceFromPlayer}ft)`; this.rankingTexts[index].setText( `${speedText} | ${distanceText}${relativeDistText}` ); }); } update() { if (this.gameOver || this.gameWon || !this.raceStarted) return; // Check for spacebar press to use item if (Phaser.Input.Keyboard.JustDown(this.spaceKey)) { this.activateItem(); } // Update ranking display this.updateRankingDisplay(); // Calculate delta time in seconds const currentTime = this.time.now; const deltaTime = (currentTime - this.lastUpdateTime) / 1000; // Convert to seconds this.lastUpdateTime = currentTime; // Handle acceleration/deceleration if (this.cursors.up.isDown && this.speed < this.maxSpeed) { // Accelerate when up arrow is pressed this.speed = Math.min(this.maxSpeed, this.speed + (this.acceleration * deltaTime)); } else if (this.cursors.left.isDown || this.cursors.right.isDown || this.input.activePointer.isDown) { // Decelerate when turning this.speed = Math.max(this.baseSpeed, this.speed - (5 * deltaTime * 2.237)); // Convert m/s² to mph } else { // Gradually return to base speed when no input if (this.speed > this.baseSpeed) { this.speed = Math.max(this.baseSpeed, this.speed - (3 * deltaTime * 2.237)); } else { this.speed = Math.min(this.baseSpeed, this.speed + (3 * deltaTime * 2.237)); } } // Update player's distance this.car.distanceTraveled = this.distanceTraveled; // Update NPC racers this.npcRacers.forEach(npc => { if (!npc.active) return; // Update NPC speed and distance regardless of visibility // Smoother lane changing npc.moveTimer -= this.game.loop.delta; if (npc.moveTimer <= 0) { npc.moveTimer = Phaser.Math.Between(2000, 4000); const lanes = [150, 300, 450, 600]; npc.targetX = lanes[Math.floor(Math.random() * lanes.length)]; } // Only update horizontal position if visible if (npc.visible) { // Smooth movement towards target lane const diff = npc.targetX - npc.x; if (Math.abs(diff) > 5) { // Lerp movement for smoother transition npc.x += diff * 0.02; // Limit maximum horizontal movement speed const maxHorizontalSpeed = 3; npc.x = Phaser.Math.Clamp( npc.x, npc.x - maxHorizontalSpeed, npc.x + maxHorizontalSpeed ); } } // Update NPC distance traveled regardless of visibility npc.distanceTraveled += (npc.currentSpeed / 60); // Calculate finish line approach for visible NPCs if (npc.visible && this.finishLinePosition - npc.distanceTraveled < 1000) { // Gradually move NPC towards finish line Y position const finishApproach = 1 - ((this.finishLinePosition - npc.distanceTraveled) / 1000); npc.y = Phaser.Math.Linear(npc.y, this.finishLine.y, finishApproach); } // Gentler speed variations with smaller oscillation const targetSpeed = Math.min( npc.maxSpeed, Math.max( npc.baseSpeed, // Minimum speed is base speed npc.baseSpeed + (Math.sin(this.time.now / 2000) * 5) // Gentler oscillation ) ); // More responsive speed adjustment npc.currentSpeed += (targetSpeed - npc.currentSpeed) * 0.2; }); // Update race positions const activeRacers = [this.car, ...this.npcRacers].filter(racer => !this.finishedRacers.includes(racer)); // Sort racers by distance traveled activeRacers.sort((a, b) => b.distanceTraveled - a.distanceTraveled); // Check for racers who finished activeRacers.forEach(racer => { if (racer.distanceTraveled >= this.finishLinePosition && !this.finishedRacers.includes(racer)) { const finishTime = ((this.time.now - this.raceStartTime) / 1000).toFixed(2); this.finishedRacers.push(racer); this.raceResults.push({ racer: racer, position: this.finishedRacers.length, time: finishTime }); } }); // Update positions for remaining racers activeRacers.forEach((racer, index) => { const newPosition = index + 1 + this.finishedRacers.length; if (racer.position !== newPosition) { racer.position = newPosition; if (racer === this.car) { this.updatePositionDisplay(newPosition); } } }); // Update distance traveled based on current speed (meters per second) this.distanceTraveled += (this.speed / 60); // Convert to meters per frame // Update finish line position based on distance const totalDistance = this.finishLinePosition; const viewportHeight = 1280; // Calculate finish line position with smoother approach let remainingDistance = this.finishLinePosition - this.distanceTraveled; // Calculate finish line position based on remaining distance let finishLineY; if (remainingDistance <= 77) { // When within 77 feet, smoothly drop the finish line from top to bottom const progress = 1 - (remainingDistance / 77); // 0 to 1 as we approach finishLineY = -50 + (progress * (viewportHeight + 50)); // Move from above screen to bottom } else { finishLineY = -50; // Keep it above screen until we're close } this.finishLine.y = finishLineY; // Make finish line more visible based on distance if (remainingDistance < 77) { // Show effects when within 77 feet // Calculate visibility factor (0 to 1) const visibilityFactor = 1 - (remainingDistance / 2000); // Increase scale as we get closer const baseScale = 2; const scaleIncrease = 1.5 * visibilityFactor; this.finishLine.setScale(baseScale + scaleIncrease, 0.3); // Make more opaque as we get closer this.finishLine.alpha = Math.min(1, 0.6 + (0.4 * visibilityFactor)); // Add pulsing effect when very close if (remainingDistance < 1000) { const pulseAmount = Math.sin(this.time.now / 200) * 0.2; this.finishLine.alpha = Math.min(1, this.finishLine.alpha + pulseAmount); } } else { // Reset to default values when far away this.finishLine.setScale(2, 0.3); this.finishLine.alpha = 0.6; } // Enhanced finish line visibility when within 77 feet if (remainingDistance < 77) { // Stronger pulsing effect this.finishLine.alpha = 0.8 + Math.sin(this.time.now / 150) * 0.2; // Make finish line larger as we approach const scaleFactor = 2 + (0.5 * (1 - (remainingDistance / 77))); this.finishLine.setScale(scaleFactor, 0.3); // Add white flash effect this.finishLine.setTint(0xFFFFFF + Math.sin(this.time.now / 100) * 0xFF); } else { // Reset finish line properties when far away this.finishLine.alpha = 0; this.finishLine.setScale(2, 0.3); this.finishLine.clearTint(); } // Check if reached finish line if (this.distanceTraveled >= this.finishLinePosition) { this.handleWin(); return; } // Check if car is not on grass, restore speed const carX = this.car.x; if (carX > 100 && carX < 700 && this.speed < this.baseSpeed) { // Gradually restore speed when back on road this.speed = Math.min(this.baseSpeed, this.speed * 1.1); // Update all movement speeds this.road.tilePositionY = this.speed / 60; this.leftGrass.tilePositionY = this.speed / 60; this.rightGrass.tilePositionY = this.speed / 60; // Update obstacle speeds this.obstacles.getChildren().forEach(obs => { if (obs && obs.active && obs.body) { obs.body.setVelocityY(this.speed); } }); } // Handle keyboard input if (this.cursors.left.isDown) { this.car.body.setVelocityX(-200); } else if (this.cursors.right.isDown) { this.car.body.setVelocityX(200); } else if (!this.input.activePointer.isDown) { // Only stop if no touch is active this.car.body.setVelocityX(0); } // Move road texture based on current speed this.road.tilePositionY += this.speed / 60; this.leftGrass.tilePositionY += this.speed / 60; this.rightGrass.tilePositionY += this.speed / 60; // Update obstacle velocities to match current speed this.obstacles.getChildren().forEach(obstacle => { if (obstacle && obstacle.active && obstacle.body) { // Calculate velocity ratio based on initial and current speed const velocityRatio = this.speed / obstacle.baseVelocity; obstacle.body.setVelocityY(this.speed * velocityRatio); } }); // Speed and distance displays removed // Calculate remaining distance remainingDistance = Math.max(0, this.finishLinePosition - this.distanceTraveled); // Play final lap sound when quarter mile (1320 feet) remaining if (!this.finalLapPlayed && remainingDistance <= 1320) { this.sound.play('finalLapSound'); this.finalLapPlayed = true; } // Move road lines for (let line of this.roadLines) { line.y += 5; if (line.y > 1280) { line.y = -50; } } // Remove obstacles that are off screen this.obstacles.getChildren().forEach(obstacle => { if (obstacle.y > 1280) { obstacle.destroy(); } }); // Remove item boxes that are off screen this.itemBoxes.getChildren().forEach(itemBox => { if (itemBox.y > 1280) { itemBox.destroy(); } }); } spawnObstacle() { if (this.gameOver || !this.raceStarted) return; // Determine if this spawn should be a piranha plant (20% chance) const isPiranhaPlant = Math.random() < 0.2; let xPos, randomType; if (isPiranhaPlant) { // Spawn piranha plant on either left or right side xPos = Math.random() < 0.5 ? 100 : 700; // Left or right side randomType = 'piranha_plant'; } else { // Normal obstacle spawn - only on road area (between 150 and 650) const obstacleTypes = ['obstacle_cone', 'obstacle_barrier', 'obstacle_oil']; randomType = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)]; xPos = Phaser.Math.Between(150, 650); // Keep obstacles on the road } const obstacle = this.physics.add.sprite(xPos, -50, randomType); // Set scale based on obstacle type if (randomType === 'piranha_plant') { obstacle.setScale(1); } else { obstacle.setScale(0.08); } obstacle.baseVelocity = this.speed; // Store initial velocity this.obstacles.add(obstacle); // Set appropriate collision boxes based on obstacle type if (randomType === 'obstacle_barrier') { obstacle.body.setSize(800, 100); // Wider but shorter for barrier } else if (randomType === 'obstacle_oil') { obstacle.body.setSize(100, 100); // Square for oil spill } else if (randomType === 'piranha_plant') { obstacle.body.setSize(50, 60); // Custom size for piranha plant } else { obstacle.body.setSize(70, 70); // Default size for cone } obstacle.body.setOffset(0, 0); // Center the collision box // Set initial velocity based on current game speed obstacle.body.setVelocityY(this.speed); obstacle.body.enable = true; // Check if car is on grass and adjust new obstacle speed accordingly const carX = this.car.x; if (carX <= 100 || carX >= 700) { obstacle.body.setVelocityY(this.speed * 0.7); } } increaseScore() { if (!this.gameOver && this.raceStarted) { this.score += 10; // Remove score text update since the text display was removed } } handleWin() { this.gameWon = true; this.speed = 0; if (this.raceMusic) this.raceMusic.stop(); this.sound.play('winSound'); // Stop all obstacles this.obstacles.getChildren().forEach(obs => { if (obs && obs.active && obs.body) { obs.body.setVelocityY(0); } }); // Display win message // Create results display let resultsText = 'Race Results:\n\n'; // Get all racers including player const allRacers = [this.car, ...this.npcRacers]; // Create array to hold all racer results const allResults = []; // First, add all finished racers in their correct order this.finishedRacers.forEach((racer, index) => { const finishTime = ((this.time.now - this.raceStartTime) / 1000).toFixed(2); allResults.push({ racer: racer, position: index + 1, time: finishTime, finished: true }); }); // Then add remaining racers sorted by distance const remainingRacers = allRacers.filter(racer => !this.finishedRacers.includes(racer)); remainingRacers.sort((a, b) => b.distanceTraveled - a.distanceTraveled); remainingRacers.forEach((racer, index) => { const currentPosition = allResults.length + 1; const time = ((this.time.now - this.raceStartTime) / 1000).toFixed(2); allResults.push({ racer: racer, position: currentPosition, time: time, finished: false }); }); // Display all results with correct position formatting // Clear any existing face sprites before creating new ones if (this.faceSprites) { this.faceSprites.forEach(sprite => { if (sprite && sprite.destroy) { sprite.destroy(); } }); this.faceSprites.clear(); } allResults.forEach(result => { let displayName = result.racer.texture.key.replace('_car', '').toUpperCase(); if (displayName === 'MARIO' || displayName === 'LUIGI' || displayName === 'DK' || displayName === 'YOSHI' || displayName === 'DDKONG' || displayName === 'BOWSER' || displayName === 'PEACH' || displayName === 'TOAD') { // Create face sprite for final results const faceSprite = this.add.image(240, 400 + (result.position - 1) * 35, displayName === 'DK' ? 'donkey_kong_face' : displayName === 'DDKONG' ? 'dd_kong_face' : displayName === 'BOWSER' ? 'bowser_face' : displayName === 'TOAD' ? 'toad_face' : displayName.toLowerCase() + '_face'); faceSprite.setScale(2.5); faceSprite.setDepth(2); displayName = result.racer === this.car ? ' (YOU)' : ' '; // Space for face sprite } else if (result.racer === this.car) { displayName = `${displayName} (YOU)`; } // Add position suffix const position = result.position; const suffix = position === 1 ? 'st' : position === 2 ? 'nd' : position === 3 ? 'rd' : 'th'; resultsText += `${position}${suffix} ${displayName} - ${result.time}s\n`; }); const winText = this.add.text(400, 400, resultsText, { fontSize: '28px', fill: '#fff', align: 'center', lineSpacing: 10 }); winText.setOrigin(0.5); const tapText = this.add.text(400, 700, 'Tap to restart', { fontSize: '24px', fill: '#fff', align: 'center' }); tapText.setOrigin(0.5); // Allow restart on tap/click this.input.on('pointerdown', () => { if (this.gameWon) { // Clean up face sprites and UI elements if (this.faceSprites) { this.faceSprites.forEach(sprite => { if (sprite && sprite.destroy) { sprite.destroy(); } }); this.faceSprites.clear(); } // Reset game state this.scene.restart(); this.gameWon = false; this.distanceTraveled = 0; } }); } handleNPCObstacleCollision(npc, obstacle) { // Minimal speed reduction on obstacle collision npc.currentSpeed = Math.max(npc.baseSpeed * 0.9, npc.currentSpeed * 0.85); // Remove the obstacle obstacle.destroy(); // Faster speed recovery this.time.delayedCall(1000, () => { if (npc.active) { // Recover to a speed closer to max npc.currentSpeed = Math.max(npc.baseSpeed, npc.maxSpeed * 0.95); } }); } updatePositionDisplay(position) { try { // Create initial position text if it doesn't exist if (!this.positionText) { // Position text display removed } // Only update if the text object exists and is valid if (this.positionText && !this.positionText.destroyed) { const positionSuffix = position === 1 ? 'st' : position === 2 ? 'nd' : position === 3 ? 'rd' : 'th'; this.positionText.setText(`Position: ${position}${positionSuffix}`); } } catch (error) { console.warn('Error updating position display:', error); } } handleObstacleCollision(car, obstacle) { // Don't process collision if game is over if (this.gameOver) return; // Clear any existing recovery timer if (this.speedRecoveryTimer) { this.speedRecoveryTimer.remove(false); } // Get current speed before reduction const originalSpeed = this.speed; // Prevent car from moving down car.body.setVelocityY(0); // Reduce speed by 30% this.speed = Math.max(100, originalSpeed * 0.7); // Update road movement speed this.road.tilePositionY = this.speed / 60; this.leftGrass.tilePositionY = this.speed / 60; this.rightGrass.tilePositionY = this.speed / 60; // Update all active obstacles with new speed this.obstacles.getChildren().forEach(obs => { if (obs && obs.active && obs.body) { obs.body.setVelocityY(this.speed); } }); // Remove the collided obstacle obstacle.destroy(); // Create new recovery timer this.speedRecoveryTimer = this.time.delayedCall(3000, () => { if (!this.gameOver) { // Restore to original speed this.speed = this.baseSpeed; // Update road movement speed this.road.tilePositionY = this.speed / 60; this.leftGrass.tilePositionY = this.speed / 60; this.rightGrass.tilePositionY = this.speed / 60; // Update all obstacles to restored speed this.obstacles.getChildren().forEach(obs => { if (obs && obs.active && obs.body) { obs.body.setVelocityY(this.speed); } }); } }, null, this); } handleGrassSlowdown(car) { // Don't process if game is over if (this.gameOver) return; // Calculate reduced speed (70% of current speed) let reducedSpeed = this.speed * 0.8; // Ensure speed doesn't go below 50 mph (minimum speed) reducedSpeed = Math.max(50, reducedSpeed); // Only update speed if it would be lower but not below minimum if (this.speed > reducedSpeed) { // Apply reduced speed to all moving elements this.speed = reducedSpeed; // Update road movement speed this.road.tilePositionY = this.speed / 60; this.leftGrass.tilePositionY = this.speed / 60; this.rightGrass.tilePositionY = this.speed / 60; // Update all existing obstacles with new speed immediately this.obstacles.getChildren().forEach(obs => { if (obs && obs.active && obs.body) { obs.body.setVelocityY(this.speed); } }); } } spawnItemBox() { if (this.gameOver || !this.raceStarted) return; const x = Phaser.Math.Between(100, 700); const itemBox = this.physics.add.sprite(x, -50, 'item_box'); // Ensure animation exists and start it immediately if (this.anims.exists('item_box_spin')) { itemBox.anims.play('item_box_spin', true); } itemBox.setScale(0.5); this.itemBoxes.add(itemBox); // Set collision box itemBox.body.setSize(80, 80); itemBox.body.setOffset(0, 0); // Set velocity based on current game speed (5% faster) itemBox.body.setVelocityY(this.speed * 1.05); } handleItemBoxCollision(racer, itemBox) { // Remove the item box itemBox.destroy(); if (racer === this.car) { // Only give item if no item is currently held if (!this.currentItem) { // Play item box collection sound this.sound.play('itemBoxSound'); // Items array const items = ['star', 'mushroom', 'bomb', 'red_shell']; this.currentItem = items[Math.floor(Math.random() * items.length)]; // Hide all items initially this.starSprite.setVisible(false); this.mushroomSprite.setVisible(false); this.bombSprite.setVisible(false); this.redShellSprite.setVisible(false); // Start rotation animation let rotationCount = 0; const totalRotations = 10; // Number of rotations before stopping const rotationInterval = 100; // Time between each item change (ms) const rotateItems = () => { // Hide all items this.starSprite.setVisible(false); this.mushroomSprite.setVisible(false); this.bombSprite.setVisible(false); this.redShellSprite.setVisible(false); // Show current rotation item const currentItem = items[rotationCount % items.length]; if (currentItem === 'star') this.starSprite.setVisible(true); else if (currentItem === 'mushroom') this.mushroomSprite.setVisible(true); else if (currentItem === 'red_shell') this.redShellSprite.setVisible(true); else if (currentItem === 'bomb') this.bombSprite.setVisible(true); rotationCount++; // Continue rotation or stop at final item if (rotationCount < totalRotations) { this.time.delayedCall(rotationInterval, rotateItems, [], this); } else { // Show final selected item this.starSprite.setVisible(false); this.mushroomSprite.setVisible(false); this.bombSprite.setVisible(false); this.redShellSprite.setVisible(false); if (this.currentItem === 'star') this.starSprite.setVisible(true); else if (this.currentItem === 'mushroom') this.mushroomSprite.setVisible(true); else if (this.currentItem === 'red_shell') this.redShellSprite.setVisible(true); else if (this.currentItem === 'bomb') this.bombSprite.setVisible(true); } }; // Start the rotation rotateItems(); } } else { // NPC collected item const currentCount = this.collectedItems.get(racer) || 0; this.collectedItems.set(racer, currentCount + 1); } } activateItem() { if (!this.currentItem || this.starBoostActive || this.gameOver || !this.raceStarted) return; if (this.currentItem === 'bomb') { // Hide the bomb sprite this.bombSprite.setVisible(false); // Create bomb projectile const bomb = this.add.sprite(this.car.x, this.car.y, 'bomb'); bomb.setScale(1.5); // Animate bomb throwing upward this.tweens.add({ targets: bomb, y: bomb.y - 400, duration: 1000, ease: 'Power1', onComplete: () => { // Create explosion effect and play sound const explosion = this.add.sprite(bomb.x, bomb.y, 'explosion'); explosion.setScale(0.5); this.sound.play('explosionSound'); // Affect nearby racers // Affect nearby racers, obstacles, and item boxes const explosionRadius = 200; // Handle racers this.npcRacers.forEach(npc => { const distance = Phaser.Math.Distance.Between( bomb.x, bomb.y, npc.x, npc.y ); if (distance <= explosionRadius) { // Slow down affected racers npc.currentSpeed = 60; // Restore speed after 3 seconds this.time.delayedCall(3000, () => { if (npc.active) { npc.currentSpeed = npc.baseSpeed; } }); } }); // Handle obstacles this.obstacles.getChildren().forEach(obstacle => { const distance = Phaser.Math.Distance.Between( bomb.x, bomb.y, obstacle.x, obstacle.y ); if (distance <= explosionRadius) { obstacle.destroy(); } }); // Handle item boxes this.itemBoxes.getChildren().forEach(itemBox => { const distance = Phaser.Math.Distance.Between( bomb.x, bomb.y, itemBox.x, itemBox.y ); if (distance <= explosionRadius) { itemBox.destroy(); } }); // Remove explosion after animation this.time.delayedCall(500, () => { explosion.destroy(); }); // Remove bomb sprite bomb.destroy(); } }); } else if (this.currentItem === 'star') { // Hide the star this.starSprite.setVisible(false); // Activate star speed boost this.starBoostActive = true; this.maxSpeed = 200; // Star boost doubles max speed // Speed up background elements const updateBackgroundSpeed = () => { if (this.starBoostActive) { this.road.tilePositionY += this.speed / 20; // Triple the normal speed effect this.leftGrass.tilePositionY += this.speed / 20; this.rightGrass.tilePositionY += this.speed / 20; } }; // Add continuous motion blur effect const speedEffect = this.time.addEvent({ delay: 16, // ~60fps callback: updateBackgroundSpeed, loop: true }); // Add visual stretch effect this.tweens.add({ targets: [this.road, this.leftGrass, this.rightGrass], scaleY: 1.3, duration: 300, yoyo: false, ease: 'Quad.easeOut' }); // Create shine effect // Create more obvious alternating white/yellow shine effect let isWhite = true; this.carShineEffect = this.time.addEvent({ delay: 150, // Slower flash rate for more visibility callback: () => { if (isWhite) { // Bright white flash effect this.car.setTint(0xFFFFFF); this.car.alpha = 1; // Add bright white glow this.car.setPipeline('Light2D'); } else { // Bright yellow flash effect this.car.setTint(0xFFFF00); this.car.alpha = 0.6; // Remove pipeline for contrast this.car.resetPipeline(); } isWhite = !isWhite; }, loop: true }); // Play star theme music if (this.raceMusic) { this.raceMusic.pause(); } this.starTheme = this.sound.add('starTheme', { loop: true }); this.starTheme.play(); // Create timer to end boost if (this.starBoostTimer) { this.starBoostTimer.remove(); } this.starBoostTimer = this.time.delayedCall(5000, () => { this.starBoostActive = false; this.maxSpeed = this.normalMaxSpeed; this.speed = Math.min(this.speed, this.maxSpeed); // Reset speed effect if (speedEffect) { speedEffect.destroy(); } // Reset visual stretch effect this.tweens.add({ targets: [this.road, this.leftGrass, this.rightGrass], scaleY: 1, duration: 300, ease: 'Quad.easeOut' }); // Stop shine effect and reset car appearance if (this.carShineEffect) { this.carShineEffect.destroy(); this.car.clearTint(); this.car.alpha = 1; this.car.resetPipeline(); } // Stop star theme and resume race music if (this.starTheme) { this.starTheme.stop(); } if (this.raceMusic) { this.raceMusic.resume(); } }, null, this); } else if (this.currentItem === 'mushroom') { // Hide the mushroom this.mushroomSprite.setVisible(false); // Play mushroom boost sound this.sound.play('mushroomBoostSound'); // Instant speed boost this.speed = Math.min(150, this.speed + 50); // Mushroom boost adds 50mph up to 150mph max // Create speed effect this.road.tilePositionY += this.speed / 30; // Double the normal speed effect this.leftGrass.tilePositionY += this.speed / 30; this.rightGrass.tilePositionY += this.speed / 30; // Add motion blur effect this.tweens.add({ targets: [this.road, this.leftGrass, this.rightGrass], scaleY: 1.2, duration: 200, yoyo: true, ease: 'Quad.easeOut' }); } else if (this.currentItem === 'red_shell') { // Hide the red shell from item display this.redShellSprite.setVisible(false); // Create red shell projectile const shell = this.add.sprite(this.car.x, this.car.y - 50, 'red_shell'); shell.setScale(0.5); // Forward movement this.tweens.add({ targets: shell, y: shell.y - 400, duration: 1000, ease: 'Linear', onUpdate: () => { // Check for collisions during forward movement this.npcRacers.forEach(npc => { if (npc.visible && Phaser.Math.Distance.Between(shell.x, shell.y, npc.x, npc.y) < 35) { // Slow down hit racers npc.currentSpeed = Math.max(50, npc.currentSpeed * 0.5); // Restore speed after 3 seconds this.time.delayedCall(3000, () => { if (npc.active) { npc.currentSpeed = npc.baseSpeed; } }); } }); }, onComplete: () => { // Return movement this.tweens.add({ targets: shell, y: this.car.y, duration: 1000, ease: 'Linear', onComplete: () => { // Check for collisions with NPCs during return this.npcRacers.forEach(npc => { if (npc.visible && Phaser.Math.Distance.Between(shell.x, shell.y, npc.x, npc.y) < 35) { // Slow down hit racers npc.currentSpeed = Math.max(50, npc.currentSpeed * 0.5); // Restore speed after 3 seconds this.time.delayedCall(3000, () => { if (npc.active) { npc.currentSpeed = npc.baseSpeed; } }); } }); shell.destroy(); } }); } }); } // Clear current item this.currentItem = null; } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: container, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 1280, physics: { default: 'arcade', arcade: { debug: false } }, scene: [CarSelectionScene, RacingGame] }; window.phaserGame = new Phaser.Game(config);