Snake – das Kult-Spiel
Versuche dich am Kult-Spiel! Knackst du deinen Highscore?
Um meine eigenen Kenntnisse im Bereich HTML und Javascript zu verbessern und meinen Mitstudent*innen ein spassiges Spielerlebnis zu bieten, habe ich den Klassiker Snake auf meiner Webseite veröffentlicht.
Schau auf der Webseite vorbei!
(stm)
Idee & Inspiration
Nach der ersten Blockwoche dieses Semesters im Modul «Interaktive Medien» habe ich mich schnell dazu entschieden, die behandelten Themenbereiche in ein Digezz-Projekt einfliessen zu lassen. Genauer hat mich primär Javascript fasziniert, und was mit dieser Skript-Sprache alles möglich ist. Ein sehr populäres Game damit umzusetzen hat sich dafür optimal angeboten. Ebenfalls wurde mir nach einer schnellen Google-Suche klar, dass auch genügend Ressourcen vorhanden sind, die ich verwenden konnte, um den Code zu verstehen.
Tools
Beim Quelltext-Editor für meinen Code habe ich mich für Visual Studio Code entschieden. Der Editor ist Free to use und kann mit diversen Extensions erweitert werden. Um die Daten dann via dem File Transfer Protocol auf meinen Webserver zu laden, habe ich das Filetransfer-Programm Filezilla verwendet. Dies kann ebenfalls gratis verwendet werden. Wenn es Probleme mit dem Code gab, ist mir auch des Öfteren die F12 Taste, mit der ich die Konsole in Google Chrome öffnete zur Hilfe geeilt.
Die Webseite selbst ist mithilfe des CSS in einen einfachen neunteiligen Grid aufgeteilt. Diese Teilung hat sich für meine Zwecke optimal angeboten.
Die Webseite wird bei Hosttech gehostet. Die Domain habe ich im Zuge der Zusammenarbeit mit der FHGR erworben.
Umsetzung
Bei der Umsetzung habe ich mich Anfangs primär an ein Tutorial, das ich gefunden habe, gehalten. Dabei war das Schreiben des Codes weniger die Challenge, als diesen dann auch zu verstehen. Um dieses neu erlangte Wissen dann auch festzuhalten habe ich regelmässig Kommentare im Code hinterlassen, um bei späterem Betrachten auch wieder auf dem gleichen Stand zu sein. Dafür musste ich ziemlich viel Zeit aufwenden, da ich bei einigen komplexeren Funktionen, wie dem zufälligen Verteilen des Essens auf dem Spielfeld, lange gebraucht habe, bis ich diese verstanden habe. Dies hat mir auch beim Hinzufügen eigener Funktionen, wie z.B. dem Neustart-Button sehr geholfen.
Das Hintergrundbild für die Webseite ist im Adobe Illustrator entstanden.
Fazit
Mit meinen Fortschritten, die ich im Bereich des Erstellens einer Webseite gemacht habe, bin ich sehr zufrieden. Mein Verständnis in Sachen Javascript hat sich stark gesteigert. Ebenso konnte ich Verbesserungen in Sachen HTML und CSS feststellen. Gegen Ende des Projekts ist mir aufgefallen, dass ich immer weniger Sachen aufs neue Googlen musste, um sie umzusetzen. Was mich überrascht hat, ist, dass die ganze Sache um einiges Zeitaufwändiger war als ich anfangs antizipiert hatte. Bis die einzelnen Komponenten der Webseite so zusammengespielt haben, wie ich es wollte, musste ich einige Lösungsansätze durchprobieren. Deshalb habe ich mir vorgenommen, die Zeitplanung beim nächsten Projekt etwas besser unter die Lupe zu nehmen. Umso motivierender war es, als es gegen Ende dann immer besser klappte. Somit hat sich der ganze Aufwand gelohnt, und ich freue mich schon bald weitere Projekte in diesem Bereich in Angriff zu nehmen.