CODEWITHSUNDEEP
javascript
paul allen
paul allen

Reputation: 69

Tic Tac Toe winning condition checks (confused)

Following a simple tutorial but just cant understand how the program determines if you've won the game. It looks so simple but I don't understand how a,b & c been true results in the game been won. When I console.log a,b & c as I click on a cell I can see a corresponds to the first nine of winningConditions values, b corresponds to the next nine and c to the last six.

So clicking on cells 0,1 & 2 is not going to make a,b and c equal.

Can anyone clear this up for me?

    let gameState = ["", "", "", "", "", "", "", "", ""];
    let currentPlayer = "X";

    const winningConditions = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
    ];

    function handleResultValidation() {
        let roundWon = false;
        for (let i = 0; i <= 7; i++) {
            const winCondition = winningConditions[i];
            let a = gameState[winCondition[0]];
            let b = gameState[winCondition[1]];
            let c = gameState[winCondition[2]];
    
            console.log(a);
            console.log(b);
            console.log(c);
            if (a === '' || b === '' || c === '') {
                continue;
            }

            if (a === b && b === c) {
                roundWon = true;
                break
            }
        }

Upvotes: 0

Views: 2234

Answers (2)

pbialy
pbialy

Reputation: 1083

In the for loop you check, for each win condition, if it's fullfiled.

Let's check how it works for i equal 6. So you check if this win condition is true:

X##
#X#
##X

You then have

("=" is a math "=", not programic "=" here)
a = gameState[winCondition[0]] = gameState[0]
b = gameState[winCondition[0]] = gameState[4]
c = gameState[winCondition[0]] = gameState[8]

gameState represents your game state in a way that it's an array of 9 elements, and the field

123
456
789

is represented as gameState = [1,2,3,4,5,6,7,8,9]

So you check the 0th, 4th and 8th field in your game for i=6.

If a === b and b === c, then you have also a === c.

So you know that all 3 fields are the same, which fullfils the win condition for i=6.

Upvotes: 1

Shane Bishop
Shane Bishop

Reputation: 4750

If we look at the first iteration of the for loop, when i is 0, the expression

const winCondition = winningConditions[i];

will cause the variable winCondition to have the value [0, 1, 2], since that is the value at index 0 of winningConditions.

Next, the lines

let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];

will set a to gameState[0], b to gameState[1], and c to gameState[2]. Suppose a holds the value X. If a === b && b === c, this means the top row in the tic tac toe board is all Xs, meaning the game is over.

Why is a === b && b === c sufficient? This is sufficient due the transitive property of equality in math. If, in math, A equals B and B equals C, then A must also equal C. In the case of this tic tac toe implementation, a === b && b === c simply checks to see if a, b, and c are all X or all O.

Since the winCondition list exhaustively lists all possible ways that a 3x3 tic tac toe game can be won, looping over each possible win condition state will cause a game over state to be detected.

Upvotes: 0

Related Questions