← Zurück zur Übersicht JavaScript Game Development: Den perfekten Game Loop verstehen

JavaScript Game Development: Den perfekten Game Loop verstehen

2. April 2026 um 10:09 · Eckelsoft · ☕ 3 Min. Lesezeit
0
0
GameDev JavaScript Animation Frontend Tutorial
[WERBUNG: CONTENT OBEN]

Das Herz deines Spiels

Ein Videospiel ist kein statisches Programm – es ist eine endlose Schleife, die 60 Mal pro Sekunde den Zustand der Welt aktualisiert und neu zeichnet. Wenn du diesen Game-Loop verstehst, kannst du jedes Spiel bauen, egal ob 2D oder 3D.

In diesem Tutorial bauen wir einen sauberen, professionellen Game-Loop in reinem JavaScript.

Vorbereitung: Deine Spiele-Sandbox

Wir arbeiten auch hier isoliert, damit wir keine Altlasten mitschleppen:

mkdir mein-erster-gameloop
cd mein-erster-gameloop

Schritt 1: Die Leinwand (HTML)

Wir nutzen das <canvas> Element, um unsere Spielwelt zu zeichnen.

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Game Loop Test</title>
    <style>canvas { border: 2px solid #333; display: block; margin: 20px auto; background: #eee; }</style>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <script src="game.js"></script>
</body>
</html>

Schritt 2: Die Logik (JavaScript)

Ein guter Game-Loop nutzt requestAnimationFrame für flüssige 60 FPS und berechnet die verstrichene Zeit (Delta Time), damit sich Objekte auf allen PCs gleich schnell bewegen.

game.js:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let lastTime = 0;
let x = 50; // Unsere X-Position

function gameLoop(timestamp) {
    // 1. Delta Time berechnen (Zeit seit dem letzten Frame)
    const deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    // 2. Update (Zustand ändern)
    // Wir bewegen uns um 100 Pixel pro Sekunde (unabhängig von FPS)
    x += 100 * (deltaTime / 1000); 
    
    // Einfache Kollisionsprüfung (Wand-Reflexion)
    if (x > canvas.width - 50) x = 0;

    // 3. Render (Zeichnen)
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Alten Frame löschen
    ctx.fillStyle = 'red';
    ctx.fillRect(x, 150, 50, 50); // Unseren "Spieler" zeichnen

    // 4. Die Schleife am Leben erhalten
    requestAnimationFrame(gameLoop);
}

// Startschuss
requestAnimationFrame(gameLoop);

Warum ist Delta Time so wichtig?

Stell dir vor, dein Spiel läuft auf einem schnellen PC mit 144 FPS und auf einem alten Laptop mit 30 FPS. Wenn du einfach nur x += 1 pro Frame schreibst, wäre der Spieler auf dem schnellen PC fast 5 Mal so schnell! Durch die Multiplikation mit deltaTime (Sekunden seit dem letzten Bild) bewegt sich der rote Würfel auf beiden Geräten exakt gleich weit pro Sekunde.

Den Effekt erleben

Öffne die index.html einfach in deinem Browser.

⚠️ 📸 SCREENSHOT ANFRAGE: Hier einen Screenshot vom Browser-Fenster einfügen, der das graue Canvas-Rechteck und den roten Würfel zeigt, der flüssig von links nach rechts gleitet.

Fazit

Du hast gerade das Fundament für jedes Spiel gelegt. Dieser Loop ist die Basis für KI-Berechnungen, Physik-Simulationen und User-Eingaben. Wenn du jetzt noch window.addEventListener('keydown', ...) hinzufügst, kannst du den roten Würfel bereits steuern! Willkommen in der Welt der Game-Developer!

[WERBUNG: CONTENT UNTEN]