Axels Homepage

Hinweis: Das ist das Ende der Metanavigation. Es folgt die Kontext-Spalte.

Hinweis: Das ist das Ende der Kontext-Spalte.

Sie sind hier: » PC + Co. » Javascript » Labyrinth

Javascript - Labyrinth-Spiel

Einleitung

Im Mai 2001 wurde meine Startseite nach langer Zeit einmal wieder ausgewechselt.

Warum? Nun, ich sehe den Pizza-essenden und zufrieden schmatzenden Surfer vor mir, der sich gemütlich zurückgelehnt, ganz locker, lässig und leger per Maus durch die unendlichen Welten klickt...
Dieses arme Geschöpf wird von mir nun etwas gequält, da es keinen [weiter >>>] - Button auf der Startseite gibt. Stattdessen wird er mit einer kleinen kurzweiligen Spielerei aufgehalten und für einen Moment aus der gewohnten Lethargie gerissen.

Heute ist selbige wieder verschwunden, aber wer schwelgt denn nicht gern in Nostalgie?

Seitenanfang

Demo

Wer will: hier ist nochmal die ehemalige Startseite

Seitenanfang

Spielprinzip

Man sieht ein einfaches, kleines Labyrinth. Dieses ist mit der Maus - wie beim "heissen Draht" - zu durchqueren, ohne eine Wand zu berühren. Nach 3 Fehlversuchen erscheint ein anderes Labyrinth, an dem man sich erneut versuchen darf.
Hat man es von einem Fähnchen zum anderen geschafft, so wird meine Webseite (endlich) geladen.

Seitenanfang

Wie es funktioniert...

Das Ganze ist komplett mit JavaScript realisiert. Auf die einzelnen notwendigen Elemente gehe ich nachfolgend ein. Um den kompletten Code zu sehen, solltest Du dir die ZIP-Datei herunterladen.

Was ich beschreiben werde:

• Ablage der Labyrinth-Daten
• Spielfläche erstellen und Spielsteuerung

Bei Interesse empfehle ich den Download der zugehörigen Dateien. Der nachfolgend beschriebene JavaScript-Code ist in der Datei login.html enthalten.

Bei weitergehenden Fragen schreib mir eine E-Mail. Wenn es von allgmeinen Interesse sein könnte, so werde ich diesen Text ergänzen.

Ablage der Labyrinth-Daten

Als Ausgangspunkt werden die einzelnen Labyrinthe benötigt - die notwendigen Daten sind in einem Array abgelegt. Das Ganze muss man sich so vorstellen, dass man tabellenartig eine rechteckige Spielfläche hat. Jede Tabellenzelle kann mit genau einer Funktionalität belegt werden: entweder dient sie als Start/Ziel (codiert mit Ziffer 0), als Wegfläche (1), als Wand (3), ...

Anbei ein kleines Beispiel eines 4x3 grossen Feldes:


Dieses Spielfeld würde bei Verwendung des Trennzeichens "|" für eine neue Zeile codiert werden als:

3033|3113|3303|

Auf diese Weise sind alle "Level" in je einer Zeile abgelegt.

Und wie erstellt man solche Spielflächen?
Man kann kariertes Papier nehmen und es sich aufzeichnen und dann die Zahlen "einhacken"... - ich habe mir einen separaten (sehr einfachen) Editor geschrieben, der mich das Spielfeld zusammenklicken läßt und mir dann die Levelcodes ausgibt. Er liegt dem Download-File als "special Bonus" bei.

Spielfläche erstellen und Spielsteuerung

Nachdem wir die Leveldaten pro Feld in Form einer Ziffer haben, lädt man eine je eine Gafik, deren Name sich im Dateinamen um genau diese Ziffer unterscheidet. Der Einfachheit halber wird ein document.write() zum Erstellen der Grafiken im Browser-Dokument verwendet.
Zunächst bestimme ich (weil ich ein Rechteck als Fläche annehme) die Breite des Spielfeldes: Es ist genauso breit, wie in der ersten gefundenen Zeile des Levels Felder existieren:

var dim_x=level.indexOf("|");

Damit werden die Leveldaten zeilenweise und Spalte für Spalte gelesen. Die pro Feld zu ladende Grafik heisst hier "./img/[Pfad]/field_[Ziffer].gif".
[Pfad] ist hier der Name eines Verzeichnisses, wo die Grafiken abgelegt sind.
[Ziffer] entspricht der Ziffer an der Stelle "x" in der Zeile "y".
In der Zeile unterhalb der document.write-Funktion wird die Variable "level_steps" gefüllt. Sie enthält (für die Spielsteuerung) die Anzahl der Felder, die auf dem Weg zurückgelegt werden müssen.

for(y=0; y<(level.split("|").length-1); y++)
{
  for (x=0; x<dim_x; x++)
  {
    document.write( '<IMG SRC="[Pfad]/field_[Ziffer].gif" [...]');
    if (level.split("|")[y].substr(x,1) < 2 ) level_steps = level_steps+1;
  }
  document.write('<BR>');
}

In der Klammer [...] sind für das Spiel noch notwendige Informationen im Quelltext wiederzufinden:

• Der (Objekt-)Name der Grafik wird zugewiesen mit
  NAME="IMG_LAB_[Spalte]_[Zeile]"
  Dies wird benötigt, wenn man die Grafik nicht per Index, sondern per Name ansprechen will. Dass in diesem Namen Spalte und Zeile enthalten sind, kommt uns an dieser Stelle natürlich entgegen.
• Aufruf einer Javascript-Funktion beim Event MouseOver: hier setzt dann unsere Spielsteuerung an.

...und nun zur Spielsteuerung...

Kernpunkt der Spielsteuerung ist die im Event MouseOver zugeordnete Funktion "check_field()" - sie wird mit einem Parameter aufgerufen - dem Namen des Grafik-Objektes, das von der Maus berührt worden ist.
In der Eigenschaft src des Image-Objektes ist der Name der angezeigten Grafik-Datei enthalten. Ist die angezeigte Grafik ein Stück des Weges (Start/ Ziel oder der Weg selbst), dann wird ein Zähler (Variable found) erhöht. Wenn der found den erforderlichen Wert von level_steps erreicht, dann ist auch das Zielfeld erreicht und es wird das Laden der eigentlichen Startseite veranlasst: document.location.href=[URL];

Desweiteren müssen dei Fehlversuche erfasst werden: dazu wird in der besagten Funktion check_field() der Name der Grafik-Datei der Wandflächen abgefragt. Wurde eine Wand berührt, so wir der Zähler found auf Null zurückgesetzt und die Zahl der Restarts um eins erhöht. Nach 3 Restarts wird die Datei erneut geladen und per Zufall (hoffentlich) ein anderes Labyrinth geladen, wo das Ganze von Neuem beginnt.

Seitenanfang

Download

In der hier angegebenen ZIP-Datei finden Sie das Spiel in der index.html (weil es auf meiner Webseite die Startseite ist). Beigelegt ist auch ein einfacher Level-Editor, der ebenfalls mit JavaScript geschrieben wurde. Mit diesem können Sie das Spielfeld zusammensetzen. Auf Knopfdruck werden Ihnen die Leveldaten angezeigt, die Sie manuell in die Datei level_data.js einfügen müssten.

js_labyrinth.zip (20 kB)

verwandtes Thema:

Download-Seite mit allen aufgeführten Dateien und Programmen

Seitenanfang