Lösung Challenge 12: Labyrinth

Lösung

Zu Beginn definiert man die benötigten Variablen.

• „x“ und „y“ speichern die Koordinaten des Spielfeldes bzw. der Kamera
• „walls“ ist das Array, welches das derzeit angezeigte Spielfeld mit Sprites abbilden wird.
• Die Spielfigur wird zu Beginn auf Position (2/1) gesetzt und soll zur besseren Sichtbarkeit blinken.

Außerdem werden die beiden nachfolgenden Funktionen „createArray“ und „draw“ ausgeführt.

Um das Spielfeld zu bauen, ist es einfacher, das im JavaScript-Bereich zu tun. Dort erstellt man ein sogenanntes zweidimensionales Array „map“. In diesem Fall ist es ein 15 Felder langes Array, welches je 15 Felder lange Arrays enthält. Die einzelnen Arrays stellen die Reihen des Spielfelds dar und die einzelnen Felder die entsprechende Zelle der Spalte.

Eine 1 stellt eine Wand dar. Diese sollte am ganzen Rand sein, da man sonst aus diesem herauslaufen kann. Eine 0 sind Felder, auf denen man später laufen kann. Wie man sein Spielfeld innerhalb aufbaut ist frei wählbar. Ebenso ist die Beschränkung auf 15×15 nicht fest.

Es kann hier schon vorweggenommen werden, dass man andere Zahlen dafür verwenden kann, weitere Elemente in das Spiel einzubauen, wie etwa Truhen, Ausgänge oder Gegner.

Wechselt man von JavaScript zurück zu Blocks erstellt die Seite automatisch die entsprechenden Blöcke.

„draw“ ist dafür zuständig, den aktuellen Abschnitt des Spiels darzustellen. Da der Micro:bit nur ein 5×5 Ausschnitt zeigen kann, muss man den entsprechenden Teil aus dem Spielfeld „map“ herausfiltern und übertragen.

Die erste Schleife ist dafür zuständig, alle Sprites zu löschen, falls welche in „walls“ gespeichert sind. Dies wird für die Bewegung benötigt. Die bereits dargestellten Wände werden gelöscht, da sich ihre Position zum Spieler möglicherweise verändert hat.

Danach liest man die neuen Positionen aus und erstellt entsprechende Sprites. Da „map“ ein zweidimensionales Array ist, braucht man eine doppelt verschachtelte for-Schleife. Diese geht von 0 bis 4, da man nur einen 5×5 Abschnitt braucht.

Zu den jeweiligen Zählern „i“ und „k“ werden dann noch „x“ und „y“ addiert, also die aktuelle Position des Spielfeldausschnitts. Mit diesen Werten kann man einzelne Kacheln im Spielfeld-Array abfragen (also z.B. die erste Zelle aus der ersten Reihe). Enthält das entsprechende Feld eine 1 soll dort eine Wand sein und es wird an „walls“ ein neues Sprite angehängt mit den Zählern als Koordinaten. Das erfolgt dann wieder ohne „x“ und „y“, weil man die LEDs nur von 0 bis 4 ansprechen kann. 

Da man nur zwei Tasten beim Micro:bit hat, es aber vier Richtungen gibt, die abgebildet werde müssen, kann man mit A+B die Orientierung wechseln. Entweder auf links und rechts oder oben und unten. Mit der „A“-Taste steuert man entweder nach links oder oben, mit der „B“-Taste entweder nach rechts oder unten.

Bei den Tasten fragt man zuerst ab, in welche Richtung es gehen soll. In diesem Fall läuft man mit der „A“ Taste nach oben. Daher muss man überprüfen, ob die Kachel oberhalb des Spieler (y – 1) keine Wand, also eine null ist. Nur in diesem Fall kann man sich weiterbewegen. 

Danach muss entschieden werden, ob die Position des Spielers oder des Spielfeldes verändert werden soll. 

Beim Spielfeld ist es so, dass es immer nur bis zum Rand dargestellt wird und nicht darüber hinaus. Befindet sich also der Rand des Spielfeldes am Rand des Micro:bits wird dieses nicht weiterverschoben, sondern von da an wird die Position des Spielers verändert. 

Ebenso soll der Spieler immer möglichst mittig dargestellt werden. Das bedeutet dessen Position wird solange vor der des Spielfeldes geändert, bis sie wieder mittig (also y = 2) ist.

Damit sich die Position des Spielfeldes um eins nach oben verschiebt, muss es mindestens um eins nach unten verschoben sein (/=0) und die Position des Spielers muss mittig sein (y=2). Trifft keines der beiden zu, wird der Spieler um eins nach oben bewegt.

Das Ganze braucht man ebenso für den anderen Fall, das die Orientierung auf links und rechts steht, und man mit der „A“-Taste nach links laufen möchte. Vom Aufbau her ist die Logik dieselbe, jedoch müssen die Abfragen angepasst werden um die x- statt der y-Koordinate. Diesmal überprüft man die Zelle links neben dem Spieler und verändert die Koordinaten vom Spielfeld oder vom Spieler um -1 in x-Richtung. Ganz am Ende wird „draw“ aufgerufen, da sich möglicherweise die Position der Wände verändert hat und das richtig abgebildet werden soll.

Ebenso müssen noch die Richtungen nach rechts und unten eingebaut werden, diesmal durch die Betätigung der „B“ Taste. Auch hier ist die Logik dieselbe, es müssen nur wieder die Abfragen angepasst werden. Wenn man ein Spielfeld hat, welches eine andere Größe als 15×15 hat, muss man hier aufpassen. Statt der zehn wie oben muss man die eigene Größe des Feldes nehmen und fünf abziehen.

Nun sollte man sich frei in seinem Spielfeld bewegen können, ohne durch Wände zu laufen oder das über den Rand hinaus etwas dargestellt wird.