Schiffe versenken – Operation 5x5

Schiffe versenken

Willkommen, Kapitän!
`; } else if (val === 3) { cell.classList.add('miss-bg'); cell.innerHTML = `
`; } }); updateCombatMessage(); } function handleCombatShot(x, y) { const opponentId = gameState.currentPlayer === 1 ? 2 : 1; const opponentGrid = gameState.players[opponentId].grid; const index = y * GRID_SIZE + x; const cell = gameState.cells[index]; if (cell.innerHTML !== '') { messageInfo.textContent = "Hier wurde bereits gezielt!"; return; } gameState.isTurnLocked = true; radarBtn.classList.add('hidden'); const targetValue = opponentGrid[index]; if (targetValue === 1) { // GETROFFEN opponentGrid[index] = 2; cell.classList.add('hit-bg'); cell.innerHTML = `
💥
`; // NEU: Logik für "Versenkt" const hitShip = gameState.players[opponentId].ships.find(s => s.coords.includes(index)); // Wenn das Schiff vollständig getroffen wurde if (hitShip && hitShip.coords.every(idx => opponentGrid[idx] === 2)) { messageInfo.textContent = `BOOM! ${hitShip.name} VERSENKT!`; } else { messageInfo.textContent = "BOOM! Getroffen!"; } } else { // DANEBEN opponentGrid[index] = 3; cell.classList.add('miss-bg'); cell.innerHTML = `
`; messageInfo.textContent = "Platsch ... Daneben."; } if (checkWin(opponentId)) { setTimeout(() => showWinScreen(gameState.currentPlayer), 1000); } else { setTimeout(() => { const nextPlayer = opponentId; showTransitionScreen(`Spieler ${nextPlayer} ist an der Reihe`, "Gib das Telefon weiter!", () => startNextTurn(nextPlayer)); }, 3000); } } function startNextTurn(player) { gameState.currentPlayer = player; gameState.isTurnLocked = false; document.body.className = player === 1 ? "theme-j1" : "theme-j2"; renderCombatView(); radarBtn.classList.remove('hidden'); } // NEU: Verbessertes Radar, das die echten Schiffe UND die erlittenen Schäden anzeigt function showMyFleet() { if(gameState.isTurnLocked || gameState.phase !== 'combat') return; // 1. VOLLSTÄNDIGE BEREINIGUNG: Wir setzen die Basisklasse 'cell' zurück // Dadurch werden hit-bg, miss-bg (deine Schüsse) und die alten z-index-Werte entfernt gameState.cells.forEach(cell => { cell.innerHTML = ''; cell.className = 'cell'; }); // 2. Die ECHTEN Schiffe werden neu gezeichnet const myShips = gameState.players[gameState.currentPlayer].ships; myShips.forEach(ship => { let headIndex = ship.y * GRID_SIZE + ship.x; const part = document.createElement('div'); part.classList.add('ship-marker', ship.cssClass); if(!ship.horizontal) part.classList.add('is-vertical'); gameState.cells[headIndex].classList.add('high-z-index'); gameState.cells[headIndex].appendChild(part); }); // 3. Wir zeigen die SCHÄDEN an, die UNSERE Flotte erlitten hat const myGrid = gameState.players[gameState.currentPlayer].grid; gameState.cells.forEach((cell, i) => { const val = myGrid[i]; if (val === 2) { // Treffer const fire = document.createElement('div'); fire.className = 'result-container'; fire.innerHTML = '🔥'; // KORREKTUR: Das Feld über das Schiff legen cell.classList.add('impact-z-index'); cell.appendChild(fire); } else if (val === 3) { // Daneben (Schuss des Gegners) const ripple = document.createElement('div'); ripple.className = 'result-container'; ripple.innerHTML = '
'; // KORREKTUR: Das Feld über das Schiff legen cell.classList.add('impact-z-index'); cell.appendChild(ripple); } }); messageInfo.textContent = "Radaransicht"; gridContainer.style.border = "3px solid #ff9800"; } function hideMyFleet() { if(gameState.phase !== 'combat') return; renderCombatView(); gridContainer.style.border = "2px solid rgba(255,255,255,0.4)"; } function checkWin(opponentId) { const grid = gameState.players[opponentId].grid; return !grid.includes(1); } function showWinScreen(winner) { transitionOverlay.classList.remove('hidden'); transitionTitle.innerHTML = `🎉 SIEG! 🎉`; document.getElementById('transition-text').innerHTML = `Bravo, Spieler ${winner}!
Du hast die gesamte Flotte versenkt!`; transitionBtn.textContent = "Erneut spielen"; transitionBtn.onclick = function() { initGame(); document.getElementById('transition-overlay').classList.add('hidden'); this.onclick = function() { endTransition(); }; }; radarBtn.classList.add('hidden'); document.getElementById('restart-btn-top').classList.add('hidden'); } function showTransitionScreen(title, text, callback) { onTransitionEnd = callback; transitionTitle.innerHTML = title; document.getElementById('transition-text').innerHTML = text; transitionOverlay.classList.remove('hidden'); radarBtn.classList.add('hidden'); rotateBtn.classList.add('hidden'); validateBtn.classList.add('hidden'); transitionBtn.textContent = "Ich bin es!"; document.getElementById('cancel-btn').classList.add('hidden'); } function endTransition() { transitionOverlay.classList.add('hidden'); if (onTransitionEnd) onTransitionEnd(); } let onTransitionEnd = null; createGrid();