Почему моя игра не заканчивается галстуком?

Question

Я кодирую игру tic-tac-toe в чистом javascript.

Моя программа правильно проверила, выиграли ли Player1 или Player2. По какой-то причине он не может проверить, является ли это галстуком.

У меня установлен счетчик moveCounter. После каждого успешного шага счетчик увеличивается на единицу. Счетчик не может достичь выше 9.

Ниже приведена функция, которая проверяет состояние игры.

Он проверит, победил ли игрок1 или игрок2. Он делает это хорошо.

Ниже вы можете видеть, что я пытаюсь проверить галстук. Но ничего не происходит. Игра просто застряла, и ничего не печатается на консоли, кроме счетчика, который увеличивается в моей placePiece() функции.

Я попытался сыграть с ним и изменить условие if, а также его позицию без функции, и до сих пор мне не повезло.

Вот моя gameState() функция:

// The game ends when one player has three of their symbols in a row either horizontally, vertically or diagonally. 
function gameState() { 

    var result; 

    //boxes 
    var a1 = document.getElementById('a1'); 
    var a2 = document.getElementById('a2'); 
    var a3 = document.getElementById('a3'); 
    var b1 = document.getElementById('b1'); 
    var b2 = document.getElementById('b2'); 
    var b3 = document.getElementById('b3'); 
    var c1 = document.getElementById('c1'); 
    var c2 = document.getElementById('c2'); 
    var c3 = document.getElementById('c3'); 

    //See if Player 1 has won 
    if((a1.classList.contains("box-filled-1") && a2.classList.contains("box-filled-1") && a3.classList.contains("box-filled-1")) || (b1.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && b3.classList.contains("box-filled-1")) || (b1.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && b3.classList.contains("box-filled-1")) || (c1.classList.contains("box-filled-1") && c2.classList.contains("box-filled-1") && c3.classList.contains("box-filled-1")) || (a1.classList.contains("box-filled-1") && b1.classList.contains("box-filled-1") && c1.classList.contains("box-filled-1")) || (a2.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && c2.classList.contains("box-filled-1")) || (a3.classList.contains("box-filled-1") && b3.classList.contains("box-filled-1") && c3.classList.contains("box-filled-1")) || (a1.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && c3.classList.contains("box-filled-1")) || (a3.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && c1.classList.contains("box-filled-1"))){ 
     result = "player1" 
     return gameOver(result); 
    } 

    //See if Player 2 has won 
    if((a1.classList.contains("box-filled-2") && a2.classList.contains("box-filled-2") && a3.classList.contains("box-filled-2")) || (b1.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && b3.classList.contains("box-filled-2")) || (b1.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && b3.classList.contains("box-filled-2")) || (c1.classList.contains("box-filled-2") && c2.classList.contains("box-filled-2") && c3.classList.contains("box-filled-2")) || (a1.classList.contains("box-filled-2") && b1.classList.contains("box-filled-2") && c1.classList.contains("box-filled-2")) || (a2.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && c2.classList.contains("box-filled-2")) || (a3.classList.contains("box-filled-2") && b3.classList.contains("box-filled-2") && c3.classList.contains("box-filled-2")) || (a1.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && c3.classList.contains("box-filled-2")) || (a3.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && c1.classList.contains("box-filled-2"))){ 
     result = "player2" 
     return gameOver(result); 
    } 

    //If all of the squares are filled and no players have three in a row the game is a tie. 
    if(moveCounter === 9){ 
     result = "tie"; 
     console.log("tie"); 
     return gameOver(result); 
    } 
}; 

Вот где она вызывается:

// Players can only click on empty squares. When the player clicks on an empty square, attach the class box-filled-1 (for O) or box-filled-2 (for X) to the square. 
    function placePiece() { 
     if(!this.classList.contains("box-filled-1") && !this.classList.contains("box-filled-2")) { 
      if(currentPlayer === player1){ 
       this.classList.add("box-filled-1"); 

       player1.currentPlayer = false; 
       player2.currentPlayer = true; 
       currentPlayer = player2; 

       currentPlayerFlag(); 
       gameState(); 
       moveCounter++; 
       console.log(moveCounter); 
      } else { 
       this.classList.add("box-filled-2"); 

       player2.currentPlayer = false; 
       player1.currentPlayer = true; 
       currentPlayer = player1; 

       currentPlayerFlag(); 
       gameState(); 
       moveCounter++; 
       console.log(moveCounter); 
      } 
     } 
    }; 

Answer 1

Предположим, вы инициализации moveCounter = 0, а затем перейти GameState() после того, как увеличивающиеся moveCounter

moveCounter++; 
gameState();