Have 2 array with 5 number between 0-8,go through array if any possible combo match the numbers in array. if yes say winner. Combos = given in my ans

Question

Ans :

var p1arr = [];
var p2arr = [];


const GameBoard = (() => {
    const PlayerFactory = (name, mark, turn) => {
        return { name, mark, turn }
    };

    const player1 = PlayerFactory("Player 1", "X", true);
    const player2 = PlayerFactory("Player 2", "O", false);



    let boxes = document.querySelectorAll('.box');
    boxes.forEach(boxes => {
        boxes.addEventListener('click', e => {
            if (player1.turn === true) {
                boxes.textContent = player1.mark;
                // alert("Kaam 1 ho gya");
                p1arr[e.target.id] = player1.mark;
                console.log(p1arr);
                player1.turn = false;
                player2.turn = true;
                checkwinner();
            }
            else if (player2.turn === true) {
                boxes.textContent = player2.mark;
                // alert("Kaam 2 ho gya");
                p2arr[e.target.id] = player2.mark;
                console.log(p2arr);
                player1.turn = true;
                player2.turn = false;
                checkwinner();
            }
        });
    })

})();

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

function checkwinner(){
   
  // Check if any winCombos match the numbers in array1
  var isWinner1 = checkWinCombos(p1arr);
  if (isWinner1) {
    console.log("Winner found in array1!");
  }
  
  // Check if any winCombos match the numbers in array2
  var isWinner2 = checkWinCombos(p2arr);
  if (isWinner2) {
    console.log("Winner found in array2!");
  }

  // Function to check if any winCombos match the given array
  function checkWinCombos(array) {
    for (var i = 0; i < winCombos.length; i++) {
      var combo = winCombos[i];
      var isMatch = true;
      for (var j = 0; j < combo.length; j++) {
        if (array.indexOf(combo[j]) === -1) {
          isMatch = false;
          break;
        }
      }
      if (isMatch) {
        return true;
      }
    }
    return false;
  }

I have tried all the combinations but I didn't get the result written "Winner". Please help me to solve the problem as I am making a tic tac toe game using java script.I have started the code and I had taken the input from user but not found the winner. I know I have to work a lot on this project but I got stuck in between and can't able to find where to go.

Answer 1

You were basically there. You can change:

if (array.indexOf(combo[j]) === -1) {

to:

if (!array[combo[j]]) {

The reason is that you are storing an X or an O in the array, not a number. For example, after playing X in the center square you perform p1arr[e.target.id] = player1.mark;. I presume the id of that square is 4 and therefore, you will assign p1arr[4] = 'X', leaving your p1arr looking like this:

[
  undefined,
  undefined,
  undefined,
  undefined,
  "X"
]

To correctly check to see if a square has a mark in it, you don't have to change much, you can just check the truthiness of the value in the array. array[combo[j]] will be X or O (truthy) where there is a mark, and undefined (falsy) where there is no mark.

Your non-working original code was checking to see if the array contained the index of the cell. For example, when playing X in the center square, it was looking to see if p1arr contained an element equal to 4, which it clearly does not. But rather, there will be some X's at various indices depending on the state of the game board.

Full example (with working HTML and CSS)

var p1arr = [];
var p2arr = [];


const GameBoard = (() => {
    const PlayerFactory = (name, mark, turn) => {
        return { name, mark, turn }
    };

    const player1 = PlayerFactory("Player 1", "X", true);
    const player2 = PlayerFactory("Player 2", "O", false);



    let boxes = document.querySelectorAll('.box');
    boxes.forEach(boxes => {
        boxes.addEventListener('click', e => {
            if (player1.turn === true) {
                boxes.textContent = player1.mark;
                // alert("Kaam 1 ho gya");
                p1arr[e.target.id] = player1.mark;
                console.log(p1arr);
                player1.turn = false;
                player2.turn = true;
                checkwinner();
            }
            else if (player2.turn === true) {
                boxes.textContent = player2.mark;
                // alert("Kaam 2 ho gya");
                p2arr[e.target.id] = player2.mark;
                console.log(p2arr);
                player1.turn = true;
                player2.turn = false;
                checkwinner();
            }
        });
    })

})();

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

function checkwinner(){
   
  // Check if any winCombos match the numbers in array1
  var isWinner1 = checkWinCombos(p1arr);
  if (isWinner1) {
    console.log("Winner found in array1!");
  }
  
  // Check if any winCombos match the numbers in array2
  var isWinner2 = checkWinCombos(p2arr);
  if (isWinner2) {
    console.log("Winner found in array2!");
  }

  // Function to check if any winCombos match the given array
  function checkWinCombos(array) {
    for (var i = 0; i < winCombos.length; i++) {
      var combo = winCombos[i];
      var isMatch = true;
      for (var j = 0; j < combo.length; j++) {
        if (!array[combo[j]]) {
          isMatch = false;
          break;
        }
      }
      if (isMatch) {
        return true;
      }
    }
    return false;
  }
}

.box {
}

h1 {
  text-align: center;
}
table {
  border-collapse: collapse;
}
td {
  width: 32px;
  height: 32px;
  text-align: center;
}
table {
  margin: 5px auto;
}
.vert {
  border-left: 2px solid black;
  border-right: 2px solid black;
}
.hori {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

<table>
  <tr>
    <td id="0" class="box"></td>
    <td id="1" class="box vert"></td>
    <td id="2" class="box"></td>
  </tr>
  <tr>
    <td id="3" class="box hori"></td>
    <td id="4" class="box vert hori"></td>
    <td id="5" class="box hori"></td>
  </tr>
  <tr>
    <td id="6" class="box"></td>
    <td id="7" class="box vert"></td>
    <td id="8" class="box"></td>
  </tr>
</table>