# Eine Spielschleife, die auf allen Displays vorhersehbar bleibt

> Strukturieren Sie Aktualisierungen von Browserspielen und zeichnen Sie um Animationsrahmen herum, ohne die Simulationsgeschwindigkeit an die Bildwiederholfrequenz des Spielers zu binden.

- URL: https://oneshotgems.ai/de/topics/browser-game-loop
- Kategorie: Für Spieleentwickler
- Typ: Ratgeber
- Aktualisiert: 5. Oktober 2026

Eine Browsergame-Schleife koordiniert Simulation, Zeichnen und Eingabe. Dabei darf sie nicht voraussetzen, dass jeder Bildschirm dieselbe Anzahl Bilder pro Sekunde erzeugt. Ein Callback kann mit unterschiedlichen Bildwiederholraten ausgeführt, in einem ausgeblendeten Tab pausiert oder bei ausgelastetem Hauptthread verspätet aufgerufen werden. Richten Sie die Simulation nach der verstrichenen Zeit aus und überlassen Sie dem Browser die Planung der Darstellung. So lässt sich Bewegung besser nachvollziehen und gezielt festlegen, was nach einer längeren Unterbrechung passiert.

## Zustandsänderungen von der Zeichnung trennen

Verwenden Sie requestAnimationFrame für die nächste visuelle Aktualisierung und übergeben Sie den Zeitstempel an einen kleinen Schleifenkoordinator. Aktualisieren Sie Positionen, Timer und Regeln anhand der verstrichenen Zeit und zeichnen Sie danach den aktuellen Zustand. Der Renderer sollte nicht entscheiden, ob eine Kollision stattgefunden hat; eine Kollisionsprüfung darf auch nicht davon abhängen, ob ein Sprite tatsächlich gezeichnet wurde.

Bewegen Sie für einen einfachen Plattformtest eine Markierung mit einer festgelegten Anzahl von Welteinheiten pro Sekunde horizontal. Führen Sie dieselbe Strecke auf einem 60-Hz-Display und einem Display mit hoher Bildwiederholrate aus. Legt die Markierung auf einem Display in derselben realen Zeit eine größere Strecke zurück, wird die Bewegung noch teilweise pro Callback statt pro Zeiteinheit berechnet.

## Wählen Sie eine Wiederherstellungsrichtlinie für späte Frames

Eine lange Pause kann zu einem sehr großen Zeitintervall führen. Begrenzen Sie das verstrichene Intervall bei einem lockeren Echtzeitspiel, damit eine zurückkehrende Person nicht sieht, wie die Spielfigur mehrere Hindernisse überspringt. Verwenden Sie bei deterministischen Simulationen einen festen Aktualisierungsschritt mit Akkumulator, führen Sie nur eine begrenzte Zahl an Aufholschritten aus und zeichnen Sie bei Bedarf zwischen Simulationszuständen, um zu interpolieren.

Protokollieren Sie die längste Callback-Lücke während eines wiederholbaren Hindernisparcours und prüfen Sie das Spiel, nachdem Sie zu einer anderen Anwendung gewechselt und zurückgekehrt sind. Legen Sie ausdrücklich fest, ob das Spiel pausieren, teilweise aufholen oder beim letzten Zustand fortsetzen soll, statt diese Entscheidung einem einzelnen verspäteten Frame zu überlassen.

## Fragen

**Soll ich setInterval zum Zeichnen verwenden?** Verwenden Sie requestAnimationFrame für visuelle Arbeiten, da es in der Nähe von Repaint geplant ist und häufig für ausgeblendete Dokumente angehalten wird. Ein Timer kann weiterhin nichtvisuelle Aufgaben planen, sollte aber nicht als Anzeigeuhr behandelt werden.

**Woher kommt der Frame-Zeitstempel?** Der Callback von requestAnimationFrame liefert einen hochauflösenden Zeitstempel. MDN beschreibt dessen Zeitverhalten und den einmaligen Aufruf. Berechnen Sie den Fortschritt anhand dieses Zeitstempels, statt die Callbacks zu zählen.

## Folge deiner Neugier

- [Delta Time ohne ruckartige Bewegung verwenden](https://oneshotgems.ai/de/topics/delta-time-in-games): Wenden Sie die verstrichene Zeit auf die Spielbewegung an, wählen Sie eine sichere Aufholrichtlinie und testen Sie die Bewegung bei verschiedenen Bildwiederholfrequenzen und nach Verzögerungen.
- [Unterbrechen Sie ein Spiel, wenn die Registerkarte ausgeblendet ist](https://oneshotgems.ai/de/topics/pausing-background-games): Mithilfe von Änderungen an der Seitensichtbarkeit können Sie auswählen, was pausiert, was gespeichert wird und wie ein Browserspiel ohne Zeitsprung fortgesetzt wird.
- [Halten Sie ein Browsergame-HUD synchron](https://oneshotgems.ai/de/topics/synchronizing-game-hud): Halten Sie Punkte, Leben und Timer konsistent, indem Sie den Spielstatus als Quelle der Wahrheit betrachten und HUD-Werte über einen Aktualisierungspfad rendern.

## Weiterlesen

- [MDN: requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

---
Kanonische Seite: https://oneshotgems.ai/de/topics/browser-game-loop