Don’t Poke the Hamster – Ein spielerisches Warm-up
Dieses Projekt entstand als Vorbereitung für mein grösseres Webprojekt Mooble. Bevor ich mich an die Entwicklung einer umfangreicheren Website machte, wollte ich meine Kenntnisse in HTML, CSS und insbesondere JavaScript wieder auffrischen. Anstatt ein weiteres Tutorial nachzubauen, entschied ich mich dafür, ein kleines eigenständiges Browser-Spiel zu entwickeln.
Das Spiel ist von einfachen Reaktionsspielen inspiriert. Der Spieler sieht einen Hamster von hinten und kann ihn anklicken, um Punkte zu sammeln. In zufälligen Abständen dreht sich der Hamster jedoch um. Sobald dies geschieht, darf nicht mehr geklickt werden. Wer trotzdem klickt, löst eine Explosion aus und verliert das Spiel.
Umsetzung
Technisch gesehen ist die Website sehr einfach aufgebaut. HTML und CSS übernehmen hauptsächlich die Struktur und das visuelle Layout. Der eigentliche Fokus lag auf der Logik hinter dem Spiel. Besonders wichtig war dabei die Steuerung der verschiedenen Spielzustände und die Verknüpfung von Bildern, Soundeffekten und Benutzerinteraktionen.
Für das Spiel wurden mehrere Hamstergrafiken verwendet, die unterschiedliche Zustände darstellen: den Hamster von hinten, den Hamster beim Umdrehen, eine Vorwarnung vor der Explosion sowie eine animierte Explosion. Ergänzt wurden diese durch verschiedene Soundeffekte und Hintergrundmusik.
Gerade diese Kombination aus Bildern, Sounds und kleinen Animationen verleiht dem Spiel einen grossen Teil seiner Persönlichkeit. Obwohl die Spielmechanik sehr simpel ist, entsteht dadurch ein humorvolles und lebendiges Erlebnis. Besonders spannend war für mich zu sehen, wie stark sich die Wirkung eines Projekts verändert, sobald passende Audioelemente integriert werden.
Der Fokus dieses Projekts lag vor allem auf JavaScript. Während HTML und CSS vergleichsweise einfach gehalten wurden, beschäftigte ich mich intensiv mit der Logik hinter dem Spiel. Dazu gehörten die verschiedenen Spielzustände, die zufälligen Zeitabläufe, das Auslösen von Ereignissen sowie die Integration von Bildern und Soundeffekten. Das Projekt diente in erster Linie als technische Übung und als Möglichkeit, mich wieder in die Entwicklung interaktiver Webseiten einzuarbeiten.
Ursprünglich war zudem geplant, ein Leaderboard beziehungsweise ein Scoreboard einzubauen. Dadurch hätten die Spielerinnen und Spieler ihre Punktzahlen speichern und mit anderen vergleichen können. Aufgrund von Problemen mit der Datenbankanbindung konnte diese Funktion jedoch nicht umgesetzt werden. Die Idee bleibt jedoch bestehen und soll zu einem späteren Zeitpunkt ergänzt werden, sobald die technischen Voraussetzungen dafür gegeben sind.
(mmi)
Das Projekt war bewusst einfach gehalten und sollte in erster Linie als Vorbereitung auf mein grösseres Webprojekt Mooble dienen. Rückblickend hat dies sehr gut funktioniert, da ich mich ohne grossen Zeitdruck auf die technischen Grundlagen konzentrieren konnte.
Besonders positiv war, dass ich viele Aspekte der Spielsteuerung selbst umsetzen konnte. Mein Ziel war es, möglichst wenig KI-Unterstützung für die eigentliche Entwicklung zu verwenden, da der Lerneffekt im Vordergrund stand. KI kam hauptsächlich für kleinere Hilfestellungen, Fehlersuche und Verständnisfragen zum Einsatz. Dadurch blieb der grösste Teil des Codes nachvollziehbar und ich konnte die einzelnen Funktionen besser verstehen.
Gleichzeitig fiel mir auf, wie hilfreich die integrierte KI-Unterstützung in modernen Entwicklungsumgebungen sein kann. Besonders bei kleineren Änderungen, Tippfehlern oder wiederkehrenden Codeabschnitten schlug sie oft direkt passende Lösungen vor und beschleunigte dadurch den Arbeitsprozess. Trotzdem war es mir wichtig, die eigentliche Logik selbst zu entwickeln und zu verstehen, anstatt den Code vollständig generieren zu lassen.
Eine Herausforderung war die Veröffentlichung der Website. Während der Entwicklung traten Probleme mit dem Hosting über Infomaniak auf. Die Seite war zeitweise nicht erreichbar oder verhielt sich unzuverlässig, obwohl der Code funktionierte. Dadurch musste ich zusätzliche Zeit investieren, um die Website korrekt aufzuschalten. Gegen Ende des Projekts konnte dieses Problem jedoch gelöst werden, sodass die Seite nun öffentlich zugänglich ist.
Eine weitere Herausforderung betraf die geplante Highscore-Funktion. Ursprünglich wollte ich ein Leaderboard beziehungsweise ein Scoreboard integrieren, damit sich Spielerinnen und Spieler miteinander vergleichen können. Dafür wäre eine Datenbank notwendig gewesen, in der die erreichten Punktzahlen gespeichert werden.
Während der Umsetzung stellte sich jedoch heraus, dass die Datenbankanbindung auf meinem Hosting nicht wie erwartet funktionierte. Nach Rücksprache mit dem Support wurde mir mitgeteilt, dass dies vermutlich mit dem gewählten Hosting-Paket zusammenhängt und die benötigten Datenbankfunktionen aktuell nicht verfügbar sind. Aus diesem Grund musste ich die Highscore-Funktion vorerst aus dem Projekt entfernen.
Trotzdem betrachte ich die Idee nicht als gescheitert, sondern lediglich als verschoben. Sollte die Datenbankanbindung in Zukunft verfügbar sein oder das Hosting entsprechend angepasst werden, möchte ich das Scoreboard nachträglich integrieren. Dadurch könnten sich die Spielenden miteinander vergleichen und das Spiel würde zusätzlich an Motivation und Wiederspielwert gewinnen.