Making Noughts and Crosses Game in 1 Minute

Posted on 16 July 2024

Don't believe it can be done in 1 minute? Just watch the video and see for yourself! ChatGPT even ignored my typos and knew what I meant.

The Code

Here's the HTML5 / CSS / Javascript code that ChatGPT gave us.

Obviously it could be tweaked a bit to make the game more attractive with colours, images, sound effects, etc., but this code works straight out of the box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noughts and Crosses</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #game {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
        }
        .cell {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            cursor: pointer;
        }
        .cell.winning {
            background-color: #8f8;
        }
        #message {
            margin-top: 20px;
            text-align: center;
        }
        #reset {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game">
        <div class="cell" data-index="0"></div>
        <div class="cell" data-index="1"></div>
        <div class="cell" data-index="2"></div>
        <div class="cell" data-index="3"></div>
        <div class="cell" data-index="4"></div>
        <div class="cell" data-index="5"></div>
        <div class="cell" data-index="6"></div>
        <div class="cell" data-index="7"></div>
        <div class="cell" data-index="8"></div>
    </div>
    <div id="message"></div>
    <button id="reset" style="display:none;">Play Again</button>

    <script>
        const cells = document.querySelectorAll('.cell');
        const message = document.getElementById('message');
        const resetButton = document.getElementById('reset');
        let board = Array(9).fill(null);
        let currentPlayer = 'X';
        let isGameOver = false;

        cells.forEach(cell => {
            cell.addEventListener('click', handleCellClick);
        });

        resetButton.addEventListener('click', resetGame);

        function handleCellClick(event) {
            const cell = event.target;
            const index = cell.getAttribute('data-index');

            if (board[index] || isGameOver) {
                return;
            }

            board[index] = currentPlayer;
            cell.textContent = currentPlayer;

            if (checkWinner()) {
                message.textContent = `Player ${currentPlayer} Wins!`;
                isGameOver = true;
                resetButton.style.display = 'block';
            } else if (board.every(cell => cell)) {
                message.textContent = 'Draw!';
                resetButton.style.display = 'block';
            } else {
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            }
        }

        function checkWinner() {
            const winningCombinations = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6]
            ];

            return winningCombinations.some(combination => {
                if (board[combination[0]] && board[combination[0]] === board[combination[1]] && board[combination[1]] === board[combination[2]]) {
                    combination.forEach(index => {
                        cells[index].classList.add('winning');
                    });
                    return true;
                }
                return false;
            });
        }

        function resetGame() {
            board.fill(null);
            cells.forEach(cell => {
                cell.textContent = '';
                cell.classList.remove('winning');
            });
            currentPlayer = 'X';
            isGameOver = false;
            message.textContent = '';
            resetButton.style.display = 'none';
        }
    </script>
</body>
</html>

Noughts and Crosses

And here's a working example of the game itself: