§2 Implementierung in html


Unser "Dungeon" lässt sich hervorragend in eine "Homepage" abbilden. Hierbei werden "Räume" durch eine HTML-Dateien dargestellt, Türen durch "Links". Wir bekommen dadurch nahezu eine 1:1-Abbildung des Spiels in den Text.
Zur Umsetzung werden ein paar Elemente eines HTML-Dokumentes besprochen.

« Einige Elemente eines HTML-Dokumentes

HTML-Dokumente sind Textdateien, die zusätzliche Informationen in sogenannten "Tags" enthalten.
Beispiel:

<html>

<head>

<title>Kuckuck</title>

</head>

<body>

Der Kuckuck ist ein seltsamer Vogel. ...

</body>

</html>


<html>> bedeutet, dass der Browser den folgenden Text als HTML-Text zu interpretieren hat (wird ganz am Schluss durch </html> beendet).
Mit <head> werden dem Browser Informationen über die Datei mitgeteilt, die nicht direkt als Text im Fenster erscheinen. Der Ausdruck: <title>Kuckuck</title> legt z.B. den Titel des Dokumentes fest, wie er ganz oben in der Titelzeile des Fensters erscheint.
Der Kopf des Dokuments wird durch </head> beendet. Daran schließt sich der Textteil (Rumpf) des Dokumentes an; er beginnt mit dem Tag <body>.
Jeglicher Text, der hier und vor den Tags </body> und </html> steht, wird vom Browser in seinem Hauptfenster dargestellt. In unserem Beispiel würde der Browser also den Text: "Der Kuckuck ist ein seltsamer Vogel" ausgeben.
Innerhalb des Textteils wird die Formatierung ebenfalls durch Tags bestimmt, darauf gehen wir hier aber nicht weiter ein.
Um Verweise von einem zu einem anderen HTML-Dokument zu erzeugen wird das <a>-Tag verwendet.

Beispiel Eingangshalle:
..."Du stehst in der Eingangshalle der Burg. Die kleinen Fenster lassen nur wenig Licht in den Raum. Am Boden befindet sich ein alter, verstaubter Perserteppich. Am Westende siehst du eine verrostete Eisentür."...
Der Spieler sollte an dieser Stelle auf das Wort "Eisentür" klicken können, um in die Besenkammer zu gelangen. Der entsprechende Text schaut dann so aus:

Du stehst in der Eingangshalle der Burg.

Die kleinen Fenster lassen nur wenig Licht in den Raum.

Am Boden befindet sich ein alter, verstaubter Perserteppich.

Am Westende siehst du eine verrostete

<a href="besenkammer.html">  Eisentür. </a>

Bei Klick auf die entsprechende Textstelle sucht der "Browser" die HTML-Datei "besenkammer.html", öffnet sie und stellt anschließend deren Text dar.

« Dateistruktur der Implementation

Wie nicht anders zu erwarten, wird für jedem Raum ein eigenes HTML-Dokument angelegt: Zusätzlich sollte sich im gleichen Verzeichnis noch eine "index.html" befinden, die in das Spiel einweist. "index.html" wird von einem Browser automatisch angesprungen, wenn man das entsprechende Verzeichnis als "URL" (in die obere Zeile des Browsers) eingibt.

« Die fertigen Dateien

eingangshalle.html

<html>

<head>

<title>Eingangshalle</title>

</head>

<body>

Du stehst in der Eingangshalle der Burg.

Die kleinen Fenster lassen nur wenig Licht in den Raum.

Am Boden befindet sich ein alter, verstaubter Perserteppich.

Am Westende siehst du eine verrostete

<a href="besenkammer.html">  Eisentür. </a>

</body>

</html>


besenkammer.html

<html>

<head>

<title>Besenkammer</title>

</head>

<body>

Hier riecht es muffig. Es stehen diverse Putzutensilien im Raum.

Wenig Licht dringt durch ein kleines Fenster auf der Nordseite. <br>

Im Westen führt eine <a href="schlafgemach.html">Leiter</a>

empor, im Osten befindet sich eine <a href="eingangshalle.html">  Eisentür. </a>

</body>

</html>


schlafgemach.html

<html>

<head>

<title>Schlafgemach</title>

</head>

<body>

Du stehst vor einem alten Himmelbett. Die hölzerne Verkleidung schließt nach

oben mit samtenen hellblauen Tüchern ab. <br>

Im Westen führt eine <a href="besenkammer.html">Leiter</a>

hinunter, im Osten siehst du einen <a href="ankleide.html">  Vorhang. </a>

</body>

</html>


ankleide.html

<html>

<head>

<title>Ankleide</title>

</head>

<body>

Du stehst zwischen einem Chaos an Frauen- und Männerkleidern.

Man kann nichts erkennen. Richtung Westen scheint ein <br>

<a href="schlafgemach.html">Vorhang</a> weiterzuführen, nach Osten

 eine <a href="ostzimmer.html">Holztür.</a>

</body>

</html>


ostzimmer.html

<html>

<head>

<title>Ostzimmer</title>

</head>

<body>

Dieses Zimmer ist dunkel. Man kann schemenhaft einen Tisch erkennen,

auf dem ein alter Kerzenständer steht.<br>

Im Boden befindet sich ein seltsamer

<a href="eingangshalle.html">Spalt</a>

</body>

</html>