From ef8c9b51f30515b66c3bd7db279b2b83bc4a04fc Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Sat, 27 Sep 2025 21:40:45 +0200 Subject: [PATCH] =?UTF-8?q?=C3=84nderung:=20Anpassung=20der=20Stra=C3=9Fen?= =?UTF-8?q?koordinaten=20und=20Optimierung=20der=20Kollisionserkennung=20i?= =?UTF-8?q?m=20Taxi-Spiel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ä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. --- frontend/src/data/streetCoordinates.json | 1 - frontend/src/utils/streetCoordinates.js | 30 ++++----- frontend/src/views/minigames/TaxiGame.vue | 75 +++++++++++------------ 3 files changed, 51 insertions(+), 55 deletions(-) diff --git a/frontend/src/data/streetCoordinates.json b/frontend/src/data/streetCoordinates.json index a429692..6cf0dea 100644 --- a/frontend/src/data/streetCoordinates.json +++ b/frontend/src/data/streetCoordinates.json @@ -1,5 +1,4 @@ { - "tileSize": 640, "tiles": { "cornerBottomRight": { "regions": [ diff --git a/frontend/src/utils/streetCoordinates.js b/frontend/src/utils/streetCoordinates.js index 7ef18f8..5530097 100644 --- a/frontend/src/utils/streetCoordinates.js +++ b/frontend/src/utils/streetCoordinates.js @@ -36,31 +36,28 @@ class StreetCoordinates { /** * Gibt die Straßenregionen für einen Tile-Typ zurück * @param {string} tileType - Typ des Tiles (z.B. 'cornerBottomRight') - * @param {number} tileSize - Größe des Tiles in Pixeln - * @returns {Array} Array von Polygonen mit absoluten Koordinaten + * @returns {Array} Array von Polygonen mit relativen Koordinaten (0-1) */ - getDriveableRegions(tileType, tileSize) { + getDriveableRegions(tileType) { const tile = this.data.tiles[tileType]; if (!tile) { console.warn(`Tile type '${tileType}' not found`); return []; } - return tile.regions.map(region => - region.map(point => this.toAbsolute(point.x, point.y, tileSize)) - ); + // Gib die relativen Koordinaten (0-1) direkt zurück + return tile.regions; } /** * Prüft, ob ein Punkt innerhalb der fahrbaren Bereiche liegt - * @param {number} x - X-Koordinate des Punktes - * @param {number} y - Y-Koordinate des Punktes + * @param {number} x - X-Koordinate des Punktes (relativ 0-1) + * @param {number} y - Y-Koordinate des Punktes (relativ 0-1) * @param {string} tileType - Typ des Tiles - * @param {number} tileSize - Größe des Tiles in Pixeln * @returns {boolean} True wenn der Punkt fahrbar ist */ - isPointDriveable(x, y, tileType, tileSize) { - const regions = this.getDriveableRegions(tileType, tileSize); + isPointDriveable(x, y, tileType) { + const regions = this.getDriveableRegions(tileType); for (const region of regions) { if (this.isPointInPolygon(x, y, region)) { @@ -98,7 +95,7 @@ class StreetCoordinates { * @param {number} offsetY - Y-Offset für das Tile */ drawDriveableRegions(ctx, tileType, tileSize, offsetX = 0, offsetY = 0) { - const regions = this.getDriveableRegions(tileType, tileSize); + const regions = this.getDriveableRegions(tileType); ctx.fillStyle = '#f0f0f0'; // Straßenfarbe ctx.strokeStyle = '#333'; @@ -106,10 +103,15 @@ class StreetCoordinates { for (const region of regions) { ctx.beginPath(); - ctx.moveTo(region[0].x + offsetX, region[0].y + offsetY); + // Konvertiere relative Koordinaten zu absoluten für das Zeichnen + const startX = region[0].x * tileSize + offsetX; + const startY = region[0].y * tileSize + offsetY; + ctx.moveTo(startX, startY); for (let i = 1; i < region.length; i++) { - ctx.lineTo(region[i].x + offsetX, region[i].y + offsetY); + const x = region[i].x * tileSize + offsetX; + const y = region[i].y * tileSize + offsetY; + ctx.lineTo(x, y); } ctx.closePath(); diff --git a/frontend/src/views/minigames/TaxiGame.vue b/frontend/src/views/minigames/TaxiGame.vue index cfc1aa2..9976b48 100644 --- a/frontend/src/views/minigames/TaxiGame.vue +++ b/frontend/src/views/minigames/TaxiGame.vue @@ -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