diff --git a/frontend/src/views/minigames/TaxiGame.vue b/frontend/src/views/minigames/TaxiGame.vue index 27df5e9..f1ec1e8 100644 --- a/frontend/src/views/minigames/TaxiGame.vue +++ b/frontend/src/views/minigames/TaxiGame.vue @@ -1439,7 +1439,6 @@ export default { // 20% Wahrscheinlichkeit pro Sekunde if (!this.isPaused && Math.random() < this.carSpawnProbability) { - console.log('[🚗 GENERATION] Attempting to spawn car, current cars:', this.cars.length); this.spawnCar(now); } }, @@ -1448,14 +1447,12 @@ export default { spawnCar(now = Date.now()) { // Begrenze die Anzahl der Autos (TEST: nur 1 Auto) if (this.cars.length >= 1) { - console.log('[🚗 SPAWN] Max cars reached:', this.cars.length); return; } // Spawne Auto auf einer befahrbaren Position const spawnPosition = this.getRandomCarSpawnPosition(); if (!spawnPosition) { - console.log('[🚗 SPAWN] No valid spawn position found'); return; // Keine gültige Spawn-Position gefunden } @@ -1478,11 +1475,7 @@ export default { targetLane: null // Zielspur basierend auf Zielrichtung }; - console.log(`[🚗 CREATE] New car created - ID: ${car.id}, Position: x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}, direction=${car.direction}, angle=${car.angle.toFixed(2)}, speed=${car.speed.toFixed(2)}`); - this.cars.push(car); - console.log(`[🚗 CREATE] Added car with ID: ${car.id}, Total cars now: ${this.cars.length}`); - console.log(`[🚗 CREATE] Car details: x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}, direction=${car.direction}, speed=${car.speed.toFixed(2)}`); }, // Ermittelt erlaubte Spawn-Richtungen basierend auf dem aktuellen Tile-Typ @@ -1524,7 +1517,6 @@ export default { // Finde eine zufällige befahrbare Spawn-Position für ein Auto getRandomCarSpawnPosition() { if (!this.currentMap || !this.currentMap.tiles) { - console.log('[🚗 SPAWN] No current map or tiles'); return null; } @@ -1534,11 +1526,9 @@ export default { // Erlaubte Spawn-Richtungen für den aktuellen Tile-Typ ermitteln const allowedDirections = this.getAllowedSpawnDirections(); - console.log('[🚗 SPAWN] Tile type:', tileType, 'Allowed directions:', allowedDirections); - console.log('[🚗 SPAWN] Tile size:', tileSize); + if (allowedDirections.length === 0) { - console.log('[🚗 SPAWN] No allowed spawn directions'); return null; // Keine erlaubten Spawn-Richtungen } @@ -1570,14 +1560,13 @@ export default { return null; } - console.log('[🚗 SPAWN] Selected direction:', randomDirection); - console.log('[🚗 SPAWN] Spawn position data:', spawnPos); + // Konvertiere relative Koordinaten zu absoluten Pixeln let x = (spawnPos.relativeX != null ? spawnPos.relativeX : (spawnPos.pickRelX ? spawnPos.pickRelX() : 0.5)) * tileSize; let y = (spawnPos.relativeY != null ? spawnPos.relativeY : (spawnPos.pickRelY ? spawnPos.pickRelY() : 0.5)) * tileSize; - console.log('[🚗 SPAWN] Before adjustment - x:', x.toFixed(2), 'y:', y.toFixed(2)); + // Passe Koordinaten an: Die Spawn-Position ist die Straßenlinie, aber wir brauchen die linke obere Ecke des Autos // Das Auto muss auf der Linie zentriert sein @@ -1598,8 +1587,7 @@ export default { break; } - console.log('[🚗 SPAWN] After adjustment - x:', x.toFixed(2), 'y:', y.toFixed(2)); - console.log('[🚗 SPAWN] Direction:', randomDirection, 'Absolute:', { x: x.toFixed(2), y: y.toFixed(2) }); + // laneCoord speichert die Zielspur (Mitte) auf der Querachse // Verwende die bereits berechneten absoluten x/y, um exakt dieselbe Spur zu halten @@ -1658,10 +1646,8 @@ export default { } if (onRoadPoints.length > 0) { - console.log(`[🚗 ON_ROAD] Car at x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)} - ON ROAD (points: ${onRoadPoints.join(', ')})`); return true; } else { - console.log(`[🚗 OFF_ROAD] Car at x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}, centerX=${centerX.toFixed(2)}, centerY=${centerY.toFixed(2)} - OFF ROAD (no points on road)`); return false; } }, @@ -1730,10 +1716,10 @@ export default { const maxAge = 45000; // 45 Sekunden const initialCarCount = this.cars.length; - console.log(`[🚗 UPDATE] Starting with ${initialCarCount} cars`); + this.cars = this.cars.filter((car, index) => { - console.log(`[🚗 UPDATE] Processing car ${index}: x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}, age=${(now - car.createdAt)}ms`); + // Entferne alte Autos // Bewege das Auto @@ -1741,7 +1727,7 @@ export default { // Entferne Autos mit speed=0 (off-road) if (car.speed === 0) { - console.log(`[🚗 UPDATE] Removing car ${index} - speed=0 (off-road)`); + return false; } @@ -1758,20 +1744,19 @@ export default { // - Obere Kante unter dem Canvas: y > tileSize if (car.x + carWidth < 0 || car.x > tileSize || car.y + carHeight < 0 || car.y > tileSize) { - console.log(`[🚗 UPDATE] Removing car ${index} - completely out of bounds (x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)})`); + return false; } - console.log(`[🚗 UPDATE] Keeping car ${index}`); + return true; }); - console.log(`[🚗 UPDATE] Finished with ${this.cars.length} cars (removed ${initialCarCount - this.cars.length})`); }, // Aktualisiere die Bewegung eines einzelnen Autos (vereinfachte Taxi-Logik) updateCarMovement(car) { - console.log(`[🚗 MOVE] Car ID: ${car.id} - Current: x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}, direction=${car.direction}`); + // 1) An Abbiegepunkt? Dann (ggf.) vorgegebene Zielrichtung übernehmen const forcedDir = this.shouldCarTurnAtIntersection(car); @@ -1781,7 +1766,7 @@ export default { let preferred = forcedDir; if (preferred && preferred !== car.direction) { - console.log(`[🚗 MOVE] Car ID: ${car.id} - Turning on ${tileType} from ${car.direction} to ${preferred}`); + // Beim Abbiegen: neue Spur bestimmen car.direction = preferred; if (preferred === 'left' || preferred === 'right') { @@ -1828,16 +1813,18 @@ export default { newX = centerX - car.width / 2; } - // 3) Position übernehmen + // 3) Position übernehmen (vorher letzte Position merken) + car.lastPosition = { x: car.x, y: car.y }; car.x = newX; car.y = newY; - console.log(`[🚗 MOVE] Car ID: ${car.id} - Moved to: x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}`); + // 4) Straße prüfen – bleibt es auf befahrbarer Fläche? if (!this.isCarOnRoad(car)) { - console.log(`[🚗 MOVE] Car ID: ${car.id} - OFF ROAD! Stopping car.`); - car.speed = 0; + // Keine harte Korrektur und kein Stoppen: Autos dürfen weiterfahren, + // Entfernen erfolgt erst, wenn das Fahrzeug komplett außerhalb ist. + // Optional könnten wir hier eine leichte Korrektur zur Spurmitte einbauen. } }, getPassengerTimeLeft(passenger) { @@ -1964,8 +1951,13 @@ export default { // Stoppe bestehende Game-Loop falls vorhanden if (this.gameLoop) { clearTimeout(this.gameLoop); + this.gameLoop = null; } - this.gameLoop = setTimeout(this.update, 62); + if (this.rafId) { + cancelAnimationFrame(this.rafId); + this.rafId = null; + } + this.rafId = requestAnimationFrame(this.update); }, update() { @@ -1977,9 +1969,7 @@ export default { // Debug: Log every 60 frames (about once per second) if (!this._frameCount) this._frameCount = 0; this._frameCount++; - if (this._frameCount % 60 === 0) { - console.log(`[🔄 UPDATE] Frame ${this._frameCount}, gameRunning: ${this.gameRunning}, isPaused: ${this.isPaused}, cars: ${this.cars.length}`); - } + // (Logs entfernt) // Ampelschaltung tick this.updateTrafficLights(); @@ -1999,12 +1989,10 @@ export default { this.updateTaxi(); this.handlePassengerActions(); - // Timer für geladene Passagiere aktualisieren (nach Passagier-Aktionen) - gedrosselt + // Timer für geladene Passagiere aktualisieren (ohne Drosselung) const nowTs = Date.now(); - if (nowTs - this.lastPassengerTimerUpdate >= 200) { // Alle 200ms statt jeden Frame - this.updatePassengerTimers(); - this.lastPassengerTimerUpdate = nowTs; - } + this.updatePassengerTimers(); + this.lastPassengerTimerUpdate = nowTs; this.checkCollisions(); this.render(); @@ -2012,14 +2000,12 @@ export default { // Radar-Messung prüfen (falls aktiv) this.checkRadarMeasurement(); - // Minimap zeichnen (gedrosselt) - if (nowTs - this.lastMinimapDraw >= this.minimapDrawInterval) { - this.drawMinimap(); - this.lastMinimapDraw = nowTs; - } + // Minimap jedes Frame zeichnen + this.drawMinimap(); + this.lastMinimapDraw = nowTs; - // Update-Rate schneller: ~16x pro Sekunde (62ms) - this.gameLoop = setTimeout(this.update, 62); + // Nächsten Frame planen + this.rafId = requestAnimationFrame(this.update); }, updateTaxi() { @@ -2708,7 +2694,7 @@ export default { }, handleCrashDialogClose() { - console.log('Crash-Dialog geschlossen, Spiel wird fortgesetzt'); + // (Log entfernt) this.isPaused = false; this.showPauseOverlay = false; @@ -2722,7 +2708,9 @@ export default { console.log('[🚗 GAME] Cleared all cars after dialog close'); try { clearTimeout(this.gameLoop); } catch (_) {} - this.gameLoop = setTimeout(this.update, 62); + this.gameLoop = null; + if (this.rafId) { cancelAnimationFrame(this.rafId); this.rafId = null; } + this.rafId = requestAnimationFrame(this.update); // Taxi bleibt auf dem aktuellen Tile, mittig platzieren this.taxi.speed = 0; @@ -3374,7 +3362,6 @@ export default { // Zeichne alle Autos drawCars() { - console.log(`[🚗 DRAW] Drawing ${this.cars.length} cars`); this.cars.forEach((car, index) => { const centerX = car.x + car.width/2; const centerY = car.y + car.height/2; @@ -3382,7 +3369,7 @@ export default { // Auto ist sichtbar wenn IRGENDEIN Teil im Canvas ist (nicht nur das Zentrum) const isVisible = !(car.x + car.width < 0 || car.x > 500 || car.y + car.height < 0 || car.y > 500); - console.log(`[🚗 DRAW] Car ${index}: x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}, centerX=${centerX.toFixed(2)}, centerY=${centerY.toFixed(2)}, direction=${car.direction}, speed=${car.speed.toFixed(2)}, VISIBLE=${isVisible}`); + this.ctx.save(); @@ -3412,7 +3399,6 @@ export default { this.ctx.rotate(finalAngle); if (this.carImage) { - console.log(`[🚗 DRAW] Drawing car ${index} with image at x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}`); // Zeichne Auto-Bild zentriert um den Transformationspunkt this.ctx.drawImage( this.carImage, @@ -3422,7 +3408,6 @@ export default { car.height ); } else { - console.log(`[🚗 DRAW] Drawing car ${index} with fallback rectangle at x=${car.x.toFixed(2)}, y=${car.y.toFixed(2)}`); // Fallback: Zeichne farbiges Rechteck wenn Bild nicht geladen this.ctx.fillStyle = car.color; this.ctx.fillRect(-car.width/2, -car.height/2, car.width, car.height); @@ -3800,11 +3785,15 @@ export default { async handleKeyDown(event) { // Browser-Shortcuts (F-Tasten, Strg/Meta+R) passieren lassen const key = event.key; + event.preventDefault(); const isFunctionKey = /^F\d{1,2}$/.test(key); const isReloadShortcut = (event.ctrlKey || event.metaKey) && (key === 'r' || key === 'R'); if (isFunctionKey || isReloadShortcut) { return; // nicht abfangen, Browser soll handeln } + // Keydown-Repeat und Mehrfach-Setzen unterdrücken + if (event.repeat) return; + if (this.keys[key]) return; this.keys[key] = true; @@ -4433,8 +4422,8 @@ export default { this.showPauseOverlay = false; // Game Loop neu starten - if (this.gameRunning && !this.gameLoop) { - this.gameLoop = setTimeout(this.update, 62); + if (this.gameRunning && !this.rafId) { + this.rafId = requestAnimationFrame(this.update); } // Motor startet automatisch bei der nächsten Beschleunigung