36a4847381
All checks were successful
Dynamic Branch Deploy / build-and-deploy (push) Successful in 1m11s
132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
function resize() {
|
|
// 1. INTERNE SPIEL-AUFLÖSUNG ERZWINGEN
|
|
// Das behebt den "Zoom/Nur Ecke sichtbar" Fehler
|
|
canvas.width = GAME_WIDTH; // 800
|
|
canvas.height = GAME_HEIGHT; // 400
|
|
|
|
// 2. Verfügbaren Platz im Browser berechnen (Minus etwas Rand)
|
|
const windowWidth = window.innerWidth - 20;
|
|
const windowHeight = window.innerHeight - 20;
|
|
|
|
const targetRatio = GAME_WIDTH / GAME_HEIGHT; // 2.0
|
|
const windowRatio = windowWidth / windowHeight;
|
|
|
|
let finalWidth, finalHeight;
|
|
|
|
// 3. Letterboxing berechnen
|
|
if (windowRatio < targetRatio) {
|
|
// Screen ist schmaler (z.B. Handy Portrait) -> Breite limitiert
|
|
finalWidth = windowWidth;
|
|
finalHeight = windowWidth / targetRatio;
|
|
} else {
|
|
// Screen ist breiter (z.B. Desktop) -> Höhe limitiert
|
|
finalHeight = windowHeight;
|
|
finalWidth = finalHeight * targetRatio;
|
|
}
|
|
|
|
// 4. Größe auf den CONTAINER anwenden
|
|
if (container) {
|
|
container.style.width = `${Math.floor(finalWidth)}px`;
|
|
container.style.height = `${Math.floor(finalHeight)}px`;
|
|
}
|
|
|
|
// Hinweis: Wir setzen KEINE style.width/height auf das Canvas Element selbst.
|
|
// Das Canvas erbt "width: 100%; height: 100%" vom CSS und füllt den Container.
|
|
}
|
|
|
|
// Event Listener
|
|
window.addEventListener('resize', resize);
|
|
|
|
// Einmal sofort ausführen
|
|
resize();
|
|
|
|
|
|
// --- DRAWING ---
|
|
|
|
function drawGame() {
|
|
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);
|
|
} else {
|
|
ctx.fillStyle = "#f0f0f0";
|
|
ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
|
|
}
|
|
|
|
ctx.fillStyle = "rgba(60, 60, 60, 0.8)";
|
|
ctx.fillRect(0, GROUND_Y, GAME_WIDTH, 50);
|
|
|
|
// --- HINDERNISSE (HIER WAR DER FEHLER) ---
|
|
obstacles.forEach(obs => {
|
|
const img = sprites[obs.def.id];
|
|
|
|
// FIX: Wir prüfen jetzt strikt, ob das Bild wirklich bereit 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
|
|
if (obs.def.type === "coin") ctx.fillStyle = "gold";
|
|
else ctx.fillStyle = obs.def.color;
|
|
|
|
ctx.fillRect(obs.x, obs.y, obs.def.width, obs.def.height);
|
|
}
|
|
|
|
if(obs.speech) drawSpeechBubble(obs.x, obs.y, obs.speech);
|
|
});
|
|
|
|
/*
|
|
// --- DEBUG ---
|
|
ctx.strokeStyle = isGameOver ? "red" : "lime";
|
|
ctx.lineWidth = 2;
|
|
serverObstacles.forEach(srvObs => {
|
|
ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
|
|
});
|
|
*/
|
|
|
|
// --- PLAYER ---
|
|
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 {
|
|
ctx.fillStyle = player.color;
|
|
ctx.fillRect(player.x, drawY, player.w, drawH);
|
|
}
|
|
|
|
// --- POWERUP UI (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
|
|
if (obstacles.length > 0 && serverObstacles.length > 0) {
|
|
const drift = Math.abs(obstacles[0].x - serverObstacles[0].x).toFixed(1);
|
|
statusText += ` | Drift: ${drift}px`;
|
|
}
|
|
ctx.fillText(statusText, 10, 40);
|
|
}
|
|
|
|
if (isGameOver) {
|
|
ctx.fillStyle = "rgba(0,0,0,0.7)";
|
|
ctx.fillRect(0,0,GAME_WIDTH, GAME_HEIGHT);
|
|
}
|
|
}
|
|
|
|
// Sprechblasen Helper
|
|
function drawSpeechBubble(x, y, text) {
|
|
const bX = x-20; const bY = y-40; const bW = 120; const bH = 30;
|
|
ctx.fillStyle="white"; ctx.fillRect(bX,bY,bW,bH);
|
|
ctx.strokeRect(bX,bY,bW,bH);
|
|
ctx.fillStyle="black"; ctx.font="10px Arial"; ctx.textAlign="center";
|
|
ctx.fillText(text, bX+bW/2, bY+20);
|
|
} |