ZB-Server/it232Abschied
Private
Public Access
1
0
Fork 0
Code Packages Activity

bug fixes
All checks were successful
Dynamic Branch Deploy / build-and-deploy (push) Successful in 1m37s

Browse Source
This commit is contained in:
Sebastian Unterschütz
2025-11-25 23:36:09 +01:00
parent 3bf339f0ec
commit fc8b22dd7c
8 changed files with 133 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
static/game.js
View File

@@ -1,328 +0,0 @@
(function() {
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const container = document.getElementById('game-container');
const startScreen = document.getElementById('startScreen');
const startBtn = document.getElementById('startBtn');
const loadingText = document.getElementById('loadingText');
const gameOverScreen = document.getElementById('gameOverScreen');
class PseudoRNG {
constructor(seed) {
this.state = BigInt(seed);
}
nextFloat() {
const a = 1664525n; const c = 1013904223n; const m = 4294967296n;
this.state = (this.state * a + c) % m;
return Number(this.state) / Number(m);
}
nextRange(min, max) {
return min + (this.nextFloat() * (max - min));
}
pick(array) {
if (!array || array.length === 0) return null;
const idx = Math.floor(this.nextRange(0, array.length));
return array[idx];
}
}
// Config
const GAME_WIDTH = 800; const GAME_HEIGHT = 400;
canvas.width = GAME_WIDTH; canvas.height = GAME_HEIGHT;
const GRAVITY = 0.6; const JUMP_POWER = -12; const GROUND_Y = 350;
const GAME_SPEED = 5; const CHUNK_SIZE = 60;
// State (JETZT PRIVATE VARIABLEN!)
let gameConfig = null;
let isLoaded = false;
let isGameRunning = false;
let isGameOver = false;
let sessionID = null;
let rng = null;
let score = 0;
let currentTick = 0;
let lastSentTick = 0;
let inputLog = [];
let isCrouching = false;
let sprites = {};
let playerSprite = new Image();
let bgSprite = new Image();
let player = { x: 50, y: 300, w: 30, h: 50, color: "red", vy: 0, grounded: false };
let obstacles = [];
let serverObstacles = [];
// --- Funktionen ---
function resize() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const targetRatio = GAME_WIDTH / GAME_HEIGHT;
let finalWidth, finalHeight;
if (windowWidth / windowHeight < targetRatio) {
finalWidth = windowWidth; finalHeight = windowWidth / targetRatio;
} else {
finalHeight = windowHeight; finalWidth = finalHeight * targetRatio;
}
canvas.style.width = `${finalWidth}px`;
canvas.style.height = `${finalHeight}px`;
if(container) { container.style.width = `${finalWidth}px`; container.style.height = `${finalHeight}px`; }
}
window.addEventListener('resize', resize); resize();
async function loadAssets() {
playerSprite.src = "assets/player.png";
if (gameConfig.backgrounds && gameConfig.backgrounds.length > 0) {
const bgName = gameConfig.backgrounds[0];
if (!bgName.startsWith("#")) bgSprite.src = "assets/" + bgName;
}
const promises = gameConfig.obstacles.map(def => {
return new Promise((resolve) => {
if (!def.image) { resolve(); return; }
const img = new Image(); img.src = "assets/" + def.image;
img.onload = () => { sprites[def.id] = img; resolve(); };
img.onerror = () => { resolve(); };
});
});
if (bgSprite.src) {
promises.push(new Promise(r => { bgSprite.onload = r; bgSprite.onerror = r; }));
}
await Promise.all(promises);
}
// Global verfügbar machen für HTML Button
window.startGameClick = async function() {
if (!isLoaded) return;
startScreen.style.display = 'none';
try {
const sRes = await fetch('/api/start', {method:'POST'});
const sData = await sRes.json();
sessionID = sData.sessionId;
rng = new PseudoRNG(sData.seed);
isGameRunning = true;
} catch(e) { location.reload(); }
};
function handleInput(action, active) {
if (isGameOver) { if(active) location.reload(); return; }
const relativeTick = currentTick - lastSentTick;
if (action === "JUMP" && active) {
if (player.grounded && !isCrouching) {
player.vy = JUMP_POWER; player.grounded = false;
inputLog.push({ t: relativeTick, act: "JUMP" });
}
}
if (action === "DUCK") { isCrouching = active; }
}
window.addEventListener('keydown', (e) => {
if (e.code === 'Space' || e.code === 'ArrowUp') handleInput("JUMP", true);
if (e.code === 'ArrowDown' || e.code === 'KeyS') handleInput("DUCK", true);
});
window.addEventListener('keyup', (e) => {
if (e.code === 'ArrowDown' || e.code === 'KeyS') handleInput("DUCK", false);
});
window.addEventListener('mousedown', (e) => {
if (e.target === canvas && e.button === 0) handleInput("JUMP", true);
});
let touchStartY = 0;
window.addEventListener('touchstart', (e) => {
if(e.target === canvas) { e.preventDefault(); touchStartY = e.touches[0].clientY; }
}, { passive: false });
window.addEventListener('touchend', (e) => {
if(e.target === canvas) {
e.preventDefault();
const diff = e.changedTouches[0].clientY - touchStartY;
if (diff < -30) handleInput("JUMP", true);
else if (diff > 30) { handleInput("DUCK", true); setTimeout(() => handleInput("DUCK", false), 800); }
else if (Math.abs(diff) < 10) handleInput("JUMP", true);
}
});
async function sendChunk() {
const ticksToSend = currentTick - lastSentTick;
if (ticksToSend <= 0) return;
const payload = { sessionId: sessionID, inputs: [...inputLog], totalTicks: ticksToSend };
inputLog = []; lastSentTick = currentTick;
try {
const res = await fetch('/api/validate', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) });
const data = await res.json();
if (data.serverObs) serverObstacles = data.serverObs;
if (data.status === "dead") gameOver("Vom Server gestoppt");
else {
const sScore = data.verifiedScore;
if (Math.abs(score - sScore) > 200) score = sScore;
}
} catch (e) {}
}
function updateGameLogic() {
if (isCrouching) {
const relativeTick = currentTick - lastSentTick;
inputLog.push({ t: relativeTick, act: "DUCK" });
}
const originalHeight = 50; const crouchHeight = 25;
player.h = isCrouching ? crouchHeight : originalHeight;
let drawY = isCrouching ? player.y + (originalHeight - crouchHeight) : player.y;
player.vy += GRAVITY;
if (isCrouching && !player.grounded) player.vy += 2.0;
player.y += player.vy;
if (player.y + originalHeight >= GROUND_Y) {
player.y = GROUND_Y - originalHeight; player.vy = 0; player.grounded = true;
} else { player.grounded = false; }
let nextObstacles = []; let rightmostX = 0;
for (let obs of obstacles) {
obs.x -= GAME_SPEED;
const playerHitbox = { x: player.x, y: drawY, w: player.w, h: player.h };
if (checkCollision(playerHitbox, obs)) {
player.color = "darkred";
if (!isGameOver) { sendChunk(); gameOver("Kollision"); }
}
if (obs.x + obs.def.width > -100) {
nextObstacles.push(obs);
if (obs.x + obs.def.width > rightmostX) rightmostX = obs.x + obs.def.width;
}
}
obstacles = nextObstacles;
if (rightmostX < GAME_WIDTH - 10 && gameConfig) {
const gap = Math.floor(400 + rng.nextRange(0, 500));
let spawnX = rightmostX + gap; if (spawnX < GAME_WIDTH) spawnX = GAME_WIDTH;
let possibleObs = [];
gameConfig.obstacles.forEach(def => {
if (def.id === "eraser") { if (score >= 500) possibleObs.push(def); } else possibleObs.push(def);
});
const def = rng.pick(possibleObs);
let speech = null;
if (def && def.canTalk) { if (rng.nextFloat() > 0.7) speech = rng.pick(def.speechLines); }
if (def) {
const yOffset = def.yOffset || 0;
obstacles.push({ x: spawnX, y: GROUND_Y - def.height - yOffset, def: def, speech: speech });
}
}
}
function checkCollision(p, obs) {
const paddingX = 10; const paddingY_Top = 25; const paddingY_Bottom = 5;
return (p.x + p.w - paddingX > obs.x + paddingX && p.x + paddingX < obs.x + obs.def.width - paddingX &&
p.y + p.h - paddingY_Bottom > obs.y + paddingY_Top && p.y + paddingY_Top < obs.y + obs.def.height - paddingY_Bottom);
}
window.submitScore = async function() {
const nameInput = document.getElementById('playerNameInput');
const name = nameInput.value;
const btn = document.getElementById('submitBtn');
if (!name) return alert("Namen eingeben!");
btn.disabled = true;
try {
const res = await fetch('/api/submit-name', {
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ sessionId: sessionID, name: name })
});
const data = await res.json();
let myClaims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
myClaims.push({
name: name, score: Math.floor(score / 10), code: data.claimCode,
date: new Date().toLocaleString('de-DE'), sessionId: sessionID
});
localStorage.setItem('escape_claims', JSON.stringify(myClaims));
document.getElementById('inputSection').style.display = 'none';
loadLeaderboard();
} catch (e) {}
};
async function loadLeaderboard() {
const res = await fetch(`/api/leaderboard?sessionId=${sessionID}`);
const entries = await res.json();
let html = "<h3>BESTENLISTE</h3>";
entries.forEach(e => {
const color = e.isMe ? "yellow" : "white";
html += `<div style="display:flex; justify-content:space-between; color:${color}; margin-bottom:5px;">
<span>#${e.rank} ${e.name}</span><span>${Math.floor(e.score/10)}</span></div>`;
});
document.getElementById('leaderboard').innerHTML = html;
}
async function loadStartScreenLeaderboard() {
try {
const listEl = document.getElementById('startLeaderboardList');
if (!listEl) return;
const res = await fetch('/api/leaderboard');
const entries = await res.json();
if (entries.length === 0) { listEl.innerHTML = "<div style='padding:20px'>Noch keine Scores.</div>"; return; }
let html = "";
entries.forEach(e => {
let icon = "#" + e.rank;
if (e.rank === 1) icon = "🥇"; if (e.rank === 2) icon = "🥈"; if (e.rank === 3) icon = "🥉";
html += `<div class="hof-entry"><span><span class="hof-rank">${icon}</span> ${e.name}</span><span class="hof-score">${Math.floor(e.score / 10)}</span></div>`;
});
listEl.innerHTML = html;
} catch (e) {}
}
function gameOver(reason) {
if (isGameOver) return;
isGameOver = true;
const finalScoreVal = Math.floor(score / 10);
const currentHighscore = localStorage.getItem('escape_highscore') || 0;
if (finalScoreVal > currentHighscore) localStorage.setItem('escape_highscore', finalScoreVal);
gameOverScreen.style.display = 'flex';
document.getElementById('finalScore').innerText = finalScoreVal;
loadLeaderboard();
drawGame();
}
function drawGame() {
ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
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);
obstacles.forEach(obs => {
const img = sprites[obs.def.id];
if (img) ctx.drawImage(img, obs.x, obs.y, obs.def.width, obs.def.height);
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);
});
ctx.strokeStyle = isGameOver ? "red" : "lime"; ctx.lineWidth = 2;
serverObstacles.forEach(srvObs => ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h));
const drawY = isCrouching ? player.y + 25 : player.y; const drawH = isCrouching ? 25 : 50;
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); }
if (isGameOver) { ctx.fillStyle = "rgba(0,0,0,0.7)"; ctx.fillRect(0,0,GAME_WIDTH, GAME_HEIGHT); }
}
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);
}
function gameLoop() {
if (!isLoaded) return;
if (isGameRunning && !isGameOver) {
updateGameLogic(); currentTick++; score++;
const scoreEl = document.getElementById('score'); if (scoreEl) scoreEl.innerText = Math.floor(score / 10);
if (currentTick - lastSentTick >= CHUNK_SIZE) sendChunk();
}
drawGame(); requestAnimationFrame(gameLoop);
}
async function initGame() {
try {
const cRes = await fetch('/api/config'); gameConfig = await cRes.json();
await loadAssets();
await loadStartScreenLeaderboard();
isLoaded = true;
if(loadingText) loadingText.style.display = 'none'; if(startBtn) startBtn.style.display = 'inline-block';
const savedHighscore = localStorage.getItem('escape_highscore') || 0;
const hsEl = document.getElementById('localHighscore'); if(hsEl) hsEl.innerText = savedHighscore;
requestAnimationFrame(gameLoop);
} catch(e) { if(loadingText) loadingText.innerText = "Fehler!"; }
}
initGame();
})();

