Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Tic Tac Toe</h1>
    <div id="board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <button id="reset">Reset</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>


#board {
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.cell {
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    cursor: pointer;
}

button {
    display: block;
    margin-top: 10px;
}



$(document).ready(function() {
    var currentPlayer = "X";
    var cells = $(".cell");

    cells.click(function() {
        var cell = $(this);

        if (cell.text() === "") {
            cell.text(currentPlayer);
            cell.addClass(currentPlayer);

            if (checkWin(currentPlayer)) {
                alert(currentPlayer + " wins!");
                resetBoard();
            } else if (checkDraw()) {
                alert("It's a draw!");
                resetBoard();
            } else {
                currentPlayer = currentPlayer === "X" ? "O" : "X";
            }
        }
    });

    $("#reset").click(function() {
        resetBoard();
    });

    function checkWin(player) {
        var 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]
        ];

        for (var i = 0; i < winningCombinations.length; i++) {
            var combo = winningCombinations[i];
            if (
                cells.eq(combo[0]).hasClass(player) &&
                cells.eq(combo[1]).hasClass(player) &&
                cells.eq(combo[2]).hasClass(player)
            ) {
                return true;
            }
        }

        return false;
    }

    function checkDraw() {
        return $(".cell:empty").length === 0;
    }

    function resetBoard() {
        cells.text("");
        cells.removeClass("X");
        cells.removeClass("O");
        currentPlayer = "X";
    }
});
Editor is loading...