<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Морской бой</title> </head> <body> <h1>Морской бой</h1> <button id="add-ships-button" onclick="initGame()">Добавить одиночные и двойные корабли</button> <button onclick="resetGame()">Начать заново</button> <center><h1><p id="turn-info">Ваш ход, Игрок 1.</p></h1></center> <div class="boards-container"> <div class="board" id="player-1-board"></div> <div class="board" id="player-2-board"></div> </div> </body> <style> .boards-container { display: flex; padding: 50px; } .board { display: grid; grid-template-columns: repeat(10, 50px); grid-gap: 5px; margin-top: 20px; margin-right: 20px; } .cell { width: 50px; height: 50px; border: 1px solid black; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; } .cell.clicked { background-color: lightgray; } .player-1-board .cell { background-color: lightblue; } .player-2-board .cell { background-color: lightgreen; } </style> <script> let currentTurn = 1; let fieldSize = 10; // changed here let player1Ships, player2Ships; let occupiedCells1, occupiedCells2; function generateBoard(player) { let occupiedCells = player === 1 ? occupiedCells1 : occupiedCells2; let numberOfShips = 4; addShips(numberOfShips, 1, player, occupiedCells); numberOfShips = 3; addShips(numberOfShips, 2, player, occupiedCells); } function addShips(numberOfShips, size, player, occupiedCells) { let attemptCount = 0; const MAX_ATTEMPTS = 100; while (numberOfShips > 0 && attemptCount < MAX_ATTEMPTS) { let randomCell = Math.floor(Math.random() * occupiedCells.length); // Now we check the availability of surrounding cells before placing the ship if (checkPlacement(randomCell, size, occupiedCells)) { let cellsToMark = [randomCell]; if(size > 1) { cellsToMark.push(randomCell - 1); } cellsToMark.forEach(cell => { if (player === 1) { player1Ships.add(cell); } else if (player === 2) { player2Ships.add(cell); } // Mark the selected cell and surrounding as occupied markCellAndSurrounding(cell, occupiedCells); }); numberOfShips--; } else { attemptCount++; } } } function checkPlacement(cell, size, occupiedCells) { let canPlace = true; for(let i = 0; i < size; i++) { if (!occupiedCells[cell - i] && checkSurroundingCells(cell - i, occupiedCells)) { continue; } canPlace = false; break; } return canPlace; } function checkSurroundingCells(cell, occupiedCells) { let surroundingCellsExist = true; let x = cell % fieldSize; let y = Math.floor(cell / fieldSize); let top = y > 0; let bottom = y < fieldSize - 1; let left = x > 0; let right = x < fieldSize - 1; // Check if the surrounding cells are occupied if (top && occupiedCells[cell - fieldSize]) surroundingCellsExist = false; if (bottom && occupiedCells[cell + fieldSize]) surroundingCellsExist = false; if (left && occupiedCells[cell - 1]) surroundingCellsExist = false; if (right && occupiedCells[cell + 1]) surroundingCellsExist = false; if (top && left && occupiedCells[cell - fieldSize - 1]) surroundingCellsExist = false; if (top && right && occupiedCells[cell - fieldSize + 1]) surroundingCellsExist = false; if (bottom && left && occupiedCells[cell + fieldSize - 1]) surroundingCellsExist = false; if (bottom && right && occupiedCells[cell + fieldSize + 1]) surroundingCellsExist = false; return surroundingCellsExist; } function initGame() { player1Ships = new Set(); player2Ships = new Set(); occupiedCells1 = Array(fieldSize * fieldSize).fill(false); occupiedCells2 = Array(fieldSize * fieldSize).fill(false); generateBoard(1); generateBoard(2); createBoard('player-1-board', 1, player1Ships); createBoard('player-2-board', 2, player2Ships); } function markCellAndSurrounding(cell, occupiedCells) { let x = cell % fieldSize; let y = Math.floor(cell / fieldSize); let top = y > 0; let bottom = y < fieldSize - 1; let left = x > 0; let right = x < fieldSize - 1; occupiedCells[cell] = true; if (top) occupiedCells[cell - fieldSize] = true; if (bottom) occupiedCells[cell + fieldSize] = true; if (left) occupiedCells[cell - 1] = true; if (right) occupiedCells[cell + 1] = true; if (top && left) occupiedCells[cell - fieldSize - 1] = true; if (top && right) occupiedCells[cell - fieldSize + 1] = true; if (bottom && left) occupiedCells[cell + fieldSize - 1] = true; if (bottom && right) occupiedCells[cell + fieldSize + 1] = true; } function createBoard(id, player, playerShips) { const board = document.getElementById(id); board.innerHTML = ''; for (let i = 0; i < fieldSize; i++) { for (let j = 0; j < fieldSize; j++) { const cell = document.createElement('div'); cell.className = 'cell'; cell.onclick = () => cellClick(i, j, player); if (playerShips.has(i * fieldSize + j)) { cell.style.backgroundColor = 'purple'; } board.appendChild(cell); } } } function createEmptyBoard(id, player) { const board = document.getElementById(id); board.innerHTML = ''; for (let i = 0; i < fieldSize; i++) { for (let j = 0; j < fieldSize; j++) { const cell = document.createElement('div'); cell.className = 'cell'; cell.onclick = () => cellClick(i, j, player); board.appendChild(cell); } } } function resetGame() { player1Ships.clear(); player2Ships.clear(); createEmptyBoard('player-1-board', 1); createEmptyBoard('player-2-board', 2); } function cellClick(i, j, player) { // If you try to make a move that's not supposed to be the current player's, just exit the function if (player !== currentTurn) return; const cellIndex = i * fieldSize + j; const cell = document.getElementById(`player-${player}-board`).children[cellIndex]; let currentPlayerShips = player === 1 ? player1Ships : player2Ships; // If you have no ships, just return out of the function if (currentPlayerShips.size === 0 && player1Ships.size === 0 && player2Ships.size === 0) { return; } if (cell.classList.contains('clicked')) { alert('Вы уже стреляли в эту ячейку!'); } else { cell.classList.add('clicked'); let nextPlayer = player === 1 ? 2 : 1; if (currentPlayerShips.has(cellIndex)) { cell.style.backgroundColor = 'red'; currentPlayerShips.delete(cellIndex); // If the player hit a ship, they keep their turn } else { cell.style.backgroundColor = 'gray'; // Player missed, pass the turn to the other player currentTurn = nextPlayer; document.getElementById("turn-info").innerText = `Ваш ход, Игрок ${nextPlayer}.` } if (currentPlayerShips.size === 0) { alert(`Игрок ${nextPlayer} выиграл!`); resetGame(); return; } } } </script> </html> сделай генерацию трехпалубных кораблей в количестве двух для каждого игрока и пропиши их в каждой функции, как и остальные корабли