3
static/js/config.js
View File

@@ -5,12 +5,11 @@ const GRAVITY = 0.6;
const JUMP_POWER = -12;
const HIGH_JUMP_POWER = -16;
const GROUND_Y = 350;
const BASE_SPEED = 5;
const BASE_SPEED = 5.0;
const CHUNK_SIZE = 60;
const TARGET_FPS = 60;
const MS_PER_TICK = 1000 / TARGET_FPS;
// RNG Klasse
class PseudoRNG {
constructor(seed) {

40
static/js/logic.js
View File

@@ -1,7 +1,8 @@
function updateGameLogic() {
// 1. Speed Berechnung (Sync mit Server!)
let currentSpeed = BASE_SPEED + (score / 750.0) * 0.5;
if (currentSpeed > 14.0) currentSpeed = 14.0;
let currentSpeed = BASE_SPEED + (score / 1000);
if (currentSpeed > 10.0) currentSpeed = 10.0;
// 2. Input & Sprung
if (isCrouching) inputLog.push({ t: currentTick - lastSentTick, act: "DUCK" });
@@ -113,7 +114,36 @@ function updateGameLogic() {
}
function checkCollision(p, obs) {
const paddingX = 5; const paddingY_Top = 5; const paddingY_Bottom = 5;
return (p.x + p.w - paddingX > obs.x + paddingX && p.x + paddingX < obs.x + obs.def.width - paddingX &&
p.y + p.h - paddingY_Bottom > obs.y + paddingY_Top && p.y + paddingY_Top < obs.y + obs.def.height - paddingY_Bottom);
const paddingX = 10;
const realRightEdge = obs.x + obs.def.width - paddingX;
if (realRightEdge < p.x + 5) {
return false;
}
const paddingY_Top = (obs.def.type === "teacher") ? 25 : 10;
const paddingY_Bottom = 5;
// Geschwindigkeit schätzen (oder global holen) für CCD
let currentSpeed = 5 + (score / 5000.0) * 0.5; // /5000 weil score hier /10 ist?
// Moment, in main.js ist 'score' der rohe Wert. Also /500.
// Da wir score global haben:
currentSpeed = 5 + (score / 500.0) * 0.5;
if (currentSpeed > 12.0) currentSpeed = 12.0;
const pLeft = p.x + paddingX;
const pRight = p.x + p.w - paddingX;
const pTop = p.y + paddingY_Top;
const pBottom = p.y + p.h - paddingY_Bottom;
const oLeft = obs.x + paddingX;
// CCD Erweiterung
const oRight = obs.x + obs.def.width - paddingX + currentSpeed;
const oTop = obs.y + paddingY_Top;
const oBottom = obs.y + obs.def.height - paddingY_Bottom;
return (pRight > oLeft && pLeft < oRight && pBottom > oTop && pTop < oBottom);
}

5
static/js/render.js
View File

@@ -93,7 +93,7 @@ function drawGame() {
if(obs.speech) drawSpeechBubble(obs.x, obs.y, obs.speech);
});
/*
// --- DEBUG RAHMEN (Server Hitboxen) ---
// Grün im Spiel, Rot bei Tod
ctx.strokeStyle = isGameOver ? "red" : "lime";
@@ -101,7 +101,6 @@ function drawGame() {
serverObstacles.forEach(srvObs => {
ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
});
*/
// --- SPIELER ---
@@ -130,7 +129,7 @@ function drawGame() {
// 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`; // Einkommentieren für Debugging
statusText += ` | Drift: ${drift}px`; // Einkommentieren für Debugging
}
if(statusText !== "") {