Tic Tac Toe Javascript confused

enfant terrible · 02-02-2021 1:11am #1

Sorry if I'm asking this in the wrong place.

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?
Tutorial here
https://dev.to/bornasepic/pure-and-simple-tic-tac-toe-with-javascript-4pgn

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

croo · 02-02-2021 10:32am

enfant terrible wrote: »

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

I haven't read the link but won't that depend on what is put in gamestate?
They start off all blank, but I assume the plan is to but X or O in each of gamestate elements as the game progresses.

if 0, 1 & 2 (to take your example) are all "X" then it's a win!?

SilverSideUp · 02-02-2021 11:57am

Your 'for' loop is checking each array in winningConditions[].

For example, on the first check, it looks at [0,1,2].

a, b and c are the values at

winningConditions[[0,1,2]]

After this check is done, it moves to the next row

winningConditions[[3,4,5]]

and assigns values again to a, b and c.

The values of a, b and c change for each iteration through the 'for' loop.

It carries out this check a total of 8 times, once for each possible winning row.

JoyPad · 02-02-2021 2:49pm

You need to imagine that gameState is an array of 9 positions, in which we have either nothing, an X or an O.
The positions are as follows:

0|1|2
3|4|5
6|7|8

To win, one player must have their sign across row 1 (positions 0, 1 and 2), row 2 (positions 3, 4, and 5), and so on. These combinations are the groups in the winningConditions constant.

Inside that for loop, variables a, b and c contain the sign at each position from a winning combination. If any of them is empty (no symbol played there), then the game is not won. If the three positions all contain the same symbol, then the game is won. Interestingly enough, the function does not return the winner, just the fact that the game is over. The winner is the symbol at the three positions, e.g. the value that a, b, and c variables all have.

Talisman · 02-02-2021 2:58pm

Try commenting the code to help yourself understand it and the logic reveals itself.

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

// There are 8 winning conditions : [0..7]
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;

  // loop through winningConditions
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];

    // a : first element of winningCondition
    let a = gameState[winCondition[0]];
    // b : second element of winningCondition
    let b = gameState[winCondition[1]];
    // c : third element of winningCondition
    let c = gameState[winCondition[2]];

    console.log(a);
    console.log(b);
    console.log(c);

    // if the three elements are empty skip
    // to the next iteration of the loop
    if (a === '' || b === '' || c === '') {
      continue;
    }

    // Elements are not empty

    // if a == b & b == c -> a == c
    // this is a valid winning condition
    if (a === b && b === c) {
      roundWon = true;
      break
    }
  }

enfant terrible · 02-02-2021 8:39pm

SilverSideUp wrote: »
Your 'for' loop is checking each array in winningConditions[].

For example, on the first check, it looks at [0,1,2].

a, b and c are the values at
winningConditions[[0,1,2]]
After this check is done, it moves to the next row
winningConditions[[3,4,5]]
and assigns values again to a, b and c.

The values of a, b and c change for each iteration through the 'for' loop.

It carries out this check a total of 8 times, once for each possible winning row.

JoyPad wrote: »

You need to imagine that gameState is an array of 9 positions, in which we have either nothing, an X or an O.
The positions are as follows:

0|1|2
3|4|5
6|7|8

To win, one player must have their sign across row 1 (positions 0, 1 and 2), row 2 (positions 3, 4, and 5), and so on. These combinations are the groups in the winningConditions constant.

Inside that for loop, variables a, b and c contain the sign at each position from a winning combination. If any of them is empty (no symbol played there), then the game is not won. If the three positions all contain the same symbol, then the game is won. Interestingly enough, the function does not return the winner, just the fact that the game is over. The winner is the symbol at the three positions, e.g. the value that a, b, and c variables all have.

Talisman wrote: »

Try commenting the code to help yourself understand it and the logic reveals itself.

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

// There are 8 winning conditions : [0..7]
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;

  // loop through winningConditions
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];

    // a : first element of winningCondition
    let a = gameState[winCondition[0]];
    // b : second element of winningCondition
    let b = gameState[winCondition[1]];
    // c : third element of winningCondition
    let c = gameState[winCondition[2]];

    console.log(a);
    console.log(b);
    console.log(c);

    // if the three elements are empty skip
    // to the next iteration of the loop
    if (a === '' || b === '' || c === '') {
      continue;
    }

    // Elements are not empty

    // if a == b & b == c -> a == c
    // this is a valid winning condition
    if (a === b && b === c) {
      roundWon = true;
      break
    }
  }

Thank you guys for taking the time to help me.

Just one part confusing me still.
The for loop iterates through winningConditions, on first loop it contains [0,1,2]

let a = gameState[winCondition[0]];

Does this assign whatever is in gameState array index 0 to a

let b = gameState[winCondition[1]];

This then assigns whatever is in gameState array index 1 to b and then c.

Then it checks if a, b and c are the same and if so game is won?

croo · 02-02-2021 9:07pm

enfant terrible wrote: »

Just one part confusing me still.
The for loop iterates through winningConditions, on first loop it contains [0,1,2]

let a = gameState[winCondition[0]];

Does this assign whatever is in gameState array index 0 to a

Yes. And on the second loop through it will be gameState array index 3!

enfant terrible wrote: »

let b = gameState[winCondition[1]];

This then assigns whatever is in gameState array index 1 to b and then c.

Yes. if that a typo and you meant and

then index 2 to c

.

enfant terrible wrote: »

Then it checks if a, b and c are the same and if so game is won?

Yes.

enfant terrible · 02-02-2021 9:14pm

croo wrote: »

Yes. And on the second loop through it will be gameState array index 3!

Yes. if that a typo and you meant and .

Yes.

Thank you guys guess its not so complicated.

Talisman · 03-02-2021 10:48am

enfant terrible wrote: »

Thank you guys guess its not so complicated.

Most programming languages have zero-based indexing, once you come to terms with that understanding loops and arrays is simpler.

Khawardavid · 15-03-2022 12:06pm

https://www.boards.ie/discussion/2058155993/tic-tac-toe-javascript-confused

Khawardavid · 15-03-2022 12:09pm

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 winning Conditions values, b corresponds to the next nine and c to the last six check the example tic tac toe beast

So clicking on cells 0,1 & 2 is not going to make a and 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

Tic Tac Toe Javascript confused

Comments