井字棋

阿新 • • 發佈：2021-06-21

1.小白時期寫的，勿噴

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        h3{
            text-align: center;
        }
        td{
            background: #c2c2c2;
            width 
: 70px;
            height: 70px;
            text-align: center;
        }
        table{
            margin: auto;
            border: #ffffff 3px solid;
        }
        span{
            background: #ffaa7f
        }
        footer{
            text-align: center;
        }
        input{
            border-radius 
: 7px;
            outline: none;
            background-color: antiquewhite;
        }
    </style>
    <body>
        <header>
            <h3>井字棋</h3>
        </header>
        <hr style="border: #FA8072 2px solid;"/>
        <br />
        <section> 

            <table>
                <script type="text/javascript">
                    var rows=3,cols=3
                    for(var i=0;i<rows;i++){
                        tab='<tr>'
                        for(var j=0;j<cols;j++){
                            var sid = (i*cols)+j
                            tab+='<td id="'+sid+'" onclick="game(id)"></td>'
                        }
                        tab+='</tr>'
                        document.write(tab)
                    }
                </script>
            </table>
        </section>
    <script type="text/javascript">
      let CheckBoard = [
        10,10,10,
        10,10,10,
        10,10,10
      ]
      let play = true
      function game(e){
       document.getElementById(e).onclick = null
       play = !play
       switch (play){
         case true: {
           document.getElementById(e).style.background = "#ff557f"
           CheckBoard[e] = 2
           GameOver()
           break
         }
         case false: {
           CheckBoard[e] = 1
           document.getElementById(e).style.background = "#55ffff"
           GameOver()
           break
         }
       }
      }
      function GameOver(){
        let VictoryOne = CheckBoard[0]+CheckBoard[1]+CheckBoard[2]
        let VictoryTwo = CheckBoard[0]+CheckBoard[4]+CheckBoard[8]
        let VictoryThree = CheckBoard[0]+CheckBoard[3]+CheckBoard[6]
        let VictoryFour = CheckBoard[1]+CheckBoard[4]+CheckBoard[7]
        let VictoryFive = CheckBoard[2]+CheckBoard[5]+CheckBoard[8]
        let VictorySix = CheckBoard[2]+CheckBoard[4]+CheckBoard[6]
        let VictorySeven = CheckBoard[6]+CheckBoard[7]+CheckBoard[8]
        let VictoryEight = CheckBoard[3]+CheckBoard[4]+CheckBoard[5]
        let WinText = play ? '紅方勝利' : '藍方勝利'
        if (VictoryOne == 3 || VictoryTwo == 3 || VictoryThree == 3 || VictoryFour == 3 || VictoryFive == 3 || VictorySeven == 3 || VictorySix == 3 || VictoryEight == 3 || 
            VictoryOne == 6 || VictoryTwo == 6 || VictoryThree == 6 || VictoryFour == 6 || VictoryFive == 6 || VictorySix == 6 || VictorySeven == 6 || VictoryEight == 6) {
          setTimeout(()=>{
            alert(WinText)
            location.reload()
          },10)
        }
      }
    </script>
    </body>
</html>

2.入門時期寫的，不喜勿噴

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
  <style type="text/css">
    .table{
      width: 300px;
      height: 300px;
    }
    .table tr td:hover{
      cursor: pointer;
      /* cursor: not-allowed; */
    }
    .div_table{
      width: 500px;
      height: 500px;
      /* background: #FFF0F5 ; */
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .btn_con{
      width: 180px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .btn{
      width: 80px;
      /* background: lavenderblush; */
    }
  </style>
    <body>
    <div class="div_table">
      <div class="btn_con">
        <button class="btn" id="start" onclick="GameClick(id)">開始</button>
        <button class="btn" onclick="GameClick(id)">結束</button>
      </div>
      <table border="" cellspacing="" cellpadding="" class="table" id="table">
        <tr>
          <td onclick="GameClick(id)" id="1"></td>
          <td onclick="GameClick(id)" id="2"></td>
          <td onclick="GameClick(id)" id="3"></td>
        </tr>
        <tr>
          <td onclick="GameClick(id)" id="4"></td>
          <td onclick="GameClick(id)" id="5"></td>
          <td onclick="GameClick(id)" id="6"></td>
        </tr>
        <tr>
          <td onclick="GameClick(id)" id="7"></td>
          <td onclick="GameClick(id)" id="8"></td>
          <td onclick="GameClick(id)" id="9"></td>
        </tr>
      </table>
    </div>
    
    <script type="text/javascript">
      // 獲勝的情況
      let arr = [ 
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 5, 9], 
        [1, 4, 7],
        [3, 5, 7],
        [2, 5, 8],
        [3, 6, 9]
      ]
      // 兩位玩家
      let player1 = []
      let player2 = []
      // 判斷誰的回合，預設玩家1
      let play = true
      // 開始遊戲
      function GameClick(e){
          // 點選之後刪除點選事件
        document.getElementById(e).onclick = null
        play = !play
        switch (play){
          case true: {
            player1.push(e)
            document.getElementById(e).style.background = "#ff557f"
            checkwin(arr, player1)
            break
          }
          case false: {
            player2.push(e)
            document.getElementById(e).style.background = "#55ffff"
            checkwin(arr, player2)
            break
          }
        }
      }
      // 判斷勝負
      function checkwin(e, value){
      value.sort()
      let WinText = play ? '紅方勝利' : '藍方勝利'
      for(let index in e) {
        if(value.length>3){
          alert('我報錯了')
        }
        if(e[index].toString()===value.toString()){
          setTimeout(()=>{
            alert(WinText)
          },10)
        }
      }
      }
      // 難點：
      // 先把陣列排序,從小到大進行排序，簡單使用sort方法
    // 兩個陣列只能轉化為字串進行比對，一致判斷勝負
    // 陣列去重，取出相同值,效能及其垃圾，也就一開始隨便做出來的
    </script>
  </body>
</html>