tictactoeとcss3を使って

私はJavaScriptを使ってシンプルなtictactoeゲームをコーディングしていますが、ボード上の最初のクリックで（誰かが勝った!!!）表示します。私は近くにいると知っています。コード。tictactoeとcss3を使って

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .board{ 
      display: flex; 
      width: 600px; 
      height: 600px; 
      flex-direction: row; 
      flex-wrap: wrap; 
      justify-content: flex-start; 
     } 
     .square{ 
      width: 200px; 
      height: 200px; 
      box-sizing: border-box; 
      border: 5px solid black; 
      font-size: 5em; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
     } 
     .square:hover{ 
      cursor: pointer; 
      background-color: #80cd92; 
     } 
    </style> 
</head> 
<body> 

<div class="board"> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
    <div class="square"> </div> 
</div> 

<script> 
    var PLAYER_ONE_SYMBOL = 'X' 
    var PLAYER_TWO_SYMBOL = 'O' 
    var currentTurn = PLAYER_ONE_SYMBOL 

    var board = document.querySelector('.board') 
    board.addEventListener('click',function(e) { 
     e.target.innerHTML = currentTurn 
     currentTurn = currentTurn === PLAYER_ONE_SYMBOL ? PLAYER_TWO_SYMBOL : PLAYER_ONE_SYMBOL 
     if (checkForWinner()) 
     {alert(" somebody won !!! ")} 
    }) 

    function checkForWinner(){ 
     var squares = Array.prototype.slice.call(document.querySelectorAll('.square'), 0) 
     var symbols = squares.map(function(square) { 
      return square.innerHTML 
     }) 
     var 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]] 
      return winningCombos.find(function(combo) 
      { 
      if(symbols[combo[0]]==symbols[combo[1]]&&symbols[combo[1]]==symbols[combo[2]]) 
      {return symbols[combo[0]]} 
      else {return false} 

       }) 
    } 

</script> 
</body> 
</html>

出典

2017-02-08 gualgui

正方形の初期値はすべて同じ（スペース）なので、最初の評価でコンボが勝つのはそのためです。フィールド0,1および2はすべて同じ値を持ちます。

3つのフィールドの値が同じかどうかだけでなく、XまたはOに等しいかどうかを評価する必要があります。

それとも、空の文字列がfalsyとして評価されているという事実に頼って、以下のような何かを行うことができます：

if(symbols[combo[0]] == symbols[combo[1]] 
     && symbols[combo[1]] == symbols[combo[2]]) { 

    return symbols[combo[0]].trim(); // will return 'X', 'O' or empty string 
}

出典

2017-02-08 01:05:33

おかげでたくさんのRobbyあなたは問題を解決！私はこのコードで何が間違っていたのか見てみるのに何時間も費やしました。 – gualgui

tictactoeとcss3を使って

答えて

関連する問題