It's a Match...3!

Stellt euch vor, ihr seid auf Level 1 und bekommt dann ein legendäres Item in die Hand gedrückt - Ich spreche natürlich von Claude Code

[Screenshot: Die Würfel sind gefallen- Claude in der Entwicklerkonsole in WebStorm]

Am Anfang stand die Idee das Spiel Match3 nachzubauen, was als Einzelspieleranwendung relativ schnell entstanden ist. 

Funktionen wie Login, Chatfunktion und Lobbyerstellung war erst mal gar nicht auf dem Schirm. Spoiler: Das änderte sich schneller als gedacht.

"Lasst die Spiele beginnen!" - Wie entwickelt man eigentlich ein Spiel?

Man muss sagen, Ideen für Games hat man viele. Vor allem wenn man passionierter Gamer ist. Doch sich am Anfang an anderen Spielekonzepten zu orientieren sollte keine Schande sein…Jedenfalls redete ich mir das so ein und ließ mich von anderen Entwicklern inspirieren, die so ein Match3-Game entwickelten. Danke an github.com/RonaldoSetzer, dessen Projekt mir als eine tolle Vorlage diente.

[Screenshot: Fertiges Match3-Game - fun, fun, fun!]

Hier hatte ich meinen Spaß, wie man sehen kann und es wurde sehr bunt. Es stecken eine Menge Features drin:

• Ein Timer, den man pausieren kann und Optionen wie Darkmode, Farbenblindheit-Modus, Lautstärkeregler (inkl. On/Off-Button), die man jederzeit einstellen kann

• Buttons zum Starten eines neuen Spiels und das Mischen, falls man mal stecken bleiben sollte

• Einen Score, Highscore und eine Hall of Fame, in der man sich unter die ‘Besten 3’ spielen kann

   

[Screenshot: Match3 Ende-Benachrichtigung (Minions - Wer liebt sie nicht…?)]

Schnell merkte ich, “da geht noch mehr” und das zweite Spiel ließ nicht lange auf sich warten: TicTacToe.

Über die reine Erstellung des Spiels ging es schnell hinaus und eine Multiplayer-Funktion wurde prompt eingeführt. Auch Quick-Message-Buttons wurden in-game hinzugefügt. Das erleichtert nochmal die Accessibility, mit der wir uns später noch beschäftigen.

[Screenshot: TicTacToe und Schnell-Nachricht-Funktion]

Und was braucht man für Multiplayer? Ganz genau: Sehr viel. Und das geht am besten über WebSockets.

"Player Two has entered the game" - Und so begann das Mulitplayer-Abenteuer

[Screenshot: Hinzufügen von Features, wie die Wahl der Farbe]

Der Login war für die Folgefeatures wichtig, denn ein funktionierender Chat mit mehreren Nutzern und die Lobbyerstellung wären so gar nicht möglich. Eins führte zum anderen.

Features sind ein fließender Prozess - “Be Water My Friend” - Bruce Lee

Doch dann kommen wir erst mal zum Hauptbildschirm. Unser Command-Center:

[Screenshot: Hauptlobby mit allen Features auf einem Blick]

Eine Menge zu sehen!

Links ist die Spielerliste mit zwei aktiven Nutzern sichtbar. Bei Klicken der Nutzer wird auch ein Nutzerprofil mit möglichen Statistiken angezeigt. Diese sind Stand jetzt aber noch Placeholder.

Im zentralen Chat-Bereich der Hauptlobby ist eine Willkommensnachricht sehen, die demonstriert wie die Echtzeit-Kommunikation zwischen den Spielern funktioniert. Das Chat-System zeigt Timestamps und Benutzernamen klar strukturiert an. Eine Liste an Emojis, die man wählen kann, ist ebenfalls vorhanden.

Rechts präsentiert sich die Spieleauswahl mit verschiedenen verfügbaren Games: Match3 und Tic Tac Toe für 1-2 Spieler, die man derzeit spielen kann und Memory, Quiz Battle, Zeichen-Spiel die derzeit noch Placeholder sind (soon™).

Im Bereich "Aktive Lobbys" können sich andere Spieler direkt einloggen. Die Funktionsbuttons "Sofort starten", "Lobby erstellen" und "Lobby beitreten" am rechten Rand ermöglichen andere Wege zur Lobby, die dann so aussieht:

[Screenshot: 'Hier könnte Ihre Lobby stehen']

Man kann auch private Lobbys mit Passwort versehen und per Lobby-ID joinen. Diese kann man am Anfang der Erstellung auch kopieren:

[Screenshot: Private Lobbys: “Du kommst hier nicht rein”]

Audio-Integration

Um die Nutzererfahrung zu verbessern (aber auch weil es einfach sehr nice ist), wurden passende Soundeffekte in beide Spiele integriert. Diese sorgen für ein immersiveres Spielerlebnis und direktes Feedback bei durchgeführten Aktionen. Hier konnte ich mich auf Vorschlag meines Kollegen auf sfxr.me einige gute Sounds generieren und sie als Assets in mein Projekt einfügen.

