Tic tac toe JavaScript game - test user's number for matching patterns?

Question

Im making a game of "tic tac toe" also called "naughts and crosses".

Each of the 9 squares has a number:

1 2 3
4 5 6
7 8 9

As each player has a go the number they've chosen is added to the state. So if user1 has chosen squares 1 and 2, and user2 has chosen squares 4 and 5 then the state object looks like this:

const state = selected: {
  user1: [1,2],
  user2: [4,5]
}

After each go I need to check the state to see if either user has 3 in a row. Here are all the possible winning numbers:

const winingNumbers = [
  [1,2,3], // top row
  [4,5,6], // middle row
  [7,8,9], // bottom row
  [1,4,7], // first column
  [2,5,8], // second column
  [3,6,9], // last column
  [1,5,9], // last column
  [3,6,9], // diagonal 1
  [3,5,7]  // diagonal 2
];

How can I check the state to see if any of the users have a row? In this example user1 has a match:

const state = selected: {
  user1: [6,3,2,1],
  user2: [9,4,5]
}

In this example user2 has a match:

const state = selected: {
  user1: [1,9,2,8],
  user2: [5,4,3,6]
}

Note that the numbers can be an any order and other numbers not part of the match might be in the state also. Im using Bable so I can use ES6 syntax.

how is that question different from [this question](https://stackoverflow.com/questions/46648619/see-if-an-array-contains-all-the-number-from-other-nested-arrays-with-javascript)? — Nina Scholz, Oct 10 '17 at 08:53
@NinaScholz It seemed my previous question was unclear and no one understood the requirements exactly. Thats why I made a new question explaining the problem in more details. — Evanss, Oct 10 '17 at 09:04
@Evans, you should not ask a new question then, but add information to your first question, and provide comments to those who answer. By accepting an answer you indicate that you are happy with it, so that now looks a bit contradictory. Where there are accepted answers, people will not quickly provide new answers as it looks like the problem was solved to satisfaction. — trincot, Oct 10 '17 at 09:19
@trincot my thinking was that I didn't want to invalidate the answers by changing the question too much. As everyone had been confused (even after I tried to clarify my question) I thought it best to accept one of the interpretations. I take your point though, ill try and avoid this confusion in the future. — Evanss, Oct 10 '17 at 09:26
To be honest, I still don't see how the accepted answer on your original question does *not* answer your question, even after reading this rephrased question. So, you'll need to be clear *why* you feel that answer is not really answering your question. In my opinion it is superior to what has been answered here below. — trincot, Oct 10 '17 at 09:32

score 0 · Accepted Answer · edited Oct 10 '17 at 12:11

0

You could loop through every number in every array in the winning numbers array and then loop though every number in the user's state and check if the user's state contains the 3 numbers. like this:

let winning = false;
winningNumbers.forEach((winningArray) => {
    let hasWinningNumbers = true;
    winningArray.forEach((number) => {
        if(user.indexOf(number) == -1)
            hasWinningNumbers = false;
    });

    if(hasWinningNumbers) {
        winning = true;
    }
});

edited Oct 10 '17 at 12:11

Evanss

23,390
94
282
505

answered Oct 10 '17 at 08:56

Nir Kogman

131
2
8

Im getting a compilation error. I dont think that break is valid. – Evanss Oct 10 '17 at 09:45
You're right I'll fix it. – Nir Kogman Oct 10 '17 at 09:58

notrota · Answer 2 · 2017-10-10T10:26:30.157

to do that, use array.indexOf(element) >= 0 to check if an element is in an array:

eg

const winningNumbers = [
  [1,2,3], // top row
  [4,5,6], // middle row
  [7,8,9], // bottom row
  [1,4,7], // first column
  [2,5,8], // second column
  [3,6,9], // last column
  [1,5,9], // last column
  [3,6,9], // diagonal 1
  [3,5,7]  // diagonal 2
];  

// user one
const user1 = [3, 5, 7, 8];

function checkIfWin(user) {
  let won = false;
  winningNumbers.forEach(row => {
    if (   user.indexOf(row[0]) > -1
        && user.indexOf(row[1]) > -1
        && user.indexOf(row[2]) > -1) {
      won = true; // for testing, in the real thing do "return true"
    }
  });
  return won;
}

console.log(checkIfWin(user1));

This always returns true, even if user1 only has 2 numbers so cannont possibly have 3 in a row. — Evanss, Oct 10 '17 at 09:41

Tic tac toe JavaScript game - test user's number for matching patterns?

2 Answers2