torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Ä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.
This commit is contained in:
Torsten Schulz (local)
2025-10-20 15:38:57 +02:00
parent bc3c765948
commit a542d99eb9
1 changed files with 43 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/views/minigames/TaxiGame.vue
View File

@@ -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.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) {
// 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