Connect 4 mit Gestensteuerung: neues Menü, Highscore und Replay

von

Mein Connect-4-Spiel mit Gestensteuerung hat ein ziemlich grosses Update bekommen. Aus dem ursprünglichen Prototyp wurde eine aufgeräumtere, stabilere und deutlich benutzerfreundlichere Webanwendung mit neuem Menü, Highscore-System, Match-Historie, Replay-Funktion und verbesserter mobiler Nutzung.

Im ersten Stand meines Projekts ging es vor allem darum, Connect 4 überhaupt spielbar zu machen und die Gestensteuerung mit MediaPipe zu integrieren. Das Grundgerüst funktionierte: Man konnte gegen verschiedene Algorithmen antreten und das Spiel entweder mit der Maus oder per Handgeste steuern. Trotzdem war schnell klar, dass das Projekt noch nicht dort war, wo ich es haben wollte. Es funktionierte, aber es fühlte sich an vielen Stellen noch nach Prototyp an.

Hier der Link zum Digezz-Beitrag meines ursprünglichen Projekts:
https://www.digezz.ch/connect-4-mit-gestensteuerung-algorithmus/

Deshalb habe ich das Spiel in mehreren Bereichen überarbeitet. Der wichtigste Schritt war zuerst nicht das Design, sondern das Aufräumen. In der alten Projektstruktur lagen noch viele Dateien, die gar nicht mehr aktiv genutzt wurden. Alte Assets, Legacy-Versionen, ungenutzte Bilder, Bibliotheken und Template-Reste wurden entfernt. Dadurch ist das Projekt jetzt deutlich schlanker und verständlicher aufgebaut. Übrig geblieben sind nur noch die Dateien, die für das Spiel wirklich gebraucht werden.

Auch im Code selbst habe ich aufgeräumt. Die Konfiguration wurde vereinheitlicht, Dateinamen und Zuständigkeiten sind klarer, und die aktiven Dateien wurden mit kurzen Kommentaren ergänzt. Dadurch ist besser nachvollziehbar, welche Datei wofür zuständig ist. Board.js kümmert sich um Spiellogik und Darstellung des Bretts, game.js steuert den Spielablauf und die Benutzeroberfläche, ai_worker.js enthält die verschiedenen KI-Strategien und config.js bündelt zentrale Einstellungen.

Neben Minimax und Negamax ist nun auch Monte Carlo Tree Search als weiterer KI-Ansatz integriert. Damit kann man im Menü zwischen verschiedenen Strategien wechseln und ausprobieren, wie sich das Spielverhalten verändert. Die KI bleibt dadurch nicht nur ein Gegner, sondern wird auch zu einem interessanten Vergleichspunkt zwischen verschiedenen algorithmischen Ansätzen.

Ein grosser Teil der Überarbeitung betrifft die Benutzeroberfläche. Das alte Menü war funktional, aber eher technisch und wenig einladend. Daraus ist jetzt eine Art Steuerzentrale geworden. Die Einstellungen sind in Bereiche gegliedert: Spieler und KI, Feedback und Fokus, Schnellzugriffe sowie Brettgrösse. Dadurch findet man schneller, was man sucht. Auch die Buttons wurden grösser und mobiltauglicher gestaltet, damit das Spiel auf kleineren Bildschirmen besser bedienbar ist.

Zusätzlich wurde das Spiel um ein Highscore- und Match-System erweitert. Spieler können ihren Namen eingeben, abgeschlossene Partien werden gespeichert und im Bereich «Highscore & Matches» angezeigt. Dort sieht man nicht nur die Rangliste, sondern auch vergangene Spiele. Einzelne Matches können geöffnet werden, um die Züge genauer anzuschauen.

Besonders spannend ist dabei die neue Replay-Funktion. Gespeicherte Spiele können erneut abgespielt werden. Das hilft, eigene Entscheidungen nachzuvollziehen oder zu analysieren, wie eine Partie verlaufen ist. Aus einem einfachen Spiel wird dadurch ein kleines Analyse-Tool.

Auch die mobile Nutzung wurde verbessert. Das Spielfeld passt sich flexibler an, die Panels für Webcam und Konsole lassen sich ein- und ausblenden, und es gibt einen Vollbildmodus für das Board. Gerade weil die Gestensteuerung mit Kamera arbeitet, war es wichtig, dass die Oberfläche nicht zu voll wirkt und sich auf verschiedenen Geräten sauber bedienen lässt.

Hier der Link zur Version 2 des Connect 4 mit Gestensteuerung:
https://web-app-server.de/leroys-connect-4-v2/
Und hier der Link zum Github des Projekts:
https://github.com/Toadzi/connect-4-v2

(dog)

Rückblickend war eine der grössten Herausforderungen, dass das Projekt mit der Zeit immer weiter gewachsen ist. Am Anfang wollte ich vor allem ein spielbares Connect 4 mit Gestensteuerung bauen. Danach kamen KI-Algorithmen, Backend-Speicherung, Highscore, Replay, mobile Optimierung und Designüberarbeitung dazu. Dadurch wurde das Projekt spannender, aber auch komplexer.

Ich hätte früher konsequenter strukturieren sollen. Einige Umwege entstanden dadurch, dass ich zuerst Features gebaut habe und die Projektstruktur erst später aufgeräumt wurde. Das Refactoring hat sich gelohnt, aber es wäre einfacher gewesen, wenn diese Struktur schon früher klarer gewesen wäre.

Auch die Gestensteuerung bleibt ein Bereich, der noch Feinschliff braucht. MediaPipe funktioniert grundsätzlich gut, aber Gesten im Browser sind immer abhängig von Kameraqualität, Licht, Abstand und Handposition. Das macht die Steuerung interessant, aber auch weniger berechenbar als eine klassische Maussteuerung.

Mit dem aktuellen Stand bin ich trotzdem deutlich zufriedener als mit dem ersten Prototyp. Das Spiel wirkt jetzt nicht nur funktionaler, sondern auch vollständiger. Die Anwendung ist übersichtlicher, besser dokumentiert und für weitere Erweiterungen stabiler vorbereitet.

Ausblick
Als nächstes könnte die Gestensteuerung weiter verfeinert werden. Besonders spannend wäre es, unterschiedliche Gesten für verschiedene Aktionen einzubauen oder die Erkennung noch robuster zu machen.

Auch das Replay-System könnte weiter ausgebaut werden. Denkbar wären zum Beispiel ein automatischer Wiedergabemodus mit Geschwindigkeitseinstellung, eine visuelle Hervorhebung entscheidender Züge oder eine Analyse, welche Spielzüge besonders stark oder schwach waren.

Langfristig wäre auch eine erneute Arbeit an einer 3D-Version interessant. Die Idee, Connect 4 räumlicher und experimenteller zu inszenieren, ist weiterhin reizvoll. Für den Moment war es aber sinnvoller, zuerst die 2D-Version stabil, verständlich und benutzerfreundlich zu machen.