Abenteuerspiel in JavaScript

1. Tabula rasa

Die antiken Römer haben auf einer Wachstafel geschrieben. Daher kommt der Ausdruck Tabula rasa, was lateinisch ist und direkt mit "abgeschabte Tafel" übersetzt wird, es bedeutet, dass man mit einer leeren Tafel anfängt. Für uns bedeutet dies, dass wir mit einer leeren Webseite anfangen. Um dieses Tutorial durchführen zu können, braucht man nur einen Texteditor und einen Browser, mit dem man die Datei öffnen kann. Etwas komfortabler kann man die Entwicklung mit einem Code-Editor durchführen. Am Schluss dieses Tutorials verlinke ich auf eine Anleitung, die beschreibt, wie man einen Code-Editor einrichtet und wie man seine eigene Webseite erstellen kann, um z.B. sein Spiel allen verfügbar zu machen.

Eine leere HTML Seite

HTML ist die Sprache, welche der Webbrowser versteht. Sie beschreibt, wie die Webseite aussehen soll. Wir machen nämlich ein Abenteuerspiel, das ihr auf einer Webseite hochladen könnt.

HTML verwendet hierzu sogenannte Tags, das ist Englisch und heißt Markierung. Ein wichtiger Tag ist der body-Tag. Zwischen dem öffnenden Tag <body> und dem schließenden Tag </body> steht der Text unserer Webseite.

Eine minimale Webseite hat den folgenden Inhalt:
Datei: index.html


Ergebnis:

Experimentiere:

Ändere den Text zwischen den body-Tags und beobachte wie sich das Ergebnis verändert. Wir lassen die Webseite etwas abenteuerlicher mit schwarzem Hintergrund und weißer Schrift erscheinen. Dazu brauchen wir einen Stylesheet. Hier definieren wir die Farben für alles, was im body-Tag steht. background-color ist die Hintergrundfarbe und color die Vordergrundfarbe. Wir müssen die Farben auf Englisch schreiben], hier aufklappen um die häufigsten Farbnamen zu sehen:

HTML Farbtabelle
Deutsch Englisch
weiß white
hellgrau lightgray
silber silver
dunkelgrau darkgray
grau gray
mattgrau dimgray
scharz black
dunkelblau darkblue
blau blue
light blue hellblau
Zyanblau cyan
olive olivgrün
dunkelgrün darkgreen
grün green
hellgrün lightgreen
Grüngelb Greenyellow
gold gold
gelb yellow
hellgelb lightyellow
dunkelorange darkorange
orange orange
dunkelrot darkred
sattelbraun saddlebrown
karmesinrot crimson
lachs salmon
hellrosa pink
leuchtendes rosa hotpink
magentarot magenta
dunkles magentarot darkmagenta
indigo indigo

Beachtet im folgenden die geschweiften Klammern, die bekommt man auf der deutschen Tastatur durch Herunterdrücken der Alt Gr Taste und nachfolgendem antippen der 7 und 9 Tasten.

Datei: style.css


Damit das sichtbar wird, muss man noch die Datei index.html ändern und diese Zeile im head-Tag einfügen:

Versuchts doch gleich mal oben aus. Damit du deine den Effekt deiner Eingaben gleich sehen kannst, klicke auf das Dreieck links von "Experimentieren", um den Text einzuklappen.

Außer dem body-Tag können wir auch andere Tags verwenden z.B. für Überschriften. Überschrift heißt auf Englisch "Heading" und der dazugehörende Tag ist daher h1. h1 sind dabei die größten Überschriften. h2 Unterüberschriften und h3 noch kleinere Überschriften. Und unter der Überschrift kann man mittels <p>Hier kommte ein Paragraph...</p> einen Paragraphen-Text platzieren. Habt ihr schon mal versucht einen Zeilenumbruch zu machen? Das funktioniert nicht mit der Enter Taste, sondern mit einem speziellen
Tag. Das tanzt aus der Reihe, weil es kein öffnendes und schließendes Tag dazu gibt. Wenn der Schrägstrich am Schluss ist, dann ist es ein Tag> was alleine verwendet werden kann.
steht für break und heißt auf Deutsch brechen. Hier bricht also die Zeile, so dass eine neue Zeile begonnen wird. Vielleicht den Paragrafen noch in hellgrün und die Überschrift in orange einfärben. Das geht indem ihr in der Datei style.css die folgenden Zeilen hinzufügt:

Damit wir Befehle ausführen können, brauchen wir ein Eingabefeld:

Probiers gleich mal alles hier aus:


Datei: index.html

Ergebnis:

Jetzt kommt Code hinzu

Um eine Webseite zum Leben zu erwecken, bedarf es eines JavaScript Programms. Hierzu muss man z.B. unter dem Befehl zum Laden des Stylesheets die folgende Zeile einfügen:

Die Datei script.js werden wir im nächsten Kapitel entwickeln. Um direkt beim Laden der Datei mit den Elementen aus dem HTML-Dokument index.html interagieren zu können, muss diese Datei nach allen HTML-Elementen geladen werden. Zusätzlich kennzeichnen wir den Paragrafen und das Eingabefeld mit eindeutigen Identifikationsnamen id="idname". Damit sind wir vorbereitet, um alle Ein- und Ausgaben darzustellen.

Links

Webseiten bestehen aus Text und Links. Letztere kann man mittels dem Folgenden Anker-Tag (engl. anchor) erzeugen:

href ist dabei ein Attribut das das Ziel des Links angibt. Wir wollen uns mit diesen Tags das Tippen erleichtern, so dass man darauf klicken kann und den Text direkt in das Eingabefeld kopiert bekommt. Wir interpretieren durch das folgende Hilfsskript Anker-Tags welche kein href Attribut aufweisen so, dass der Text in das Eingabefeld eingegeben wird. <a>klicke</a> wird beim klicken direkt ausgeführt. <a>klicke...</a>wartet auf weitere eingaben. Auch Konstrukte mit Präpositionen wie <a>klicke...mit...</a> werden unterstützt.

Damit diese Links richtig angezeigt werden, muss man nochfolgende Zeilen zu der Datei ``script.css`` hinzufügen:

Hilfsskript

Damit ihr euch nicht um den Kleinkram kümmern müsst, habe ich euch eine weitere Datei geschrieben:

helper.js
Die Datei helper.js könnt ihr einfach runterladen und im selben Verzeichnis wie die index.html speichern. Vergesst nicht, auch diese Datei wie oben beschrieben in index.html einzutragen. Der code sorgt dafür, dass die Befehle, die ihr eingebt, ausgeführt werden können. Ihr könnt anstatt nimm("Schlüssel") dann im Eingabefeld einfach: nimm schlüssel eingeben. Außerdem definieren wir den console.log Befehl um, damit ihr damit nicht in die normalerweise versteckte Browserkonsole schreibt, sondern in euer Ausgabefeld. Die mit allen Änderungen versehene Datei index.html sollte so aussehen:

Ihr könnt die Datei hier runterladen:

index.html
Und die finale style.css Datei: style.css
Zurück zur Startseite Weiter zum nächsten Kapitel