tictactoe с javascript using css3

Я использую JavaScript для кодирования простой игры tictactoe, но она отображает (кто-то выиграл !!!) при первом нажатии на доске, я знаю, что я близко, но я не могу найти проблему в своем код.tictactoe с javascript using 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 имеют одинаковое значение.

Вы должны не только оценить, имеют ли все три поля одинаковое значение, но также и то, соответствуют ли они 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 с javascript using css3

ответ

Смежные вопросы