2016-11-11 50 views
0
<html> 
<head> 
    <title>My Tic Tac Toe</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
     .Row { 
      display:table-row; 
     } 
     .cell { 
      display: table-cell; 
      border: solid black; 
      border-width: medium; 
      padding: 0 3px; 
      height: 95px; 
      width: 95px; 
      text-align: center; 
      font-size: 40px; 
      vertical-align: middle; 
     } 
    </style> 
    <script> 
     var xPlayer = prompt("Player x what is your name?"); 
     var oPlayer = prompt("Player o what is your name?"); 
     var currentPlayer = "X"; 
     var xGameTotal = 0; 
     var oGameTotal = 0; 
     var xWins = 0; 
     var oWins = 0; 
     var xMessage = 0; 
     var oMessage = 0; 
     var winsArray = [7, 56, 448, 73, 146, 292, 273, 84]; 

     function playerMoved(id,value){ 
      changeMarker(id); 
      updatePlayerTotal(value); 

      if (checkWinner(xGameTotal)){ 
       xWins ++; 
       if (xWins ===1) 
       { 
        xMessage = " time"; 
       } 
       else 
       { 
        xMessage = " times"; 
       } 
       resetBoard(); 
      } 
      if (checkWinner(oGameTotal)) { 
       oWins ++; 
       if (oWins ===1) 
       { 
        oMessage = " time"; 
       } 
       else 
       { 
        oMessage = " times"; 
       } 
       resetBoard(); 
      } 

      switchPlayers(); 
     } 
     function changeMarker(box){ 
      if (currentPlayer === "X") 
      { 
       box.innerHTML = 'X'; 
      } 
      else 
      { 
       box.innerHTML = 'O'; 
      } 
     } 
     function switchPlayers(){ 
      if (currentPlayer === "X") 
      { 
       currentPlayer = 'X'; 
      } 
      else 
      { 
       currentPlayer = 'O'; 
      } 
     } 
     function updatePlayerTotal(score){ 
      if (currentPlayer === "X") 
      { 
       xGameTotal = xGameTotal + score; 
      } 
      else 
      { 
       oGameTotal = oGameTotal + score; 
      } 
     } 
     function checkWinner(score){ 
      for (var index = 0; index < winsArray.length; index += 1) 
      { 
       if ((winsArray[index] & score) === winsArray[index]) 
        return true; 
      } 
      return false; 
     } 
     function resetBoard(){ 
      var board = document.getElementsByClassName("cell"); 
      for (var i=0; i < board.length; i++){ 
       board[i].innerHTML=""; 
      } 
      oGameTotal=0; 
      xGameTotal=0; 

     } 
    </script> 
</head> 
<body onload="start()"> 
    <h1>Tic Tac Toe</h1> 
    <div class="Row"> 
     <div class="cell" onClick="playerMoved(this,1)"></div> 
     <div class="cell" onClick="playerMoved(this,2)"></div> 
     <div class="cell" onClick="playerMoved(this,4)"></div> 
    </div> 
    <div class="Row"> 
     <div class="cell" onClick="playerMoved(this,8)"></div> 
     <div class="cell" onClick="playerMoved(this,16)"></div> 
     <div class="cell" onClick="playerMoved(this,32)"></div> 
    </div> 
    <div class="Row"> 
     <div class="cell" onClick="playerMoved(this,64)"></div> 
     <div class="cell" onClick="playerMoved(this,128)"></div> 
     <div class="cell" onClick="playerMoved(this,256)"></div> 
    </div> 
</body> 

井字JavaScript就無法改變球員

我不能讓玩家切換。當你點擊廣場時,總是玩家X.我錯過了什麼?我想也許我的嵌套是錯的,但我似乎無法找到任何東西。任何幫助,將不勝感激。謝謝!

回答

2

你的條件(switchPlayers)是否有錯。您正在檢查當前播放是否爲x,然後再次將當前播放器設置爲x。

只要改變這些行:

function switchPlayers(){ 
    if (currentPlayer === "X") { 
     currentPlayer = 'X'; 
    } else { 
     currentPlayer = 'O'; 
    } 
} 

到:

function switchPlayers(){ 
    if (currentPlayer === "X") { 
     currentPlayer = 'O'; 
    } else { 
     currentPlayer = 'X'; 
    } 
} 
1

製作編輯湯米建議修復這個問題對我來說!

如果你想使代碼更簡潔,也可以在一行中使用ternary operators做到這一點,就像這樣:

function switchPlayers() { 
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; 
} 

你可以在你的代碼的其他部分使用ternaries,也幫助如果你喜歡,避免重複的if else陳述。

基本上,可以更換:

if(a === 'b') { 
    c = 'foo'; 
} 
else { 
    c = 'bar'; 
} 

帶:c = a === 'b' ? 'foo' : 'bar'

開頭的三元組似乎有點混亂,但由於代碼更加簡潔,習慣它們可以幫助防止將來出現這類簡單的錯誤。