Klassische Mini-Spiele
Spiele wie Tic Tac Toe, Snake oder Endless Runner begleiten viele Menschen schon seit Jahren. Trotz ihrer einfachen Spielmechanik sind sie bis heute beliebt. In diesem Projekt beschäftigte ich mich mit solchen klassischen Mini-Spielen, ihrer historischen Entwicklung und der Frage, wie sie sich mit heutigen Webtechnologien umsetzen lassen.
Im Zentrum stehen die drei genannten Spiele, die auf einer gemeinsamen Website präsentiert werden. Kurze Texte führen in die Geschichte der einzelnen Games ein, bevor sie direkt ausprobiert werden können. Ziel des Projekts war es, JavaScript-Kenntnisse zu vertiefen und gleichzeitig eine farbenfrohe, verspielte und visuell ansprechende Gestaltung zu entwickeln.
Vorgehen
Zu Beginn startete ich mit der Umsetzung von Snake. Zuerst programmierte ich die Spiellogik, anschliessend folgte die gestalterische Umsetzung mit CSS. Dieses Vorgehen, zuerst Funktion, dann Design, erwies sich auch bei den beiden anderen Spielen als sinnvoll. Rückblickend zeigte sich jedoch, dass ein früh festgelegtes Farbkonzept einige spätere Anpassungen hätte vermeiden können.
Beim Endless Runner kam eine zusätzliche gestalterische Ebene hinzu. Die Spielfiguren habe ich in Illustrator gezeichnet und sie anschliessend als SVG-Dateien weiterverwendet. Neu war dabei für mich, dass sich SVGs direkt im Texteditor öffnen und bearbeiten lassen. Die Grafiken bestehen aus XML-Code, in dem die einzelnen Formen als Pfade definiert sind. In diesem Code konnten dann Klassen und IDs ergänzt werden. So konnten einzelne Teile der Figur, zum Beispiel die Beine, direkt mit CSS angesprochen und animiert werden. Auf diese Weise entstanden einfache Bewegungen, die den Spielfiguren mehr Lebendigkeit verleihen.
Für Tic Tac Toe nutzte ich erstmals die JavaScript-Bibliothek jsDelivr, um eine Konfetti-Animation beim Spielgewinn einzubauen.
Nachdem alle drei Spiele fertiggestellt waren, entstand die Homepage als verbindendes Element. In Figma testete ich verschiedene Farbkombinationen, bis ein stimmiges, verspieltes Gesamtbild entstand. Ergänzend recherchierte ich zur historischen Entwicklung der einzelnen Spiele und formulierte kurze Einführungstexte für die Website. In After Effects entstanden zudem kurze Loop-Videos, die Szenen aus den Spielen zeigen. Kleine interaktive Details wie Augen, die dem Cursor folgen oder klickbare Elemente, die verschwinden, tragen zusätzlich zur Lebendigkeit der Website bei.
Hier ein paar Eindrücke:
Die Projekt-Website kannst du unter folgendem Link besuchen: Minispiele
(abb)
Rückblickend hätte eine klarere Gesamtplanung zu Beginn geholfen. Da ich die verbindende Homepage erst später entwickelte, mussten Farben und Designelemente der Spiele nachträglich angepasst werden. Ein frühes Farbkonzept hätte diesen Prozess effizienter gemacht.
Technisch ist beim Endless Runner ein Bug aufgetreten: Die Spielfigur springt manchmal horizontal hin und her. Trotz mehrerer Versuche konnte ich die Ursache nicht identifizieren und das Problem blieb leider ungelöst.
Auch spielerisch wären zusätzliche Erweiterungen denkbar gewesen, zum Beispiel weitere Hindernisse bei Snake oder zusätzliche Gegner*innen beim Endless Runner. Zeitliche Einschränkungen setzten diesen Ideen jedoch Grenzen.
Insgesamt bot das Projekt eine gute Gelegenheit, verschiedene Fähigkeiten zu verbinden, von JavaScript-Programmierung über Illustration bis hin zu Animation, was den Arbeitsprozess abwechslungsreich und spannend machte.