Entfernung von Debugging-Ausgaben und Optimierung der Spiel-Logik im Taxi-Spiel

Änderungen:
- Entfernen von Konsolenausgaben zur Fahrzeug-Generierung, -Bewegung und -Kollision, um die Lesbarkeit des Codes zu verbessern.
- Anpassung der Spiel-Update-Logik zur Verwendung von requestAnimationFrame anstelle von setTimeout für eine flüssigere Animation.
- Vereinheitlichung der Timer-Logik zur Aktualisierung von Passagier-Timern und Minimap-Darstellung.

Diese Anpassungen verbessern die Performance und Benutzererfahrung des Spiels durch reduzierte Debugging-Ausgaben und optimierte Animationslogik.

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.`);
+        // Keine harte Korrektur und kein Stoppen: Autos dürfen weiterfahren,
-        car.speed = 0;
+        // 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) {
+      // (Logs entfernt)
-        console.log(`[🔄 UPDATE] Frame ${this._frameCount}, gameRunning: ${this.gameRunning}, isPaused: ${this.isPaused}, cars: ${this.cars.length}`);
-      }
       
       // 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.updatePassengerTimers();
+      this.lastPassengerTimerUpdate = nowTs;
-        this.lastPassengerTimerUpdate = nowTs;
-      }
       
       this.checkCollisions();
       this.render();
@@ -2012,14 +2000,12 @@ export default {
       // Radar-Messung prüfen (falls aktiv)
       this.checkRadarMeasurement();
 
-      // Minimap zeichnen (gedrosselt)
+      // Minimap jedes Frame zeichnen
-      if (nowTs - this.lastMinimapDraw >= this.minimapDrawInterval) {
+      this.drawMinimap();
-        this.drawMinimap();
+      this.lastMinimapDraw = nowTs;
-        this.lastMinimapDraw = nowTs;
-      }
       
-      // Update-Rate schneller: ~16x pro Sekunde (62ms)
+      // Nächsten Frame planen
-      this.gameLoop = setTimeout(this.update, 62);
+      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) {
+        if (this.gameRunning && !this.rafId) {
-          this.gameLoop = setTimeout(this.update, 62);
+          this.rafId = requestAnimationFrame(this.update);
         }
         
         // Motor startet automatisch bei der nächsten Beschleunigung