Abenteuerspiel in JavaScript

Jetzt wird's spannend: Wir beschreiben die Welt und schreiben den ersten Befehl, den der Spieler eingeben kann: betrachte. Erzeuge eine neue Datei namens: script.js. Im Folgenden arbeiten wir nur noch an dieser Datei. Als erstes brauchen wir Variablen. Die können z.B. Zahlen speichern. Dann muss man nicht immer wieder die gleiche Zahl eintippen. Wir verwenden Variablen für die maximale Größe unseres Spielfeldes:

let deutet an dass wir jetzt eine Variable deklarieren. Was bedeutet //? Dies leitet einen Kommentar ein, d.h. alles was hinter den zwei Schrägstrichen steht ignoriert der Computer. Es ist für uns gedacht, damit wir uns erinnern können was der Code bedeutet.

Danach können wir den Wert setzen mit:

das kann man auch kompakter schreiben mit:

wir können die Werte uns im Browser anzeigen lassen indem wir ein

hinzufügen. Zwischen den Anführungszeichen steht sogenannter String. Ein String ist eine Zeichenkette, d.h. ein oder mehrere Buchstaben. Strings kann man mit + verbinden. In unserem Beispiel hängen wir eine Zahl an den String an. Versuchs mal aus:

Datei: script.js

Ergebnis:

Ihr könnte auch console.log(1+2) eingeben, um eine Rechnung durchzuführen. Achtung, wenn ihr console.log("eins und zwei ist"+1+2) eingibt, wird das Ergebnis anders aussehen als erwartet. Da JavaScript die Operationen von links nach rechts auswertet, wird zuerst der String mit der Zahl 1 verkettet und dann die Zahl 2 angehängt. Daher müsst ihr Klammern verwenden: console.log("eins und zwei ist"+(1+2)).

Außere Variablen mit Zahlen und Strings brauchenwir noch etwas, um unser Spielfeld zu speichern. Hierzu kann man Arrays verwenden, das sind Speicherfelder, die haben eine Art Hausnummer. Man fängt hierbei in JavaScript bei 0 an zu zählen. Ein Array mit namen arr mit 3 Einträgen erzeugt man, indem man erst ein leeres Array mit let arr=[] erzeugt und dann einzelne Elemente hinzufügt:

Datei: script.js

Ergebnis:

Sehr mühselig, wenn man damit hunderte Elemente ausgeben will. Deshalb gibt es die for-Schleife mit der sich das eleganter lösen lässt:

Versuche es selbst oben aus. Mit einer anderen Form der for-Schleife kann man auch ganz schnell das Einmaleins berechnen:

Ergebnis:

Will man die Ergebnisse in einem Array speichern so braucht man ein zweidimensionales Array (ein Array von Arrays):

Ergebnis:

Wir wollen mindestens in einer zweidimensionalen Welt spielen, daher wird unser Spielfeld auch ein zweidimensionalen Array benötigt, um eine Landkarte unserer Welt zu speichern. Hierzu könnt ihr createArray aus der helper.js Datei verwenden, der ihr die Anzahl der Elemente in jeder Dimension übergibt. Also fangen wir nochmals mit den zwei Zeilen an, die die Größe unseres Spielfelds definiert:

und erweitern sie um die Zeile, die das Spielfeld (Ort und Beschreibung) mit 10x10 Feldern erzeugt:

Dann geben wir unsere Startposition an:

Schließlich können wir die Welt aufbauen. Wenn wir Felder undefiniert lassen, dann sind das Bereiche, die nicht zugänglich sind. Hier eine einfache Welt:

Ihr seht, wir haben den Text in Anführungszeichen geschrieben, das ist wichtig.

Nun schreiben wir die erste Funktion namens: betrachte.

Eine Funktion fasst mehrere Befehle zusammen. Wir wollen sowohl den Titel aus ort darstellen als auch die Beschreibung aus beschreibung. Verwende hierzu console.log(...) und setze einmal ort[x][y] und dann beschreibung[x][y] ein. Wenn du den Titel fett dargestellt haben willst, muss man in HTML folgendes schreiben:

Wir können das auch aus unserem Programm machen, in dem wir Strings zusammenfügen:

Eine Funktion wird durch das Schlüsselwort function eingeleitet gefolgt vom Namen und dann von (). Die Befehle, die dann ausgeführt werden, wenn ich die Funktion mittels betrachte() ausführe werden in geschweiften Klammern zusammengefasst. Füge alle oben genannten Ergänzungen zum Code hinzu und versuche, die leere Funktion so zu ergänzen, dass der Ort fett und die Beschreibung normal ausgegeben wird:

Ergebnis:

Gib mal betrachte in das Eingabefeld ein... und teste ob alles funktioniert.