Idee
Die Skriptsprache JavaScript (JS) wollte ich schon seit einiger Zeit erlernen. Mit HTML und CSS kannte ich mich bereits aus. Auf einer dynamischen Website ist JS allerdings kaum wegzudenken. Im Modul Interaktive Medien II, begannen wir mit dem Üben der Basics. Das allein reichte mir jedoch nicht aus und es war schnell klar, dass mein erstes Digezz Projekt JS gewidmet wird.
Mein grösster Anspruch war, schlussendlich ein funktionierendes und alleinstehendes Produkt zu erstellen. Mir kam die Idee, ein Game zu programmieren. Sofort ging mir das berühmte Spiel Flappy Bird durch den Kopf. Die Steuerung und der Aufbau des Spiels schienen einfach. Der geeignete Einstieg, um mich mit der neuen Sprache auseinanderzusetzen. Ich hatte noch nie etwas in dieser Art gemacht und mein Ehrgeiz war schlagartig geweckt.
Konzept
Eine 1:1 Kopie vom Spiel zu erstellen wollte ich keinesfalls. Das Spieldesign und der Charakter gestaltete ich selbst. Inspiriert vom Fliegen, entschied ich mich für eine Umgebung im Weltall. Die Idee des fliegenden Mondes war geboren. Mithilfe von Adobe Illustrator und Photoshop setzte ich das Design um. Das ging schnell, weil ich schon viel Erfahrung in diesen Bereichen habe. Die allgemeine Spielidee übernahm ich, hatte aber zugleich diverse neue Funktionsideen. Diese sollten das Spiel noch weiter ausbauen, als das beim Original der Fall ist.
Native App oder Web App? Das war eine der ersten Grundfragen, die sich mir stellten. Ich las mich in die Thematik ein und wog die Vor- und Nachteile ab. Durch die breitere Abdeckung und meinem Vorwissen erschien mir eine HTML5 Web-App passend. Das Spiel ist somit sofort für jeden spielbar, egal welches Device genutzt wird. Meine Ziele und die Arbeitsmittel waren also bereit.
Workflow
Recherche und erste Schritte
Schnell fand ich verschiedene Codes von Flappy Bird auf GitHub und einige YouTube Tutorials dazu. Diese Codes verglich ich, verstand aber noch nicht viel davon. Ich entschied mich nach dem Vergleichen der Programmiertechniken bewusst, das Game mit einem Canvas-Element aufzubauen. Ebenfalls entschied ich mich, den Code von Anfang an mithilfe eines Videos zu schreiben. Dieser Schritt lehrte mich vieles. Indem ich den Code mitschrieb, fragte ich mich automatisch, wie welche Zeile Code funktionierte. Es hat mich viel Zeit gekostet, doch es war eine hilfreiche Übung, um das Projekt zu starten.
Umsetzung des eigenen Games
Das Spiel funktionierte einwandfrei, doch Vieles genügte meinen Ansprüchen nicht. Ich begann, den kopierten Code so anzupassen, dass er meinen Vorstellungen entsprach. Jede noch so kleine Änderung zwang mich, Seiten wie W3Schools, Stack Overflow, MDN-Web-Dokumentation usw. zu durchforsten. Es kostete mich ungeheuerlich viel Zeit. Ich absolvierte ein Selbststudium über JS und stellte nebenbei ein Produkt her. Ein Start-Screen wurde eingefügt, die Canvas Grösse angepasst, das komplette Layout geändert usw.
Zusatzfunktionen
Das Spiel lief nach einiger Zeit. Mein eigenes Design und ein fast komplett von mir geschriebener Code waren fertig. Doch ich wollte mehr. Deshalb erweiterte ich das Game um folgende Features:
- Hintergrund ändert alle 25 Sekunden
- Geschwindigkeit erhöht sich je nach Höhe des Scores
- Game kann im Full-Screen Modus gespielt werden (Smartphone)
- Möglichkeit, den eigenen High-Score mit Namen zu speichern
- JSON File auf dem Server, welches die neuen Spieler Scores speichert
- Seite, auf der die mit JSON gespeicherten Scores sortiert angezeigt werden
Testing
Der Schulserver war meine Testumgebung. Ich habe alle gängigen Browser am Desktop getestet (Firefox, Chrome, Opera, Edge). Safari ging leider in Vergessenheit und wurde nicht getestet. Die integrierte Mobile-Version-Vorschau im Browser nutzte ich, um die Kompatibilität am Smartphone zu testen. Dabei half mir ebenfalls mein privates Android Device.
Schwierigkeiten
Einblenden der Hindernisse
Fliegt der Mond in ein Hindernis, ist das Spiel zu Ende. In der Vorlage waren diese in Form von Bildern. Ich wollte mein eigenes Design verwenden und gestaltete die Hindernisse deshalb nach meinen Vorstellungen um. Doch damit fingen die Probleme an. Stundenlang versuchte ich, die Hindernisse korrekt einzubauen. Es wollte nicht klappen. Ich holte Hilfe bei einem Dozenten, jedoch konnte auch er mir nach langem Testen nicht weiterhelfen. Dieses Problem liess mich fast verzweifeln. Doch dann änderte ich die Strategie. Anstelle der Bilder liess ich die Hindernisse gezwungenermassen als Rechteck von JS bauen.
Game Over Funktion
Weil nun die Hindernisse per JS generiert wurden, musste auch eine neue Game-Over Funktion her. Da half auch Google wenig, denn es ist eine spezifische Angelegenheit. Ich versuchte es auf eigene Faust und es funktionierte nach einigem «Pröbeln». Jedoch fand ich bis heute nicht heraus, wie das ganze Mond Objekt die Funktion Game Over auslöst und nicht nur die x-Position. Man lernt nie aus…
JSON, AJAX und PHP
JSON und AJAX kannte ich nur aus einer Vorlesung. Es erschien mir als eine elegante Lösung, die Scores damit zu speichern, ohne dabei eine Datenbank auf die Beine stellen zu müssen. Lange Zeit versuchte ich per JS in das JSON File zu schreiben. Im Nachhinein ist das ein peinlicher Fehler, JS ist clientseitig und kann gar nicht eine Datei auf dem Server editieren. Somit musste ich umdenken und auf PHP zurückgreifen. Ich hatte eine verstaubte Erinnerung an ein paar Unterrichtsstunden in der Lehre. Doch glücklicherweise war nicht viel PHP-Code nötig, um mein Anliegen umzusetzen. Ich schaffte es nicht, das gesendete JS-Objekt mit dem Score, via PHP im korrekten JSON Layout zu speichern. Ich versuchte einiges aus, kam aber auf keinen grünen Zweig. Deshalb liess ich mir von meinem Dozenten helfen. Er erkannte den Fehler sofort und konnte mir weiterhelfen. Wie immer handelte es sich nur um einen kleinen Denkfehler.
Responsive Design
Das Game responsive darzustellen hat mich lange beschäftigt. Die Code-Vorlage, die ich anfangs nutzte, war nicht responsive. Dies änderte ich problemlos. Nun sah am Desktop alles stimmig aus und die Seitenverhältnisse stimmten überein. Als ich das Game jedoch an meinem Smartphone testen wollte, sah es komplett anders aus. Ich versuchte sehr Vieles und nichts half. Bis ich bemerkte, dass ich am Desktop mit Firefox und am Smartphone mit Chrome experimentierte. Chrome interpretierten die CSS Eigenschaft position: fixed; komplett anders als Firefox. Dieses Problem war mir bislang unbekannt. Also schrieb ich für die betroffenen Elemente ein Media Querie speziell für Mozilla Firefox.
Fazit
Dieses Projekt benötigte viel Geduld. Trotzdem hatte mir die Erstellung von Flying Moon enorm viel Spass bereitet und der Mond ist mir ans Herz gewachsen. Ich bin froh, stellte ich mich der Herausforderung, etwas Neues zu lernen. Meine Motivation und Hartnäckigkeit haben sich ausbezahlt. Der Lerneffekt ist riesig. Durch das viele Recherchieren und Nachlesen lernte ich eine ganze Menge, viel mehr, als schlussendlich im Code vorzufinden ist. Ich habe allerlei Anfänger-Fehler gemacht, die ich in einem zukünftigen Projekt sicherlich nicht wiederholen werde. Genau diese Erfahrungen sind wesentlich.
Fehler sind wichtig, um daraus zu lernen, trotzdem hätte ich einige leicht verhindern können. Das ganze Projekt hindurch wollte ich zu viel auf einmal erledigen. Beim nächsten Projekt werde ich den Fokus stärker auf ein strukturiertes Vorgehen legen. Schritt für Schritt vorgehen, immer nur einen Task bearbeiten und danach testen, ob alles noch funktioniert. Mein sprunghaftes und ungeordnetes Vorgehen kostete mich Stunden an Arbeit und Enttäuschungen, die nicht hätten sein müssen.
Ich bade meine Fehler am liebsten alleine aus – so auch beim Coden. Doch wenn ich schon die Kontakte für Experten habe, sollte ich diese auch nutzen. Bis ich jemandem zur Last fiel, tüftelte ich lieber selber stundenlang herum. Das ist eine Stärke, jedoch bringt es nichts, etwas erfolglos bis zur Verzweiflung alleine zu versuchen.
Ich hatte noch nie vertiefter mit JavaScript, JSON und AJAX gearbeitet. Auch meine Webkenntnisse liessen zu wünschen übrig. Für diese Ausgangslage bin ich alles in allem mehr als zufrieden.
Learnings
- Systematik und Struktur sind beim Programmieren das A und O
- Handliche Notizen von Codeschnipseln helfen klarer zu denken
- Regelmässige Backups vom Code sind unabdingbar
- Mobile First ist der heutige Standard
- Testing benötigt viel Zeit
- Fragen kostet nichts
- Google ist (fast) immer dein Freund und Helfer
- Learning by doing zahlt sich aus
