Play Tic Tac Toe Online - Free HTML Game - 常规

<!DOCTYPE html>
<html>
    <head>
        <title>Tic Tac Toe</title>
        <style type="text/css">
            * {
                font-family: sans-serif;
            }
            .board {
                width: 300px;
                height: 300px;
                margin: 0 auto;
                background-color: #ccc;
                display: flex;
                flex-wrap: wrap;
            }
            .square {
                width: 100px;
                height: 100px;
                box-sizing: border-box;
                background-color: #fff;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 48px;
            }
        </style>
    </head>
    <body>
        <h1>Tic Tac Toe</h1>
        <div id="board" class="board">
            <div class="square" data-pos="0"></div>
            <div class="square" data-pos="1"></div>
            <div class="square" data-pos="2"></div>
            <div class="square" data-pos="3"></div>
            <div class="square" data-pos="4"></div>
            <div class="square" data-pos="5"></div>
            <div class="square" data-pos="6"></div>
            <div class="square" data-pos="7"></div>
            <div class="square" data-pos="8"></div>
        </div>
        <script type="text/javascript">
            let board = document.getElementById("board");
            let squares = document.querySelectorAll(".square");
            let turn = 'X';
            let gameOver = false;
<pre><code>        for (let i = 0; i &lt; squares.length; i++) {
            squares[i].addEventListener(&quot;click&quot;, function() {
                if (gameOver) return;
                if (squares[i].innerText === '') {
                    squares[i].innerText = turn;
                    turn = turn === 'X' ? 'O' : 'X';
                }
                checkWin();
            });
        }

        function checkWin() {
            let winningCombos = [
                [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 (let i = 0; i &lt; winningCombos.length; i++) {
                let combo = winningCombos[i];

                if (
                    squares[combo[0]].innerText === squares[combo[1]].innerText &amp;&amp;
                    squares[combo[1]].innerText === squares[combo[2]].innerText &amp;&amp;
                    squares[combo[0]].innerText !== ''
                ) {
                    gameOver = true;
                    alert(`${squares[combo[0]].innerText} wins!`);
                }
            }
        }
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>&lt;/htm</p>