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

feat(match3): Optimierung der L-Form-Match-Erkennung und Anpassung der Tile-Darstellung

Browse Source 
- Überarbeitung der Logik zur Erkennung von L-Form-Matches, um die Überprüfung der vertikalen und horizontalen Linien zu verbessern.
- Anpassung der Darstellung von Tiles, um Power-Up-Tiles korrekt zu behandeln und die Benutzeroberfläche zu vereinheitlichen.
- Erweiterung der Debug-Ausgaben zur besseren Nachverfolgbarkeit von L-Form-Matches und deren Längen.
This commit is contained in:
Torsten Schulz (local)
2025-08-27 13:15:36 +02:00
parent 9293ee31f7
commit 7b07b07bec
1 changed files with 190 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
frontend/src/views/minigames/Match3Game.vue
View File

@@ -106,13 +106,7 @@
@touchstart="onTileMouseDown($event, index)" @touchstart="onTileMouseDown($event, index)"
@touchend="onTileMouseUp($event, index)" @touchend="onTileMouseUp($event, index)"
@dblclick="handleDoubleClick(index, $event)"> @dblclick="handleDoubleClick(index, $event)">
<span v-if="tile && !isPowerUpTile(tile.type)" class="tile-symbol">{{ getTileSymbol(tile.type) }}</span> <span v-if="tile" class="tile-symbol">{{ getTileSymbol(tile.type) }}</span>
<span v-else-if="tile && isRocketTile(tile.type)" class="rocket-symbol">
🚀
</span>
<span v-else-if="tile && tile.type === 'bomb'" class="bomb-symbol">
💣
</span>
</div> </div>
</template> </template>
</div> </div>
@@ -1045,106 +1039,220 @@ export default {
const matches = []; const matches = [];
// L-Form Matches finden (alle 4 Richtungen) - PRIORITÄT vor regulären Matches // L-Form Matches finden (alle 4 Richtungen) - PRIORITÄT vor regulären Matches
for (let row = 0; row < this.boardHeight - 2; row++) { for (let row = 0; row < this.boardHeight; row++) {
for (let col = 0; col < this.boardWidth - 2; col++) { for (let col = 0; col < this.boardWidth; col++) {
// Prüfe ob an dieser Position ein Tile existiert
const centerIndex = this.coordsToIndex(row, col);
if (!centerIndex || !board[centerIndex]) continue;
const centerType = board[centerIndex].type;
if (this.isPowerUpTile(centerType)) continue; // Power-ups können nicht Teil von L-Formen sein
// L-Form nach rechts unten (┌) // L-Form nach rechts unten (┌)
if (row + 2 < this.boardHeight && col + 2 < this.boardWidth) { if (row + 2 < this.boardHeight && col + 2 < this.boardWidth) {
const verticalIndices = [ // Prüfe vertikale Linie nach unten
this.coordsToIndex(row, col), let verticalLength = 1;
this.coordsToIndex(row + 1, col), for (let r = row + 1; r < this.boardHeight; r++) {
this.coordsToIndex(row + 2, col) const index = this.coordsToIndex(r, col);
]; if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
const horizontalIndices = [ verticalLength++;
this.coordsToIndex(row, col), } else {
this.coordsToIndex(row, col + 1), break;
this.coordsToIndex(row, col + 2) }
]; }
// Prüfe ob alle Indizes gültig sind und Tiles existieren // Prüfe horizontale Linie nach rechts
if (verticalIndices.every(idx => idx !== null && board[idx]) && let horizontalLength = 1;
horizontalIndices.every(idx => idx !== null && board[idx]) && for (let c = col + 1; c < this.boardWidth; c++) {
this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) && const index = this.coordsToIndex(row, c);
this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) { if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
horizontalLength++;
} else {
break;
}
}
const cornerIndex = this.coordsToIndex(row, col); // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])]; if (verticalLength >= 3 && horizontalLength >= 3) {
matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'bottom-right' }); const lShapeIndices = [];
if (showDebug) console.log(`🔍 L-Form Match (┌): [${row},${col}] mit 3er vertikal und 3er horizontal`);
// Sammle alle Indizes der vertikalen Linie
for (let r = row; r < row + verticalLength; r++) {
const index = this.coordsToIndex(r, col);
if (index) lShapeIndices.push(index);
}
// Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
for (let c = col + 1; c < col + horizontalLength; c++) {
const index = this.coordsToIndex(row, c);
if (index) lShapeIndices.push(index);
}
matches.push({
type: 'l-shape',
indices: lShapeIndices,
corner: centerIndex,
direction: 'bottom-right',
verticalLength,
horizontalLength
});
if (showDebug) console.log(`🔍 L-Form Match (┌): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
} }
} }
// L-Form nach links unten (┐) // L-Form nach links unten (┐)
if (row + 2 < this.boardHeight && col >= 2) { if (row + 2 < this.boardHeight && col >= 2) {
const verticalIndices = [ // Prüfe vertikale Linie nach unten
this.coordsToIndex(row, col), let verticalLength = 1;
this.coordsToIndex(row + 1, col), for (let r = row + 1; r < this.boardHeight; r++) {
this.coordsToIndex(row + 2, col) const index = this.coordsToIndex(r, col);
]; if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
const horizontalIndices = [ verticalLength++;
this.coordsToIndex(row, col), } else {
this.coordsToIndex(row, col - 1), break;
this.coordsToIndex(row, col - 2) }
]; }
if (verticalIndices.every(idx => idx !== null && board[idx]) && // Prüfe horizontale Linie nach links
horizontalIndices.every(idx => idx !== null && board[idx]) && let horizontalLength = 1;
this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) && for (let c = col - 1; c >= 0; c--) {
this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) { const index = this.coordsToIndex(row, c);
if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
horizontalLength++;
} else {
break;
}
}
const cornerIndex = this.coordsToIndex(row, col); // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])]; if (verticalLength >= 3 && horizontalLength >= 3) {
matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'bottom-left' }); const lShapeIndices = [];
if (showDebug) console.log(`🔍 L-Form Match (┐): [${row},${col}] mit 3er vertikal und 3er horizontal`);
// Sammle alle Indizes der vertikalen Linie
for (let r = row; r < row + verticalLength; r++) {
const index = this.coordsToIndex(r, col);
if (index) lShapeIndices.push(index);
}
// Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
for (let c = col - 1; c >= col - horizontalLength; c--) {
const index = this.coordsToIndex(row, c);
if (index) lShapeIndices.push(index);
}
matches.push({
type: 'l-shape',
indices: lShapeIndices,
corner: centerIndex,
direction: 'bottom-left',
verticalLength,
horizontalLength
});
if (showDebug) console.log(`🔍 L-Form Match (┐): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
} }
} }
// L-Form nach rechts oben (└) // L-Form nach rechts oben (└)
if (row >= 2 && col + 2 < this.boardWidth) { if (row >= 2 && col + 2 < this.boardWidth) {
const verticalIndices = [ // Prüfe vertikale Linie nach oben
this.coordsToIndex(row, col), let verticalLength = 1;
this.coordsToIndex(row - 1, col), for (let r = row - 1; r >= 0; r--) {
this.coordsToIndex(row - 2, col) const index = this.coordsToIndex(r, col);
]; if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
const horizontalIndices = [ verticalLength++;
this.coordsToIndex(row, col), } else {
this.coordsToIndex(row, col + 1), break;
this.coordsToIndex(row, col + 2) }
]; }
if (verticalIndices.every(idx => idx !== null && board[idx]) && // Prüfe horizontale Linie nach rechts
horizontalIndices.every(idx => idx !== null && board[idx]) && let horizontalLength = 1;
this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) && for (let c = col + 1; c < this.boardWidth; c++) {
this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) { const index = this.coordsToIndex(row, c);
if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
horizontalLength++;
} else {
break;
}
}
const cornerIndex = this.coordsToIndex(row, col); // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])]; if (verticalLength >= 3 && horizontalLength >= 3) {
matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'top-right' }); const lShapeIndices = [];
if (showDebug) console.log(`🔍 L-Form Match (└): [${row},${col}] mit 3er vertikal und 3er horizontal`);
// Sammle alle Indizes der vertikalen Linie
for (let r = row; r >= row - verticalLength; r--) {
const index = this.coordsToIndex(r, col);
if (index) lShapeIndices.push(index);
}
// Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
for (let c = col + 1; c < col + horizontalLength; c++) {
const index = this.coordsToIndex(row, c);
if (index) lShapeIndices.push(index);
}
matches.push({
type: 'l-shape',
indices: lShapeIndices,
corner: centerIndex,
direction: 'top-right',
verticalLength,
horizontalLength
});
if (showDebug) console.log(`🔍 L-Form Match (└): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
} }
} }
// L-Form nach links oben (┘) // L-Form nach links oben (┘)
if (row >= 2 && col >= 2) { if (row >= 2 && col >= 2) {
const verticalIndices = [ // Prüfe vertikale Linie nach oben
this.coordsToIndex(row, col), let verticalLength = 1;
this.coordsToIndex(row - 1, col), for (let r = row - 1; r >= 0; r--) {
this.coordsToIndex(row - 2, col) const index = this.coordsToIndex(r, col);
]; if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
const horizontalIndices = [ verticalLength++;
this.coordsToIndex(row, col), } else {
this.coordsToIndex(row, col - 1), break;
this.coordsToIndex(row, col - 2) }
]; }
if (verticalIndices.every(idx => idx !== null && board[idx]) && // Prüfe horizontale Linie nach links
horizontalIndices.every(idx => idx !== null && board[idx]) && let horizontalLength = 1;
this.isValidMatchForLShape(verticalIndices[0], verticalIndices[1], verticalIndices[2], board) && for (let c = col - 1; c >= 0; c--) {
this.isValidMatchForLShape(horizontalIndices[0], horizontalIndices[1], horizontalIndices[2], board)) { const index = this.coordsToIndex(row, c);
if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
horizontalLength++;
} else {
break;
}
}
const cornerIndex = this.coordsToIndex(row, col); // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
const lShapeIndices = [...new Set([...verticalIndices, ...horizontalIndices])]; if (verticalLength >= 3 && horizontalLength >= 3) {
matches.push({ type: 'l-shape', indices: lShapeIndices, corner: cornerIndex, direction: 'top-left' }); const lShapeIndices = [];
if (showDebug) console.log(`🔍 L-Form Match (┘): [${row},${col}] mit 3er vertikal und 3er horizontal`);
// Sammle alle Indizes der vertikalen Linie
for (let r = row; r >= row - verticalLength; r--) {
const index = this.coordsToIndex(r, col);
if (index) lShapeIndices.push(index);
}
// Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
for (let c = col - 1; c >= col - horizontalLength; c--) {
const index = this.coordsToIndex(row, c);
if (index) lShapeIndices.push(index);
}
matches.push({
type: 'l-shape',
indices: lShapeIndices,
corner: centerIndex,
direction: 'top-left',
verticalLength,
horizontalLength
});
if (showDebug) console.log(`🔍 L-Form Match (┘): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
} }
} }
} }
@@ -1278,8 +1386,6 @@ export default {
} }
} }
if (showDebug) { if (showDebug) {
console.log(`🔍 Gefundene Matches: ${matches.length}`, matches); console.log(`🔍 Gefundene Matches: ${matches.length}`, matches);
} }