[Screenshot: Optimierungsvorschläge von Claude]

"Agent Schmidt und wie ich auf die Nase fiel”

<Hier könnte ein Screenshot von einem fetten Fehler stehen, lieber verstecken!>

Wir wollen uns ja immer gerne auf die schönen Ergebnisse konzentrieren, aber Entwickler wissen gut genug, dass es auch schnell mal ‘ugly’ werden kann und nicht alles auf Anhieb so funktioniert, wie man will. Das musste ich als Vibecoder schnell und hart spüren. Bäm!

Und schon ist meine ganze Seite nach einem Prompt von Agent ‘Ich-bin-ja-SO-toll-in-UI/UX-Design’ im Prinzip futsch.

Weiterer Nachteil bei Nutzung von Agenten: Mehr Tokens und manchmal mehr Info als nötig. Aber das bedarf auch mehr Tests, ich steh ja noch am Anfang meiner Karriere.

Rückgängig machen mit STRG+Z ist da leider Fehlanzeige. Ich musste auf meinen letzten Commit zurückgreifen. Doch oh Schreck - Der liegt schon deutlich zurück. Also musste ich vieles wieder neu auflegen. Das hat mich zwar einen halben Tag zurückgeworfen, aber auch gelehrt ein wenig klüger und bedachter an das Projekt zu gehen.

Wichtige Lektion: Dieser Vorfall unterstrich die Bedeutung regelmäßiger Git-Commits und eines soliden Backup-Systems. Der Rollback auf eine frühere, funktionsfähige Version war nur durch die konsequente Versionskontrolle möglich. Und natürlich erfahrener Kollegen, die mich drauf hinwiesen.

"To commit or not to commit, that is the question...” - “Ne, immer schön commiten!”

Weitere Herausforderung: Das Chat-System

Die Implementierung stellte sich als komplexer heraus als erwartet. Die korrekte Zuordnung von Nachrichten zu Sendern und Empfängern erforderte mehrere Iterationen und intensive Debugging-Sessions.

Design und Layout-Probleme

Besonders bei der responsive Gestaltung traten wiederholt Probleme mit Einrückungen und Ausrichtung auf. Die Darstellung auf verschiedenen Bildschirmgrößen erforderte kontinuierliche Anpassungen und Tests.

"With great power comes - Ihr kennt den Rest" - Claude Code als Entwicklungspartner

[Screenshot: Claude Code Terminal mit Hilfreichem Vorschlag]

Eigentlich verdient Claude einen eigenen Erfahrungsbericht, aber in der Kürze sei gesagt: Claude ist eine geniales Tool. Doch das Handwerk muss ich noch lernen…

Claude Code's Unterstützung:

• Debugging-Hilfe bei komplexen TypeScript-Fehlern

• Code-Refactoring und Strukturverbesserungen

• Screenshot-Analyse - Konkrete UI-Verbesserungsvorschläge basierend auf visuellen Eingaben

• Best Practice Empfehlungen für Vue.js-Entwicklung

Die Möglichkeit, Screenshots der Benutzeroberfläche an Claude zu senden und spezifische Verbesserungsvorschläge zu erhalten, war besonders hilfreich bei Design-Entscheidungen.

Während der Entwicklung wurde mein Claude-Plan dankenswerterweise auf das Maximum erweitert, da die kostenlosen Token-Limits erreicht wurden. Diese Investition erwies sich als äußerst wertvoll. Wir haben jetzt das eine LLM, sie alle zu knechten:

[Screenshot: Opus 4.1 activated]

Ein Beispiel ist die Integrierung des Websockets, das er fast komplett eigenständig implementiert wurde und elementar für unsere Multiplayerfunktion war.

[Screenshot: Implementierung von Websockets]

Hier könnte ich noch etliche weitere Beispiele nennen und reinposten, aber ich denke man bekommt schon eine Idee, zu was Claude alles fähig ist.

Performance-Optimierung und Accessibility und die Entdeckung der Lighthouse-Tools

Prinzipien die ich während des Projekts kennenlernte

Ich habe einiges lernen können, was die Prozesse hinter dem Interface und Codeoptimierung angeht. Einige Begriffe waren wir noch unbekannt, sind aber durch die direkte Anwendung schnell klar geworden:

• Lazy Loading - Komponenten werden nur bei Bedarf geladen

• Tree Shaking - Entfernung ungenutzten Codes aus dem finalen Bundle

• Chunk-Splitting - Aufteilung des Codes in optimierte Segmente

• Code-Minimierung - Reduktion der Dateigröße für schnellere Ladezeiten

[Screenshot: Optimierungsvorschläge von Claude]

Accessibility-Verbesserungen

Die Lighthouse-Analyse zeigte Verbesserungsmöglichkeiten bei der Barrierefreiheit auf:

