Header text

The Evolution of battleships

Text + image

<h2 style="white-space:pre-line"> Early Naval Warfare: The Age of Wood and Sails</h2>
<p>Galleons and Man-o-Wars (16th-18th Century): These were large, multi-deck sailing ships armed with rows of cannons. They dominated the seas during the Age of Exploration.</p>

photo of of gray wooden ark on land under clear blue sky

<h2 style="white-space:pre-line"> The Dawn of the Battleship Era (Late 19th to Early 20th Century)</h2>
<p>Galleons and Man-o-Wars (16th-18th Century): These were large, multi-deck sailing ships armed with rows of cannons. They dominated the seas during the Age of Exploration.</p>

<h2 style="white-space:pre-line">World War I: Battleships in Action</h2>
<p> The Battle of Jutland (1916) showcased the strategic importance of battleships.</p>

<h2 style="white-space:pre-line">World War II: The Golden Age of Battleships</h2>
<p>Battleships transitioned from dominating fleet engagements to supporting amphibious landings and bombardments.</p>

<h2 style="white-space:pre-line"> The Post-War Era: The Battleship’s Twilight</h2>
<p>Cold War Innovations: Battleships were modernized with guided missiles, radar, and improved anti-aircraft defenses.<br />Last Operational Battleships: The United States reactivated Iowa-class battleships in the 1980s for missile strikes and support missions.<br />Final Retirement: By the 1990s, battleships were decommissioned, replaced by more versatile ships like destroyers and cruisers.</p>

Text

<h2 style="white-space:pre-line">Mini Battleship Game</h2>

Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Battleships with AI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #87ceeb;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
        }
        .game-container {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(5, 60px);
            gap: 5px;
            max-width: 350px;
            margin: 0 auto;
        }
        .grid-item {
            width: 60px;
            height: 60px;
            background-color: #4682b4;
            border: 2px solid #2f4f4f;
            color: white;
            font-size: 1.5em;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .grid-item.hit {
            background-color: #ff4500;
        }
        .grid-item.miss {
            background-color: #b0c4de;
        }
        .message {
            margin-top: 20px;
            font-size: 1.5em;
            color: #2f4f4f;
            text-align: center; /* Center the message */
            width: 100%;
        }
        .retry-button {
            padding: 10px 20px;
            background-color: #4682b4;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
            border-radius: 5px;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .retry-button:hover {
            background-color: #5f9ea0;
        }
    </style>
</head>
<body>

    <div class="game-container">
        <div>
            <h2>Your Grid</h2>
            <div class="grid-container" id="playerGrid"></div>
        </div>
        <div>
            <h2>AI's Grid</h2>
            <div class="grid-container" id="aiGrid"></div>
        </div>
    </div>
    <div class="message" id="message">Take your shot!</div>
    <button class="retry-button" id="retryButton" onclick="initGame()" style="display:none;">Retry</button>

    <script>
        const gridSize = 5;
        const numberOfShips = 3;

        // Store ship positions and hits
        const playerShips = [];
        const aiShips = [];
        const playerHits = [];
        const aiHits = [];
        let playerTurn = true;

        // Utility function to generate random ship positions
        function placeShips(grid, numShips) {
            while (grid.length < numShips) {
                const randomPos = Math.floor(Math.random() * gridSize * gridSize);
                if (!grid.includes(randomPos)) {
                    grid.push(randomPos);
                }
            }
        }

        // Create a grid
        function createGrid(containerId, onClickHandler, clickable = true) {
            const container = document.getElementById(containerId);
            container.innerHTML = ''; // Clear existing grid items before generating new ones
            for (let i = 0; i < gridSize * gridSize; i++) {
                const gridItem = document.createElement('div');
                gridItem.classList.add('grid-item');
                gridItem.dataset.index = i;
                if (clickable) {
                    gridItem.addEventListener('click', () => onClickHandler(gridItem, i));
                }
                container.appendChild(gridItem);
            }
        }

        // Handle player's guess
        function handlePlayerGuess(gridItem, index) {
            if (!playerTurn || gridItem.classList.contains('hit') || gridItem.classList.contains('miss')) {
                return;
            }
            const message = document.getElementById('message');
            if (aiShips.includes(index)) {
                gridItem.classList.add('hit');
                gridItem.textContent = '🚢';
                playerHits.push(index);
                if (playerHits.length === numberOfShips) {
                    message.textContent = 'You win! 🎉';
                    document.getElementById('retryButton').style.display = 'block';
                    return;
                }
            } else {
                gridItem.classList.add('miss');
                gridItem.textContent = '🌊';
            }
            playerTurn = false;
            message.textContent = "AI's turn...";
            setTimeout(aiTurn, 1000);
        }

        // AI's turn
        function aiTurn() {
            const message = document.getElementById('message');
            let guess;
            do {
                guess = Math.floor(Math.random() * gridSize * gridSize);
            } while (aiHits.includes(guess));

            aiHits.push(guess);
            const playerGrid = document.getElementById('playerGrid');
            const gridItem = playerGrid.children[guess];

            if (playerShips.includes(guess)) {
                gridItem.classList.add('hit');
                gridItem.textContent = '🚢';
                if (aiHits.filter(hit => playerShips.includes(hit)).length === numberOfShips) {
                    message.textContent = 'AI wins! 😢';
                    document.getElementById('retryButton').style.display = 'block';
                    return;
                }
            } else {
                gridItem.classList.add('miss');
                gridItem.textContent = '💧';
            }
            playerTurn = true;
            message.textContent = 'Your turn!';
        }

        // Initialize the game
        function initGame() {
            // Hide the retry button and clear previous game data
            document.getElementById('retryButton').style.display = 'none';
            playerShips.length = 0;
            aiShips.length = 0;
            playerHits.length = 0;
            aiHits.length = 0;

            // Place new ships and create new grids
            placeShips(playerShips, numberOfShips);
            placeShips(aiShips, numberOfShips);

            createGrid('playerGrid', () => {}, false); // Player's grid (view only)
            createGrid('aiGrid', handlePlayerGuess, true); // AI's grid (clickable)

            const message = document.getElementById('message');
            message.textContent = 'Take your shot!';
        }

        // Start the game on page load
        window.onload = initGame;

    </script>

</body>
</html>
