EncodeTheCode/battleship_prototype.htm

## battleship_prototype.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Battleship</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      body {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-family: Arial, sans-serif;
      }

      #game-container {
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
      }

      .board {
          display: grid;
          grid-template-columns: repeat(10, 30px);
          grid-template-rows: repeat(10, 30px);
          gap: 2px;
      }

      .cell {
          width: 30px;
          height: 30px;
          background-color: lightblue;
          border: 1px solid #ccc;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
      }

      .cell.hit {
          background-color: red;
      }

      .cell.miss {
          background-color: white;
      }

      .cell.ship {
          background-color: gray;
      }

      #message {
          margin-top: 20px;
          font-size: 18px;
      }

      #reset-button {
          margin-top: 20px;
          padding: 10px 20px;
          font-size: 16px;
      }
	</style>
</head>
<body>
    <h1>Battleship Game</h1>
    <div id="game-container">
        <div id="player1-board" class="board"></div>
        <div id="player2-board" class="board"></div>
    </div>
    <div id="message"></div>
    <button id="reset-button">Reset Game</button>
    <script>document.addEventListener('DOMContentLoaded', () => {
    const player1Board = document.getElementById('player1-board');
    const player2Board = document.getElementById('player2-board');
    const message = document.getElementById('message');
    const resetButton = document.getElementById('reset-button');

    const boardSize = 10;
    const ships = [5, 4, 3, 3, 2]; // Different ship lengths
    let player1Ships = [];
    let player2Ships = [];
    let player1Hits = [];
    let player2Hits = [];
    let currentPlayer = 1;
    let shotsLeft = 3;

    function initializeGame() {
        player1Board.innerHTML = '';
        player2Board.innerHTML = '';
        player1Ships = placeShipsRandomly();
        player2Ships = placeShipsRandomly();
        player1Hits = [];
        player2Hits = [];
        currentPlayer = 1;
        shotsLeft = 3;
        createBoard(player1Board, player1Ships, true);
        createBoard(player2Board, player2Ships, false);
        updateMessage();
    }

    function createBoard(boardElement, ships, isPlayerBoard) {
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.row = i;
                cell.dataset.col = j;
                if (isPlayerBoard) {
                    cell.classList.add('ship');
                }
                boardElement.appendChild(cell);
                if (!isPlayerBoard) {
                    cell.addEventListener('click', handleCellClick);
                }
            }
        }
    }

    function placeShipsRandomly() {
        let shipPositions = [];
        ships.forEach(shipLength => {
            let placed = false;
            while (!placed) {
                let isHorizontal = Math.random() < 0.5;
                let row = Math.floor(Math.random() * boardSize);
                let col = Math.floor(Math.random() * boardSize);
                let newShip = [];
                for (let i = 0; i < shipLength; i++) {
                    let shipRow = isHorizontal ? row : row + i;
                    let shipCol = isHorizontal ? col + i : col;
                    if (shipRow >= boardSize || shipCol >= boardSize || shipPositions.some(pos => pos[0] === shipRow && pos[1] === shipCol)) {
                        break;
                    }
                    newShip.push([shipRow, shipCol]);
                }
                if (newShip.length === shipLength) {
                    shipPositions = shipPositions.concat(newShip);
                    placed = true;
                }
            }
        });
        return shipPositions;
    }

    function handleCellClick(event) {
        const cell = event.target;
        const row = parseInt(cell.dataset.row);
        const col = parseInt(cell.dataset.col);
        const hitArray = currentPlayer === 1 ? player2Hits : player1Hits;
        const shipArray = currentPlayer === 1 ? player2Ships : player1Ships;

        if (cell.classList.contains('hit') || cell.classList.contains('miss')) {
            return;
        }

        if (shipArray.some(pos => pos[0] === row && pos[1] === col)) {
            cell.classList.add('hit');
            hitArray.push([row, col]);
        } else {
            cell.classList.add('miss');
        }

        shotsLeft--;
        if (shotsLeft === 0) {
            currentPlayer = currentPlayer === 1 ? 2 : 1;
            shotsLeft = 3;
        }

        updateMessage();
        checkForWinner();
    }

    function updateMessage() {
        message.textContent = `Player ${currentPlayer}'s turn. ${shotsLeft} shots left.`;
    }

    function checkForWinner() {
        if (player1Hits.length === player1Ships.length) {
            message.textContent = 'Player 2 wins!';
        } else if (player2Hits.length === player2Ships.length) {
            message.textContent = 'Player 1 wins!';
        }
    }

    resetButton.addEventListener('click', initializeGame);

    initializeGame();
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Battleship</title>
	<link rel="stylesheet" href="styles.css">
	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: Arial, sans-serif;
	}

	#game-container {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	}

	.board {
	display: grid;
	grid-template-columns: repeat(10, 30px);
	grid-template-rows: repeat(10, 30px);
	gap: 2px;
	}

	.cell {
	width: 30px;
	height: 30px;
	background-color: lightblue;
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	}

	.cell.hit {
	background-color: red;
	}

	.cell.miss {
	background-color: white;
	}

	.cell.ship {
	background-color: gray;
	}

	#message {
	margin-top: 20px;
	font-size: 18px;
	}

	#reset-button {
	margin-top: 20px;
	padding: 10px 20px;
	font-size: 16px;
	}
	</style>
	</head>
	<body>
	<h1>Battleship Game</h1>
	<div id="game-container">
	<div id="player1-board" class="board"></div>
	<div id="player2-board" class="board"></div>
	</div>
	<div id="message"></div>
	<button id="reset-button">Reset Game</button>
	<script>document.addEventListener('DOMContentLoaded', () => {
	const player1Board = document.getElementById('player1-board');
	const player2Board = document.getElementById('player2-board');
	const message = document.getElementById('message');
	const resetButton = document.getElementById('reset-button');

	const boardSize = 10;
	const ships = [5, 4, 3, 3, 2]; // Different ship lengths
	let player1Ships = [];
	let player2Ships = [];
	let player1Hits = [];
	let player2Hits = [];
	let currentPlayer = 1;
	let shotsLeft = 3;

	function initializeGame() {
	player1Board.innerHTML = '';
	player2Board.innerHTML = '';
	player1Ships = placeShipsRandomly();
	player2Ships = placeShipsRandomly();
	player1Hits = [];
	player2Hits = [];
	currentPlayer = 1;
	shotsLeft = 3;
	createBoard(player1Board, player1Ships, true);
	createBoard(player2Board, player2Ships, false);
	updateMessage();
	}

	function createBoard(boardElement, ships, isPlayerBoard) {
	for (let i = 0; i < boardSize; i++) {
	for (let j = 0; j < boardSize; j++) {
	const cell = document.createElement('div');
	cell.classList.add('cell');
	cell.dataset.row = i;
	cell.dataset.col = j;
	if (isPlayerBoard) {
	cell.classList.add('ship');
	}
	boardElement.appendChild(cell);
	if (!isPlayerBoard) {
	cell.addEventListener('click', handleCellClick);
	}
	}
	}
	}

	function placeShipsRandomly() {
	let shipPositions = [];
	ships.forEach(shipLength => {
	let placed = false;
	while (!placed) {
	let isHorizontal = Math.random() < 0.5;
	let row = Math.floor(Math.random() * boardSize);
	let col = Math.floor(Math.random() * boardSize);
	let newShip = [];
	for (let i = 0; i < shipLength; i++) {
	let shipRow = isHorizontal ? row : row + i;
	let shipCol = isHorizontal ? col + i : col;
	if (shipRow >= boardSize \|\| shipCol >= boardSize \|\| shipPositions.some(pos => pos[0] === shipRow && pos[1] === shipCol)) {
	break;
	}
	newShip.push([shipRow, shipCol]);
	}
	if (newShip.length === shipLength) {
	shipPositions = shipPositions.concat(newShip);
	placed = true;
	}
	}
	});
	return shipPositions;
	}

	function handleCellClick(event) {
	const cell = event.target;
	const row = parseInt(cell.dataset.row);
	const col = parseInt(cell.dataset.col);
	const hitArray = currentPlayer === 1 ? player2Hits : player1Hits;
	const shipArray = currentPlayer === 1 ? player2Ships : player1Ships;

	if (cell.classList.contains('hit') \|\| cell.classList.contains('miss')) {
	return;
	}

	if (shipArray.some(pos => pos[0] === row && pos[1] === col)) {
	cell.classList.add('hit');
	hitArray.push([row, col]);
	} else {
	cell.classList.add('miss');
	}

	shotsLeft--;
	if (shotsLeft === 0) {
	currentPlayer = currentPlayer === 1 ? 2 : 1;
	shotsLeft = 3;
	}

	updateMessage();
	checkForWinner();
	}

	function updateMessage() {
	message.textContent = `Player ${currentPlayer}'s turn. ${shotsLeft} shots left.`;
	}

	function checkForWinner() {
	if (player1Hits.length === player1Ships.length) {
	message.textContent = 'Player 2 wins!';
	} else if (player2Hits.length === player2Ships.length) {
	message.textContent = 'Player 1 wins!';
	}
	}

	resetButton.addEventListener('click', initializeGame);

	initializeGame();
	});
	</script>
	</body>
	</html>