Geschrieben von:
Tech-Writer Thomas am 27.03.2026
Artikel teilen:
Aufrufe seit 27.3.2026
Gesamt: 12
Dieses Jahr: 12
Diesen Monat: 8
Diese Woche: 1
Heute: 1
Post Tags:
Im Rahmen eines Kundenprojekts entstand die Idee, einen flexiblen Labyrinth-Generator zu entwickeln, der sowohl interaktiv im Browser spielbar ist als auch als Druckvorlage (PDF) exportiert werden kann. Im Folgenden skizziere ich die technische Umsetzung – von der PHP-Generierung über die JavaScript Canvas-API bis hin zum FPDF-Export.
Copyright und Lizenz: Von "Blueflexx.com" mit KI-Hilfe erstellte Grafik zum Artikel über die Labyrinth-Generator-Technik
Inhalt:
Architektur im Überblick
- Frontend: HTML5, CSS3 (Bootstrap 3), JavaScript (ES6) mit Canvas-API für die Darstellung und Spielsteuerung.
- Backend: PHP (
generate_maze.php) für die Labyrinth-Generierung und Speicherung der Highscores via JSON. - PDF-Export: FPDF-Bibliothek mit eigener Erweiterung für gestrichelte Linien.
Serverseitige Labyrinth-Generierung (PHP)
Der Kernalgorithmus basiert auf einem modifizierten rekursiven Backtracking-Ansatz (Infos bei Wikipedia). Besonders spannend ist die Umsetzung von Brücken (Weave-Labyrinthe). Hier werden zusätzliche Flags im Grid-Array gesetzt, um Über- und Unterführungen zu markieren:
function addBridgesAndTunnels($grid, $size) {
for ($y = 1; $y < $size - 1; $y++) {
for ($x = 1; $x < $size - 1; $x++) {
if (mt_rand(1, 100) <= 8) { // 8% Chance für Brücken
$grid[$y][$x]['isBridge'] = true;
$grid[$y][$x]['bridgeDirection'] = mt_rand(0, 1) ? 'horizontal' : 'vertical';
if ($grid[$y][$x]['bridgeDirection'] === 'horizontal') {
$grid[$y][$x]['isBridgeWest'] = true;
$grid[$y][$x]['isBridgeEast'] = true;
} else {
$grid[$y][$x]['isBridgeNorth'] = true;
$grid[$y][$x]['isBridgeSouth'] = true;
}
}
}
}
return $grid;
}
Der kürzeste Lösungsweg wird über eine Breitensuche (BFS / Breadth-First Search) berechnet, welche die Brücken-Flags dynamisch als gültige Kanten evaluiert.
Canvas-Rendering und Bewegung im Frontend
Das Frontend empfängt das Labyrinth-Grid als JSON. Die Bewegung des Spielers (Zustands-Vektor) wird über die canMove-Methode validiert:
canMove(fromX, fromY, toX, toY) {
const cell = this.grid[fromY][fromX];
const dx = toX - fromX;
if (dx === 1) { // Bewegung nach Osten
if (cell.eastIsBridge === true) return true;
return !cell.east;
}
if (dx === -1) { // Bewegung nach Westen
if (cell.westIsBridge === true) return true;
return !cell.west;
}
// ... analog für Nord (dy = -1) und Süd (dy = 1)
}
PDF-Export mit FPDF und gestrichelten Linien
Standard-FPDF unterstützt out-of-the-box keine gestrichelten Linien. Durch das Erweitern der Klasse um die PDF-native Syntax SetDash werden Brücken-Wände visuell separiert:
if ($cell['bridgeDirection'] === 'horizontal') {
if (isset($cell['isBridgeWest']) && $cell['isBridgeWest'] && $cell['west']) {
$pdf->Line($xPos, $yPos, $xPos, $yPos + $cellSize);
}
if (isset($cell['isBridgeEast']) && $cell['isBridgeEast'] && $cell['east']) {
$pdf->Line($xPos + $cellSize, $yPos, $xPos + $cellSize, $yPos + $cellSize);
}
}
$cellSize gekoppelt. So skalieren die gestrichelten Linien auch bei extrem dichten Grids (z.B. 35×35) sauber mit!Highscores und Datenspeicherung
Die Bestenliste wird dateibasiert als JSON in einem Unterverzeichnis abgelegt. Ein separates Skript (save_score.php) übernimmt Server-seitige Validierungen (Anti-Cheat, Zeitauswertung), bevor das Datei-Locking (flock) die Schreiboperation triggert.
Fazit & Ausblick
Die strikte Trennung von Generierungslogik (PHP) und grafischer Repräsentation (JS Canvas / FPDF) sorgt für hochgradig modularen Code. Geplante Upgrades umfassen 3D-Labyrinthe und polare Gitter (Circular Mazes). Das fertige Tool ist auf der privaten Bananapage-Homepage produktiv im Einsatz.
Skalierbare Web-Architekturen für Ihr Projekt?
Sie planen eine interaktive Web-Applikation, benötigen performantes Canvas-Rendering oder automatisierte PDF-Reports? Als Full-Stack Experten bringen wir Ihre Software-Architektur zum Laufen.
Impessum des Autor Kontakt zum Autor
Werbung