Browserspiele programmieren

Kurz: Ein Browserspiel ist ein Spiel, das komplett in einer Webseite läuft — geschrieben in HTML, CSS und JavaScript, ohne Installation und ohne Download.

Genauer: Die meisten einfachen Browserspiele zeichnen auf ein <canvas>-Element, das eine Pixelfläche bereitstellt. Ein Spiel besteht im Kern aus einer Spielschleife (Game Loop): Sie liest Eingaben, aktualisiert den Spielzustand (Positionen, Punkte, Kollisionen) und zeichnet das Bild neu — im Browser typischerweise über requestAnimationFrame etwa 60-mal pro Sekunde.

Kontext bei uns: Die Spiele unter /games (Snake, Flappy-Börek, 2048, Börek-Clicker) sind einzelne HTML-Dateien unter public/play/<name>/. Sie laufen in einem abgeschotteten iframe, sodass sie keinen Zugriff auf Login und Cookies der Seite haben. Ein neues Spiel braucht nur einen Ordner und einen Eintrag in der Spiele-Liste.

Im Detail

Die Spielschleife

1. Eingabe: Tastatur (keydown), Maus/Touch (pointerdown) oder Wischgesten auswerten.
2. Update: Zustand fortschreiben. Wichtig ist die Delta-Zeit (dt): Bewegungen mit der vergangenen Zeit multiplizieren, damit das Spiel auf schnellen und langsamen Geräten gleich schnell läuft.
3. Zeichnen: Hintergrund, Objekte, Punktestand. Bei Pixel-Grafik imageSmoothingEnabled = false und per CSS image-rendering: pixelated verwenden, damit nichts verwischt wird.

Kollisionen und Physik

Für einfache Spiele reichen Rechtecke (AABB) oder Kreise als Kollisionsformen; Schwerkraft ist eine konstante Beschleunigung nach unten (bei Flappy-Spielen: vy += g * dt, ein Flügelschlag setzt vy auf einen negativen Wert). Etwas kleinere Trefferflächen als die Grafik fühlen sich fairer an.

Grafik und Sound

• Pixel-Art in niedriger Auflösung zeichnen und hochskalieren spart Arbeit und sieht bewusst retro aus.
• Sound ohne Dateien erzeugt die Web Audio API (OscillatorNode für Pieptöne). Browser starten Audio erst nach einer Nutzeraktion.

Speichern und Bestenlisten

localStorage speichert Bestwerte im Browser des Spielers — sie lassen sich aber leicht fälschen. Eine echte Bestenliste braucht einen Server, der Werte prüft (Login, Höchstgrenzen, Rate-Limit); ein Client-Spiel ist nie fälschungssicher. Bei uns meldet das Spiel Punkte per postMessage an die umgebende Seite.

Sicherheit

Eigene Spiele im iframe mit sandbox-Attribut einbetten, damit sie keinen Zugriff auf die Seite haben. Fremde Spiele nie ungeprüft einbinden; siehe Content Security Policy und XSS.

Siehe auch: HTML, CSS, Browser, Caching