gloopit gloopit - 3 months ago 6
Javascript Question

Why isn't my game ending in a tie?

I'm coding a tic-tac-toe game in pure javascript.

My program correctly checks if either Player1 or Player2 have won. For some reason, it's not able to check if it's a tie though.

I have set a counter called

moveCounter
. After each successful move, the counter is incremented by one. It is not possible for the counter to reach higher than 9.

Below is a function that tests the game's state.

It will check if player1 or player2 has won. It does this fine.

Below you can see I'm attempting to test for a tie. But nothing is happening. The game is just stuck and nothing is being printed to the console aside from the counter which is being incremented in my
placePiece()
function.

I have tried playing around with it and altering the if condition, along with it's position without the function and I'm having no luck so far.

Here's my
gameState()
function:

// 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);
}
};


Here's where it gets called:

// 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

Assume you init moveCounter = 0, then move gameState() after incrementing moveCounter

moveCounter++;
gameState();
Comments