Das Pausen-Gaudi

Idee

Dieses Semester habe ich mir vorgenommen, mich intensiver mit dem Programmieren zu beschäftigen. Auch wenn es häufig ein «Krampf» ist, macht es mir dennoch Spass und das Gefühl, einen Error lösen zu können ist einfach unschlagbar. Das selbst programmierte Spiel «letterjongg» von Thomas Weibel hat mir sehr imponiert und ich wollte mich darin versuchen, selbst ein Spiel zu programmieren. Wichtige Randnotiz: Thomas ist ein Vollprofi und ich bin eine blutige Anfängerin;) Meine Erwartungen stellte ich mir daher nicht zu hoch. Ziel: Eine Website mit einer kleinen Auswahl an einfachen Spielen für Zwischendurch.

Vorbereitung

Vor einem halben Jahr hatte ich noch keinen blassen Schimmer, wie man ein Spiel programmiert. Um mit der Materie warm zu werden, schaute ich mir verschiedene YouTube-Videos an und las diverse Artikel im Internet. Um mich nicht zu fest zu überfordern, entschied ich mich dazu, die Spiele ausschliesslich mit JavaScript zu programmieren. Bei der Auswahl der Spiele vertraute ich ebenfalls auf die Basics. Das Spiel «snake» kennen wir wohl alle. Eine Version davon durfte also nicht fehlen. Da mich künstliche Intelligenz und Algorithmen interessieren, setze ich ein «tic tac toe» ebenfalls auf meine To-Do-Liste. Zu guter Letzt, wollte ich ein Spiel integrieren, das dem Google-Dino-Spiel ähnelt, welches man im Browser spielt, wenn man keine gerade keine Internetverbindung hat.

snake

Beim ersten Spiel bin ich so vorgegangen, dass ich einen Canvas erstellt habe, auf dem ich das Spiel anschliessend «zeichnen» konnte. Diese Möglichkeit finde ich sehr praktisch und werde mir das für die Zukunft bestimmt merken. Im Anschluss habe ich verschiedene Funktionen geschrieben, die die einzelnen Schritte des Spiels abdecken. Beispielsweise musste ich definieren, wann das Spiel zu Ende sein sollte: 1. wenn man aus dem grünen Kasten hinaus wandert und 2. wenn man sich selber frisst.

Die grösste Herausforderung beim «snake» war das Googeln. All diese Befehle und Funktionen hatte ich natürlich nicht im Gedächtnis abgespeichert und musste daher das Internet befragen. Manchmal hat es allerdings eine Weile gedauert, bis ich das gefunden hatte, was ich brauchte. Die richtige Suchanfrage einzugeben, soll nämlich geübt sein und ist eine Kunst für sich. Vor allen Dingen, wenn ich manchmal selbst nicht genau wusste, nach was ich überhaupt suchte oder wie ich einzelne Probleme benennen sollte. Mit viel Geduld konnte ich dieses Hindernis letztlich überwinden.

Damit man die Schlange im Spiel steuern kann, musste ich definieren, wie das funktioniert. Es war spannend zu lernen, dass jede Taste auf der Tastatur einen eigenen Code hat und man diese somit als Richtungswechsler angeben kann. Zu Beginn habe ich dafür die Pfeiltasten auf der Tastatur definiert. Als die Seite allerdings länger wurde, habe ich nicht nur die Schlange im Spiel bewegt, sondern auch auf der ganzen Seite hinauf und hinab gescrollt. Um dieses Problem zu lösen, habe ich kurzerhand die Tasten w,a,s und d als «Pfeile» definiert und konnte damit die Schlange steuern. Allerdings ist das Spiel so nur mit einer Tastatur spielbar und nicht für die mobile Version geeignet.

Im Nachhinein habe ich realisiert, dass es wahrscheinlich noch benutzerfreundlicher gewesen wäre, wenn ich einen Start- und Stopp-Knopf eingebaut hätte. So würde es weniger nerven, dass sich auf dem Bildschirm dauernd etwas bewegt. Dies ist mir allerdings erst nach der Abgabe aufgefallen und betrifft im Übrigen auch das dritte Spiel «jump».

tic tac toe

Hier habe ich zuerst den Kasten programmiert und definiert, mit welchen Kombinationen man das Spiel gewinnen kann. Auch hier habe ich die einzelnen Schritte in Funktionen gepackt. Beim «tic tac toe» braucht man ja bekanntlich zwei Spieler:innen. Mein Ziel war es allerdings, dass man das Spiel alleine, sprich gegen den Computer spielen kann. Das wurde mir aber zum Verhängnis. Zuerst habe ich den Zug des Computers immer auf das nächste freie Feld gesetzt. Allerdings war mir das viel zu langweilig und das Spiel war bereits nach der ersten Runde vorhersehbar und einfach zu gewinnen. Auf meiner Recherche bin ich auf den Minimax-Algorithmus gestossen. Dieser Algorithmus dient zur Ermittlung der optimalen Spielstrategie. Dies fand ich so interessant, dass ich den nachgebaut habe und somit jetzt einen Computer habe, der sein Zeichen immer auf das optimale Feld setzt. Leider kann der Mensch das Spiel jetzt nicht mehr gewinnen. Man kann sich jetzt höchstens ein Unentschieden erkämpfen. Ich gebe zu, das entspricht nicht dem optimalen Spielspass. Dieses Projekt war aber von Anfang an ein Experiment und ich habe in diesem Projekt auch gelernt, zu akzeptieren, dass nicht immer alles nach Plan läuft und dass das auch in Ordnung ist.

jump

Dieses Spiel hat mit Abstand den kleinsten JS-Code. Das liegt auch daran, dass ein kleiner Teil der Animation im css versteckt ist. Auf meiner Recherche bin ich auf die sogenannten @keyframes gestossen, die das Animieren im css ermöglichen. Diese Erkenntnis fand ich sehr spannend und habe das deshalb bei diesem Spiel auch selbst ausprobieren wollen. So bewegen sich die Hindernisse und die orange Spielfigur mit Hilfe von css. Wie bereits erwähnt wäre es hier, glaube ich, noch etwas praktischer gewesen, wenn man das Spiel manuell starten und stoppen könnte und es nicht automatisch in Endlosschleife durchläuft.

Fazit

Ich habe bei diesem Projekt sehr viel über JavaScript gelernt und konnte meine Kenntnisse definitiv verbessern. Wie ich es bereits in den IM-Kursen gelernt habe, ist es von grossem Vorteil, wenn man weiss, wie man suchen muss, wenn man im Internet etwas recherchieren will, da es unmöglich ist, alles im Kopf abzuspeichern. Das grösste Learning ist, dass es sehr viel Zeit und Geduld braucht, ein solches Projekt umzusetzen, vor allem, wenn die Vorkenntnisse so klein sind. Diesen Zeitaufwand  habe ich etwas unterschätzt und am Ende hat mein Projekt auch hier und dort noch kleine Macken und Fehlerchen. Aber genauso sind wir Menschen ja auch nicht perfekt und von Fehlern lerne ich zumindest immer noch am besten. Meinem Perfektionismus hat es zur Abwechslung auch einmal gut getan, zu akzeptieren, dass das Experiment nicht überall reibungslos geklappt hat und ich das Projekt noch an der einen oder anderen Stelle verbessern kann.