Tic Tac Toe Game: Play Online - HTML Code - 常规

<!DOCTYPE HTML>
<html>
<head>
    <title>Tic-Tac-Toe</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
            text-align: center;
        }
        #board {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-color: #ccc;
        }
        #board div {
            float: left;
            width: 98px;
            height: 98px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            font-size: 75px;
            line-height: 98px;
        }
        #board div:nth-child(3n) {
            border-right: none;
        }
        #board div:nth-child(n+7) {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <div id="board">
        <div id="s1"></div>
        <div id="s2"></div>
        <div id="s3"></div>
        <div id="s4"></div>
        <div id="s5"></div>
        <div id="s6"></div>
        <div id="s7"></div>
        <div id="s8"></div>
        <div id="s9"></div>
    </div>
    <script>
        var turn = 'X';
        var s1 = document.getElementById('s1');
        var s2 = document.getElementById('s2');
        var s3 = document.getElementById('s3');
        var s4 = document.getElementById('s4');
        var s5 = document.getElementById('s5');
        var s6 = document.getElementById('s6');
        var s7 = document.getElementById('s7');
        var s8 = document.getElementById('s8');
        var s9 = document.getElementById('s9');
<pre><code>    s1.addEventListener('click', function() {
        if (s1.innerHTML == '') {
            s1.innerHTML = turn;
            switchTurn();
        }
    });
    s2.addEventListener('click', function() {
        if (s2.innerHTML == '') {
            s2.innerHTML = turn;
            switchTurn();
        }
    });
    s3.addEventListener('click', function() {
        if (s3.innerHTML == '') {
            s3.innerHTML = turn;
            switchTurn();
        }
    });
    s4.addEventListener('click', function() {
        if (s4.innerHTML == '') {
            s4.innerHTML = turn;
            switchTurn();
        }
    });
    s5.addEventListener('click', function() {
        if (s5.innerHTML == '') {
            s5.innerHTML = turn;
            switchTurn();
        }
    });
    s6.addEventListener('click', function() {
        if (s6.innerHTML == '') {
            s6.innerHTML = turn;
            switchTurn();
        }
    });
    s7.addEventListener('click', function() {
        if (s7.innerHTML == '') {
            s7.innerHTML = turn;
            switchTurn();
        }
    });
    s8.addEventListener('click', function() {
        if (s8.innerHTML == '') {
            s8.innerHTML = turn;
            switchTurn();
        }
    });
    s9.addEventListener('click', function() {
        if (s9.innerHTML == '') {
            s9.innerHTML = turn;
            switchTurn();
        }
    });

    function switchTurn() {
        if (turn == 'X') {
            turn = 'O';
        }
        else {
            turn = 'X';
        }
    }
&lt;/script&gt;
</code></pre>
</body>
</html>