2016-11-11 8 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 = 'O'; 
    } else { 
     currentPlayer = 'X'; 
    } 
} 
1

:に

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

を!

あなたは、コードをより簡潔にしたい場合は、あなたもternary operatorsを使用して1行でこれを実現することができ、そのよう:

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

あなたが助けるために、あまりにも、あなたのコードの他の部分で三元系を使用することができますあなたが好きなら、繰り返しのif elseステートメントを避けてください。

基本的に、あなたは置き換えることができます。

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

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

三元系は、最初は少し混乱に見えるかもしれませんが、より簡潔なコードの結果として、将来的には単純なエラーのこれらの並べ替えを防ぐことができ、それらに慣れます。

関連する問題