bug fixes

static/js/render.js

@@ -44,53 +44,72 @@ resize();
 // --- DRAWING ---
 
 function drawGame() {
+    // 1. Alles löschen
     ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
 
-    // --- BACKGROUND ---
-    // Hier war der Check schon drin, das ist gut
-    if (bgSprite.complete && bgSprite.naturalHeight !== 0) {
-        ctx.drawImage(bgSprite, 0, 0, GAME_WIDTH, GAME_HEIGHT);
+    // --- HINTERGRUND (Level-Wechsel) ---
+    let currentBg = null;
+
+    // Haben wir Hintergründe geladen?
+    if (bgSprites.length > 0) {
+        // Wechsel alle 2000 Punkte (Server-Score) = 200 Punkte (Anzeige)
+        const changeInterval = 2000;
+
+        // Berechne Index: 0-1999 -> 0, 2000-3999 -> 1, etc.
+        // Das % (Modulo) sorgt dafür, dass es wieder von vorne anfängt, wenn die Bilder ausgehen
+        const bgIndex = Math.floor(score / changeInterval) % bgSprites.length;
+
+        currentBg = bgSprites[bgIndex];
+    }
+
+    // Zeichnen (wenn Bild geladen und nicht kaputt)
+    if (currentBg && currentBg.complete && currentBg.naturalHeight !== 0) {
+        // Streckt das Bild exakt auf die Spielgröße (800x400)
+        ctx.drawImage(currentBg, 0, 0, GAME_WIDTH, GAME_HEIGHT);
     } else {
+        // Fallback: Hellgrau, falls Bild fehlt
         ctx.fillStyle = "#f0f0f0";
         ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
     }
 
+    // --- BODEN ---
+    // Halb-transparent, damit er über dem Hintergrund liegt
     ctx.fillStyle = "rgba(60, 60, 60, 0.8)";
     ctx.fillRect(0, GROUND_Y, GAME_WIDTH, 50);
 
-    // --- HINDERNISSE (HIER WAR DER FEHLER) ---
+    // --- HINDERNISSE ---
     obstacles.forEach(obs => {
         const img = sprites[obs.def.id];
 
-        // FIX: Wir prüfen jetzt strikt, ob das Bild wirklich bereit ist
+        // Prüfen ob Bild geladen ist
         if (img && img.complete && img.naturalHeight !== 0) {
             ctx.drawImage(img, obs.x, obs.y, obs.def.width, obs.def.height);
         } else {
-            // Fallback: Wenn Bild fehlt/kaputt -> Farbiges Rechteck
-            // Wir prüfen auf Typ Coin, damit Coins gold sind, auch wenn Bild fehlt
+            // Fallback Farbe (Münzen Gold, Rest aus Config)
             if (obs.def.type === "coin") ctx.fillStyle = "gold";
-            else ctx.fillStyle = obs.def.color;
+            else ctx.fillStyle = obs.def.color || "red";
 
             ctx.fillRect(obs.x, obs.y, obs.def.width, obs.def.height);
         }
 
         if(obs.speech) drawSpeechBubble(obs.x, obs.y, obs.speech);
     });
-    
     /*
-    // --- DEBUG ---
+    // --- DEBUG RAHMEN (Server Hitboxen) ---
+    // Grün im Spiel, Rot bei Tod
     ctx.strokeStyle = isGameOver ? "red" : "lime";
     ctx.lineWidth = 2;
     serverObstacles.forEach(srvObs => {
         ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
     });
-     */
+    */
 
-    // --- PLAYER ---
+
+    // --- SPIELER ---
+    // Y-Position und Höhe anpassen für Ducken
     const drawY = isCrouching ? player.y + 25 : player.y;
     const drawH = isCrouching ? 25 : 50;
 
-    // Hier war der Check auch schon korrekt
     if (playerSprite.complete && playerSprite.naturalHeight !== 0) {
         ctx.drawImage(playerSprite, player.x, drawY, player.w, drawH);
     } else {
@@ -98,27 +117,31 @@ function drawGame() {
         ctx.fillRect(player.x, drawY, player.w, drawH);
     }
 
-    // --- POWERUP UI (Oben Links) ---
+    // --- HUD (Powerup Status oben links) ---
     if (isGameRunning && !isGameOver) {
         ctx.fillStyle = "black";
         ctx.font = "bold 10px monospace";
         ctx.textAlign = "left";
         let statusText = "";
+
         if(godModeLives > 0) statusText += `🛡️ x${godModeLives} `;
         if(hasBat) statusText += `⚾ BAT `;
         if(bootTicks > 0) statusText += `👟 ${(bootTicks/60).toFixed(1)}s`;
 
-        // Drift Anzeige
-        /*
+        // Drift Info (nur wenn Objekte da sind)
         if (obstacles.length > 0 && serverObstacles.length > 0) {
             const drift = Math.abs(obstacles[0].x - serverObstacles[0].x).toFixed(1);
-            statusText += ` | Drift: ${drift}px`;
+            // statusText += ` | Drift: ${drift}px`; // Einkommentieren für Debugging
+        }
+
+        if(statusText !== "") {
+            ctx.fillText(statusText, 10, 40);
         }
-         */
-        ctx.fillText(statusText, 10, 40);
     }
 
+    // --- GAME OVER OVERLAY ---
     if (isGameOver) {
+        // Dunkler Schleier über alles
         ctx.fillStyle = "rgba(0,0,0,0.7)";
         ctx.fillRect(0,0,GAME_WIDTH, GAME_HEIGHT);
     }