Wie du dein eigenes Wordle-Spiel programmierst
Vielen wird der Begriff Wordle bekannt sein. Ein simples Spiel der New York Times, bei welchem man jeden Tag ein neues fünf-buchstabiges Wort herausfinden kann. Spiele wie Wordle sind einfach, unkompliziert und ermöglichen einem ein kleines, tägliches Erfolgserlebnis. Also wagte ich mich an den Versuch, etwas Ähnliches auf die Beine zu stellen.
Da wir dieses Semester im Modul Interaktive Medien mit APIs und Javascript gearbeitet haben, erschien mir mein neues Projekt ersichtlich: ein einfaches Spiel ähnlich wie Wordle. Nur, dass man bei meiner Version Synonyme errät.
Damit du dein eigenes Wordle Spiel superleicht selber programmieren kannst, hier eine simple Anleitung.
Schritt 1: Ideenfindung und Machbarkeit
Man könnte meinen, die Frage „Was möchte ich machen?“ sei die wichtigste bei einem Projekt. Doch meiner Meinung nach ist die darauffolgende viel wichtiger – Geht das überhaupt?
Bei einem Spiel wie Wordle hast du unzählige Möglichkeiten. Anstatt Wörter erraten, könnte man Tiere erraten oder sogar Farben erraten. Du musst aber darauf achten, dass du die passenden Daten bekommst. Und wenn du, wie ich, keine Erfahrung mit Datenbanken hast, bist du in den meisten Fällen auf APIs angewiesen. Diese müssen passend und verlässlich sein. Sobald du aber eine oder mehrere APIs gefunden hast, mit denen du deine Idee umsetzen kannst, kann es weitergehen.
Schritt 2: Design, Usability und Accessibility
Jetzt geht es an meinen persönlichen Lieblingsschritt: das Design in Figma erstellen. Meistens kann man sich hier so richtig austoben und mit Farben, Formen und Text herumexperimentieren. Ich empfehle dir aber: Mach das Design so simpel wie möglich. Vor allem auf unerfahrene Wordle-Spielende kann das Spiel auf den ersten Blick verwirrend wirken. Deshalb halte dich am besten so gut es geht an das originale Design. Es wurde nicht ohne Grund so simpel und benutzerfreundlich gestaltet. Natürlich kannst du aber deine eigenen Funktionen wie zum Beispiel einen Dark Mode hinzufügen.
Achte ausserdem vor allem bei der Schriftgrösse und den Farben auf Accessibility. Bei Figma gibt es gute Plugins wie zum Beispiel “Color contrast”. Mit diesem lässt es sich einfach überprüfen, ob die Farben gut lesbar sind.
Schritt 3: Wordle programmieren
Egal was man bei deinem Wordle erraten soll, du musst erst mal wissen, wie man die Struktur programmiert. Hierbei hat mir das Video von Double D auf Youtube geholfen. Schau dir das oder andere Videos an und versuche den Code zu verstehen. Das kann anfangs sehr kompliziert sein, besonders wenn man sich noch nicht gut mit Funktionen auskennt. Falls du Stellen hast, die du nicht verstehst, kann ChatGPT eine grosse Hilfe sein. Und falls du nicht alles auf Anhieb verstehst, mach dir keine Sorgen. Je länger man sich mit dem Code auseinandersetzt, desto besser versteht man ihn.
Schritt 4: APIs anpassen
Da du Wordle ja nicht eins zu eins kopieren willst, geht es nun daran, dem Spiel deinen eigenen Touch zu verleihen. In meinem Fall entschied ich mich dazu, Spielende ein Synonym erraten zu lassen. Dafür brauchte ich zwei APIs: eine, die ein zufälliges Wort ausgibt und eine zweite, die Synonyme zu einem bestimmten Wort ausgibt. Bei mir sind beide von API Ninjas. Zwar hat man pro Monat “nur” 10’000 API Aufrufe zugute, dafür hat es eine riesige Auswahl an APIs.
Bis beide APIs miteinander, sowie mit der Wordle-Struktur funktionieren, kann es eine Weile dauern. Hier lautet die Devise: Geduld, ausprobieren und ChatGPT fragen.
Schritt 5: Styling anpassen
Wenn alles funktioniert, aber weder schön aussieht noch benutzerfreundlich ist, bist du an diesem Punkt angekommen. Nun kannst du dein Figma Design brauchen und deine Schriften, Farben, Abstände und alles Weitere im CSS anpassen. Arbeite am besten mit dem :root selector in deinem CSS File und definiere hier alle wichtigen Parameter. So kannst du diese schnell ändern, falls du dich doch nochmal umentscheidest.
Schritt 6: Dark Mode
Falls du dich entscheidest einen Dark Mode zu integrieren, achte vorher darauf, dass deine Seite einwandfrei funktioniert. Ansonsten stösst du auf Probleme und weisst nicht, ob sie vom Dark Mode oder woanders herkommen.
Schritt 7: Final Touches
Jetzt kannst du Elemente hinzufügen, die nichts an deinem eigentlichen Spiel ändern sollten, aber das Spielerlebnis verbessern. Ich entschied mich, meinem Spiel ein Overlay hinzufügen, das Nutzenden das Spiel nochmal erklärt. Ausserdem erscheint jedes Mal Konfetti, wenn das richtige Wort erraten wurde.
Et voilà! Mit dieser Anleitung und ein bisschen Durchhaltevermögen gibt es so viele Möglichkeiten deine eigene Version des Spieles zu programmieren.
Meine Version wo man Synonyme erraten muss findest du hier.
(eli)
Planung: Ich hatte zwar schon schnell eine Idee, was ich machen wollte, doch wie kompliziert es werden könnte, wurde mir erst spät bewusst. Da ich auf APIs angewiesen war und damit noch nicht viel Erfahrung gemacht habe, war es schwierig etwas zu finden, was mit dem das Spiel funktionieren würde und mit dem ich gleichzeitig programmieren könnte. Es gab auch einige Versuche, eine API zu brauchen, die in Python geschrieben wurde. Da ich aber noch nie mit Python gearbeitet habe, verlor ich hier nur Zeit und etwas Motivation. Schlussendlich habe ich aber passende APIs gefunden, jedoch funktionieren diese nur auf Englisch. Auch wenn das kein Problem ist, hätte ich es schön gefunden, das Spiel auch auf Deutsch anzubieten können. Ausserdem konnte ich die APIs pro Monat nur begrenzt aufrufen, weshalb ich zum grossen Teil auch mit hartkodierten Werten gearbeitet habe.
Beim nächsten Mal werde ich vorher besser recherchieren, was mit meinen Programmierkenntnissen überhaupt möglich ist.
Programmieren: Auch wenn ich schon die ein oder andere Funktion gesehen oder programmiert habe, war mir das meiste relativ neu. Beim Programmieren vom Spiel habe ich abgewechselt, zwischen selber ausprobieren und aus Videos lernen. So konnte ich mir Neues beibringen und gleichzeitig ein Spiel programmieren, das auch wirklich funktioniert.
Eine Funktion, die mir wichtig war, zu integrieren: Das zu erratene Wort darf nicht mehr als sieben Buchstaben haben und sollte mindestens zwei Synonyme haben. Ohne diese Funktion wäre das Spiel viel zu schwierig.
Der Dark Mode war komplett neu für mich. Ich habe mich erst erkundigt, was in meinem Fall die beste Möglichkeit wäre, ihn umzusetzen und experimentierte so lange herum, bis er funktionierte.
Auch mit Animationen arbeitete ich das erste Mal. Das Blinken, das erscheint, wenn das Wort richtig erraten wurde, ist zwar nur minimal. Trotzdem hat es mich motiviert, in Zukunft an noch grösseren Animationen zu arbeiten.
Ausblick: Beim Spiel gibt es noch einige Dinge, an denen ich weiterarbeiten könnte. Zum einen hätte ich gerne eine Animation eingebaut, die läuft, während die APIs nach passenden Wörtern sucht. So gäbe es weniger Verwirrung, wann das Spiel startet. Ein weiterer Punkt, welchen ich gerne umgesetzt hätte, ist ein Tracker, sodass man täglich nur maximal fünf Wörter erraten kann. Zwar gab es für beide Ideen Versuche, aber selbst mit ChatGPTs Hilfe konnte ich die Funktionen vor der Abgabe nicht implementieren, ohne dass das gesamte Spiel kaputt ging.
Etwas, was mir im Nachhinein erst aufgefallen ist, ist, dass nie getestet wird, ob der eingegebene Text ein existierendes Wort ist. Theoretisch könnte man so viel schneller gewinnen. Zu testen, ob das eigegebene Wort existiert, bräuchte ich allerdings eine Datenbank, die alle englischsprachigen Wörter bis und mit sieben Buchstaben beinhaltet, was mir zurzeit noch nicht möglich ist.
Insgesamt hat mir das Projekt gezeigt, wie wichtig Planung ist, bevor man sich in ein Projekt reinstürzt. Ausserdem hat es mich motiviert, weiterhin an meinen Javascript-Kenntnissen zu feilen.