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

Änderung: Anpassung der Straßenkoordinaten und Optimierung der Kollisionserkennung im Taxi-Spiel

Browse Source 
Änderungen:
- Entfernung der `tileSize` aus der JSON-Datei, um die Handhabung der Koordinaten zu vereinheitlichen.
- Anpassung der Methode `getDriveableRegions`, um relative Koordinaten (0-1) direkt zurückzugeben.
- Aktualisierung der Kollisionserkennung im Taxi-Spiel zur Verwendung von absoluten Pixel-Koordinaten anstelle von relativen.
- Verbesserung der Lesbarkeit und Wartbarkeit des Codes durch Bereinigung überflüssiger Konvertierungen.

Diese Anpassungen erhöhen die Effizienz der Kollisionserkennung und verbessern die Handhabung der Straßenkoordinaten im Spiel.
This commit is contained in:
Torsten Schulz (local)
2025-09-27 21:40:45 +02:00
parent 8ead029f45
commit ef8c9b51f3
3 changed files with 51 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1959,7 +1959,7 @@ export default {
const originalTileSize = streetCoordinates.getOriginalTileSize(); // 640px
const currentTileSize = 500; // Aktuelle Render-Größe
// Hole die relativen Koordinaten direkt aus der JSON (0-1)
// Hole die relativen Koordinaten aus der JSON (0-1) und konvertiere zu absoluten Pixeln
const tileData = streetCoordinates.data.tiles[streetTileType];
const regions = tileData ? tileData.regions : [];
@@ -1968,17 +1968,17 @@ export default {
return true;
}
// Erstelle Taxi-Rechteck in relativen Koordinaten (0-1)
// Erstelle Taxi-Rechteck in absoluten Pixel-Koordinaten (500x500px)
const taxiRect = {
x: this.taxi.x / currentTileSize,
y: this.taxi.y / currentTileSize,
width: this.taxi.width / currentTileSize,
height: this.taxi.height / currentTileSize
x: this.taxi.x,
y: this.taxi.y,
width: this.taxi.width,
height: this.taxi.height
};
// Alle Tiles verwenden die gleiche Logik: Prüfe ob Taxi eine der Hindernis-Polylinien schneidet
// Erstelle rotiertes Rechteck
// Erstelle rotiertes Rechteck in absoluten Pixel-Koordinaten (500x500px)
const rotatedRect = {
cx: taxiRect.x + taxiRect.width / 2, // Mittelpunkt X
cy: taxiRect.y + taxiRect.height / 2, // Mittelpunkt Y
@@ -1992,11 +1992,10 @@ export default {
const region = regions[i];
// Jede Region ist eine Polylinie mit mehreren Punkten
if (region.length >= 2) {
// Verwende die relativen Koordinaten direkt aus der JSON (0-1)
// ohne die doppelte Konvertierung über getDriveableRegions
// Konvertiere relative Koordinaten (0-1) zu absoluten Pixeln (500x500px)
const regionPoints = region.map(point => ({
x: point.x, // Bereits relativ (0-1) aus der JSON
y: point.y // Bereits relativ (0-1) aus der JSON
x: point.x * currentTileSize, // Konvertiere von 0-1 zu 0-500px
y: point.y * currentTileSize // Konvertiere von 0-1 zu 0-500px
}));
// Verwende die robuste Kollisionserkennung für diese Region
@@ -2038,47 +2037,43 @@ export default {
// Prüft ob eine Linie ein rotiertes Rechteck schneidet
isLineCrossingRect(rect, line) {
// Konvertiere Linien-Koordinaten von absoluten Pixeln zu relativen (0-1)
const originalTileSize = 640; // Aus der JSON-Datei
const relativeLine = {
x1: line.x1 / originalTileSize,
y1: line.y1 / originalTileSize,
x2: line.x2 / originalTileSize,
y2: line.y2 / originalTileSize
// Verwende absolute Pixel-Koordinaten (500x500px)
const currentTileSize = 500; // Aktuelle Render-Größe
// Verwende Rechteck direkt in absoluten Koordinaten
const absoluteRect = {
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height
};
// Debug-Ausgabe bei jeder Kollisionsprüfung
console.log('🔍 KOLLISIONS-DEBUG:');
console.log('Taxi Rect (relativ):', rect);
console.log('Taxi Position (absolut):', { x: this.taxi.x, y: this.taxi.y, width: this.taxi.width, height: this.taxi.height });
console.log('Line (absolut aus JSON):', line);
console.log('Line (relativ konvertiert):', relativeLine);
console.log('Original Tile Size (JSON):', originalTileSize);
console.log('Current Tile Size:', this.tiles.size);
console.log('Taxi Angle:', this.taxi.angle);
console.log('Taxi ImageAngle:', this.taxi.imageAngle);
// Konvertiere Linien-Koordinaten von 640px zu absoluten Pixeln (500x500px)
const absoluteLine = {
x1: (line.x1 / 640) * currentTileSize,
y1: (line.y1 / 640) * currentTileSize,
x2: (line.x2 / 640) * currentTileSize,
y2: (line.y2 / 640) * currentTileSize
};
// Erstelle Polyline aus der Linie
// Erstelle Polyline aus der absoluten Linie
const polyline = [
{ x: relativeLine.x1, y: relativeLine.y1 },
{ x: relativeLine.x2, y: relativeLine.y2 }
{ x: absoluteLine.x1, y: absoluteLine.y1 },
{ x: absoluteLine.x2, y: absoluteLine.y2 }
];
// Erstelle rotiertes Rechteck
// Erstelle rotiertes Rechteck in absoluten Koordinaten (500x500px)
const rotatedRect = {
cx: rect.x + rect.width / 2, // Mittelpunkt X
cy: rect.y + rect.height / 2, // Mittelpunkt Y
cx: absoluteRect.x + absoluteRect.width / 2, // Mittelpunkt X
cy: absoluteRect.y + absoluteRect.height / 2, // Mittelpunkt Y
theta: this.taxi.imageAngle + this.taxi.angle, // Rotation
hx: rect.width / 2, // halbe Breite
hy: rect.height / 2 // halbe Höhe
hx: absoluteRect.width / 2, // halbe Breite
hy: absoluteRect.height / 2 // halbe Höhe
};
// Verwende die robuste Kollisionserkennung
const result = this.polylineIntersectsRotatedRect(polyline, rotatedRect);
// Debug-Ausgabe für Kollisionsergebnis (nur bei Fuel Horizontal Tiles)
// Diese Funktion wird nicht direkt für Fuel Tiles verwendet, daher keine Debug-Ausgabe hier
return result.hit;
},
@@ -3138,7 +3133,7 @@ export default {
if (!wantH && !wantV) return;
const streetTileType = this.mapTileTypeToStreetCoordinates(tileType);
const regions = streetCoordinates.getDriveableRegions(streetTileType, size);
const regions = streetCoordinates.getDriveableRegions(streetTileType);
if (!regions || regions.length === 0) return;
// Banddicke exakt 12px (bei Referenz 50px) skaliert auf aktuelle size