Als Schweizer Schachmeister U20 war es für mich nur eine Frage der Zeit, bis ich meine beiden Leidenschaften verbinde: Schach und Programmieren. Das Ergebnis ist ein vollständiges Schachspiel im Browser -- gebaut mit purem JavaScript, ohne Frameworks.
Die Herausforderung
Schach klingt einfach: 64 Felder, 32 Figuren, ein paar Regeln. Aber wer alle FIDE-Regeln korrekt umsetzen will, stösst schnell auf Komplexität. Rochade hat vier Vorbedingungen. En Passant gilt nur einen Zug lang. Bauernumwandlung braucht eine UI-Entscheidung. Und Schachmatt muss bei jedem Zug geprüft werden.
Mein Ziel war klar: Jede FIDE-Regel korrekt implementieren, inklusive Remis durch dreifache Stellungswiederholung und die 50-Züge-Regel.
Architektur-Entscheidungen
Ich habe bewusst auf Frameworks verzichtet. Das Projekt sollte zeigen, dass ich die Grundlagen beherrsche. Die Architektur besteht aus drei Schichten:
- Game Engine (
pieces.js) -- Zuggenerierung, Validierung, Spielstand-Management - UI Layer (
app.js) -- DOM-Manipulation, Drag & Drop, Animationen - Stylesheet (
style.css) -- Responsive Board-Layout, Themes
Die Engine speichert den Zustand als 8x8-Array und berechnet bei jedem Zug alle legalen Züge. Dabei werden Pins, Fesselungen und Schachgebote berücksichtigt.
Drag & Drop ohne Libraries
Die native HTML5 Drag & Drop API ist... herausfordernd. Besonders auf Touch-Geräten. Statt einer Library wie interact.js habe ich meine eigene Lösung gebaut:
- Pointer Events statt separate Mouse/Touch-Handler
- Visual Feedback mit CSS
transformstatt DOM-Neuordnung - Drop-Validierung in Echtzeit (nur legale Felder werden hervorgehoben)
Timer und PGN-Export
Eine Schachuhr war ein Muss. Ich habe sie mit setInterval und einer Drift-Korrektur implementiert, damit die Zeit auch nach langen Partien genau bleibt. Der PGN-Export (Portable Game Notation) erlaubt es, Partien in andere Schachprogramme zu importieren.
Barrierefreiheit
Ein Aspekt, der oft vergessen wird: Schach im Browser muss auch mit der Tastatur spielbar sein. Jedes Feld ist fokussierbar, Figuren lassen sich mit Enter auswählen und mit den Pfeiltasten platzieren. Screen Reader erhalten ARIA-Labels für jeden Zug.
Was ich gelernt habe
- Testen ist alles -- Spezialfälle wie En Passant nach Rochade-Versuch brauchen gezielte Tests
- State Management ist auch ohne Redux komplex -- mein Undo/Redo-Stack war der schwierigste Teil
- Performance matters -- Die Zuggenerierung musste unter 16ms bleiben für flüssige Animationen
- Accessibility von Anfang an einbauen ist 10x einfacher als nachträglich