Das Spielbrett bauen
Das UI bauen, das die Spieler tatsächlich sehen und anklicken
⏱ ca. ~7 Min
01 · Lesen
Dein Server ist fertig. Jetzt brauchst du das Gesicht — die HTML-Seite, die die Spieler im Browser sehen.
Das ist reines HTML, CSS, JavaScript. Kein React, kein Framework. Nur das Web-Fundament, auf dem jedes Framework aufbaut.
Das ist Absicht. Frameworks sind super für große Apps, aber zu verstehen, was ohne sie passiert, macht dich zu einer viel stärkeren Entwicklerin oder einem viel stärkeren Entwickler. Wenn React kaputtgeht, repariert die Entwicklerin mit Basis-HTML- und -JavaScript-Wissen das in Minuten. Wer nur React kennt, starrt stundenlang auf den Fehler.
Kernpunkte
- Das Frontend ist reines HTML, CSS, JavaScript
- Für ein Spiel dieser Größe braucht es kein Framework
- Wer die Grundlagen kennt, kommt später mit jedem Framework besser klar
- Socket.io liefert seine Client-Bibliothek automatisch aus
02 · Prompt-Vorlage
Bitte Claude, die Spielseite zu bauen. Sei konkret bei den Elementen, die du brauchst.
Bau mir eine public/index.html für ein Tic-Tac-Toe-Spiel. Der Inhalt soll enthalten: (1) Den Titel 'Tic Tac Toe'. (2) Einen Button 'Find Game'. (3) Einen Statusbereich, der anfangs 'Click Find Game to start' zeigt. (4) Ein 3x3-Spielbrett, bei dem jede Zelle ein klickbares Button-Element ist. (5) Einen Button 'Play Again', der standardmäßig versteckt ist und nach Spielende erscheint. Binde bitte das Script '/socket.io/socket.io.js' für den Socket.io-Client ein (Socket.io stellt diese Datei automatisch bereit) und verlinke auf style.css und client.js.
03 · Prompt-Vorlage
Bitte Claude jetzt, das Spiel zu stylen. Gib ihm konkrete Designvorgaben.
Bau mir eine public/style.css für ein Tic-Tac-Toe-Spiel. Mach das Brett zu einem 3x3-CSS-Grid mit Zellen von 100x100 Pixeln. Zwischen den Zellen soll ein klarer Rahmen sein, und leere Zellen sollen beim Hover einen Effekt zeigen. Zentriere alles auf dem Bildschirm und nutze einen dunklen Hintergrund. X in Blau, O in Rot. Mach den Find-Game-Button auffällig. Wenn ein Symbol gesetzt wird, soll es eine leichte Skalierungs-Animation geben. Insgesamt soll es sauber und modern wirken.
04 · Lesen
Das zentrale CSS-Muster, das das Brett funktionieren lässt, ist CSS Grid. Kein komplexes Tabellen-Layout, kein Flexbox-Hack — mit CSS Grid baust du ein 3x3-Brett in drei Zeilen: ``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
Fertig. Drei Spalten, jede 100 Pixel breit, 4 Pixel Abstand zwischen den Zellen. Der Browser kümmert sich um die ganze Layout-Mathematik. Jede Zelle ist ein <button>-Element im Grid — Button statt Div, weil Buttons standardmäßig per Tastatur fokussierbar und für Screenreader zugänglich sind.
Kernpunkte
- CSS Grid macht ein 3x3-Layout simpel
- repeat(3, 100px) erzeugt drei gleich breite Spalten
- Jede Zelle ist ein <button> für Tastatur- und Screenreader-Zugänglichkeit
- Socket.io liefert sein eigenes Client-Script unter /socket.io/socket.io.js aus
05 · Echte Übung
Starte deinen Server und schau dir das Spielbrett im Browser an.
06 · Quiz
Warum nutzen wir für die Brett-Zellen <button>-Elemente statt <div>-Elemente?
- Buttons sehen standardmäßig besser aus
- Divs können keine Click-Event-Listener haben
- Buttons sind per Tastatur fokussierbar und für Screenreader zugänglich, sodass alle Spieler sie nutzen können
- Socket.io funktioniert nur mit Button-Elementen
Andere Lektionen aus diesem Kapitel
⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.
※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.