• Display Breakpoints für verschiedene Bildschirmgrößen implementiert

• Kontrastverhältnisse optimiert

• Semantische HTML-Struktur verbessert

• Keyboard-Navigation sichergestellt

Mini-Fazit: Haben die Performance von 53 → 78 Accessibility 76 → 86 gesteigert!

Die 2500-Zeilen-Komponente und wie ich lernte Struktur in mein Projekt zu bringen

Wer konnte es glauben, aber wenn man nicht aufpasst, hat man bei exzessiver Nutzung von KI irgendwann den Überblick verloren und die Vibes passen plötzlich nicht mehr so, als eine einzelne Vue-Komponente über 2500 Zeilen Code erreichte. Diese Erfahrung lehrte mich die Wichtigkeit der Code-Organisation und des DRY-Prinzips (Don't Repeat Yourself).

Die Refaktorierung dieser Monster-Komponente in kleinere, wiederverwendbare Teile verbesserte nicht nur die Lesbarkeit, sondern auch die Wartbarkeit des gesamten Projekts erheblich.

[Screenshot: Upsi! Ich habe ein Monster erschaffen]

Schriftsteller oder Rechtsspieler? - Playwrighter Adventures

[Screenshot: Playwright-Test läuft erfolgreich durch]

Das Erlernen von Playwright für automatisierte Tests war ein wichtiger Meilenstein. Die Einführung erfolgte durch einen Kollegen, der mir die Grundlagen und Best Practices erklärte.

Vorteile der automatisierten Tests:

• Sicherstellung der Funktionalität nach Code-Änderungen

• Frühe Erkennung von Regressionen

• Dokumentation der erwarteten Anwendungsverhalten

 "Achievement Unlocked!" - Was wir geschafft haben

Nach zwei Wochen entstand eine vollständige Gaming-Plattform mit folgenden Features

• 2 vollständig funktionsfähige Spiele

• Robuste Multiplayer-Infrastruktur mit WebSockets

• Echtzeitkommunikation durch Chat-System

• Lobby-Management für Spielerorganisation

• Persistente Highscore-Speicherung

• Immersive Audio-Erfahrung

• Responsive Design für alle Geräte

• Automatisierte Testabdeckung

• Performance-optimierte Implementierung

Weitere technische Erfolge:

• Lighthouse-Scores in allen Kategorien verbessert

• Code-Struktur durch Refactoring optimiert

• WebSocket-Implementation stabil und skalierbar

• TypeScript-Integration ohne größere Typisierungsfehler

"The End... ?" - Erworbene Fähigkeiten

Technische Kompetenzen:

• Vue.js Entwicklung - Von Grundlagen zu fortgeschrittenen Konzepten

• TypeScript - Typsichere Programmierung und bessere Code-Qualität

• WebSocket-Implementierung - Echtzeit-Kommunikation zwischen Client und Server

• UI-Design mit Vuetify - Moderne, responsive Benutzeroberflächen

• Performance-Optimierung - Lazy Loading, Tree Shaking, Code-Splitting

• Test-Automatisierung - Playwright für End-to-End-Tests

• Versionskontrolle - Umgang mit Git

• Projektdokumentation - Strukturierte Erfassung von Entwicklungsprozessen

Methodische Erkenntnisse:

• Code-Organisation - Strukturierung großer Anwendungen

• Debugging-Strategien - Systematische Fehlersuche

• Team-Kollaboration - Effektive Zusammenarbeit in Entwicklungsteams

• Continuous Learning - Integration von KI-Tools in den Entwicklungsprozess

One last Commit

Das Praktikum verwandelte sich von einer geplanten Einführung in die Web-Entwicklung zu einem intensiven Gamedev-Bootcamp (Anmerkung: nicht ganz ernst gemeint).

Die Kombination aus praktischer Projektarbeit, modernen Entwicklungstools und kontinuierlicher Unterstützung durch KI und Trial&Error ermöglichte eine steile Lernkurve.

Ausblick für zukünftige Projekte:

• Mehr Games

• Backend-Integration und API-Entwicklung

• Mobile App-Entwicklung als natürliche Erweiterung

• Komplexere Spielmechaniken und erweiterte Features

[Screenshot: Wir blicken auf ein erfolgreiches Projekt zurück]

Die Erfahrung zeigt, dass moderne Web-Entwicklung mit den richtigen Tools und Unterstützung auch für Einsteiger zugänglich ist und zu beeindruckenden Ergebnissen führen kann. Ich war jedenfalls beeindruckt.

Technologie-Credits:

• Framework: Vue.js

• Design System: Vuetify

• Programmiersprache: TypeScript

• IDE: WebStorm

• AI Assistant: Claude Code

• Dokumentation: Notion

• Testing: Playwright

• Versionskontrolle: Git

Projekt (vorerst) abgeschlossen - Neue Herausforderungen willkommen!