Batalla naval - Operación 5x5

Batalla naval

¡Bienvenido, capitá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 = "¡Ya has disparado aquí!"; return; } gameState.isTurnLocked = true; radarBtn.classList.add('hidden'); const targetValue = opponentGrid[index]; if (targetValue === 1) { // TOCADO opponentGrid[index] = 2; cell.classList.add('hit-bg'); cell.innerHTML = `
💥
`; // NUEVO: lógica de "Hundido" const hitShip = gameState.players[opponentId].ships.find(s => s.coords.includes(index)); // Si el barco ha sido alcanzado por completo if (hitShip && hitShip.coords.every(idx => opponentGrid[idx] === 2)) { messageInfo.textContent = `¡BOOM! ¡${hitShip.name} HUNDIDO!`; } else { messageInfo.textContent = "¡BOOM! ¡Tocado!"; } } else { // AGUA opponentGrid[index] = 3; cell.classList.add('miss-bg'); cell.innerHTML = `
`; messageInfo.textContent = "Agua... Fallaste."; } if (checkWin(opponentId)) { setTimeout(() => showWinScreen(gameState.currentPlayer), 1000); } else { setTimeout(() => { const nextPlayer = opponentId; showTransitionScreen(`Turno del jugador ${nextPlayer}`, "¡Pasa el teléfono!", () => 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'); } // NUEVO: radar mejorado que muestra los barcos reales Y los daños sufridos function showMyFleet() { if(gameState.isTurnLocked || gameState.phase !== 'combat') return; // 1. LIMPIEZA COMPLETA: Restauramos la clase 'cell' base // Esto elimina hit-bg, miss-bg (tus disparos) y los z-index antiguos gameState.cells.forEach(cell => { cell.innerHTML = ''; cell.className = 'cell'; }); // 2. Redibujamos los barcos REALES 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. Mostramos los daños SUFRIDOS por nuestra flota const myGrid = gameState.players[gameState.currentPlayer].grid; gameState.cells.forEach((cell, i) => { const val = myGrid[i]; if (val === 2) { // Fuego const fire = document.createElement('div'); fire.className = 'result-container'; fire.innerHTML = '🔥'; // CORRECCIÓN: elevamos la casilla por encima del barco cell.classList.add('impact-z-index'); cell.appendChild(fire); } else if (val === 3) { // Agua (disparo del adversario) const ripple = document.createElement('div'); ripple.className = 'result-container'; ripple.innerHTML = '
'; // CORRECCIÓN: elevamos la casilla por encima del barco cell.classList.add('impact-z-index'); cell.appendChild(ripple); } }); messageInfo.textContent = "Vista de radar"; 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 = `🎉 ¡VICTORIA! 🎉`; document.getElementById('transition-text').innerHTML = `¡Bravo, jugador ${winner}!
¡Has hundido toda la flota!`; transitionBtn.textContent = "Volver a jugar"; 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 = "¡Soy yo!"; document.getElementById('cancel-btn').classList.add('hidden'); } function endTransition() { transitionOverlay.classList.add('hidden'); if (onTransitionEnd) onTransitionEnd(); } let onTransitionEnd = null; createGrid();