create a tic tac toe game with html css and js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        #board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-gap: 5px;
        }

        .cell {
            width: 100px;
            height: 100px;
            border: 2px solid #333;
            font-size: 2em;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .cell:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>

<div id="board"></div>

<script>
    const board = document.getElementById('board');
    let currentPlayer = 'X';
    let gameBoard = ['', '', '', '', '', '', '', '', ''];
    let gameActive = true;

    function checkWinner() {
        const winPatterns = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
            [0, 4, 8], [2, 4, 6]             // diagonals
        ];

        for (let pattern of winPatterns) {
            const [a, b, c] = pattern;
            if (gameBoard[a] !== '' && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c]) {
                return gameBoard[a];
            }
        }

        return null;
    }

    function handleCellClick(index) {
        if (!gameBoard[index] && gameActive) {
            gameBoard[index] = currentPlayer;
            updateBoard();
            const winner = checkWinner();
            if (winner) {
                alert(`${winner} wins!`);
                gameActive = false;
            } else if (!gameBoard.includes('')) {
                alert('It\'s a draw!');
                gameActive = false;
            } else {
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            }
        }
    }

    function updateBoard() {
        board.innerHTML = '';
        for (let i = 0; i < 9; i++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.textContent = gameBoard[i];
            cell.addEventListener('click', () => handleCellClick(i));
            board.appendChild(cell);
        }
    }

    updateBoard();
</script>

</body>
</html>

Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Related Articles

Building a Goal Tracker with HTML, CSS, and JavaScript

Goal tracking is an essential aspect of personal development and productivity. By visualizing your progress and breaking down tasks into manageable steps, you can stay motivated and focused. In this tutorial, we will create a simple yet effective Goal Tracker application using HTML, CSS, and JavaScript. This application will allow users to set goals, track their progress, and see their achievements over time.

Responses

Your email address will not be published. Required fields are marked *