Search code examples
javascripttic-tac-toe

Is there a way to match an array values to another array values?


I'm trying to make a winCondition in which an activePlayer which is either player1 or player2. Matches with any of the arrays that hold specific values.

I set my board up where each button has their own data-number going from 0 to 8.

When the activePlayer clicks on one of those buttons, they will push that data-number to their own array

 const player1 = Players("Player 1", 0, "X", []);
 const player2 = Players("Player 2", 0, "O", []);

I then want to check if either of those players array values matches with any of the winning combinations(markersToHit). The markersToHit is an array that holds multiple arrays inside, all those arrays are all the possible ways to win in a tic tac toe. From top to bottom, left-to-right or right-to-left, and diagonal.

const checkWinAndTie = () => {
    const winCheck = () => {
      const markersToHit = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
      ]

      //I want to check if the activePlayer PlayerHits(which holds an array), matches
      //with any of the values inside markersToHit
      //if they match, I want to  display the activePlayer has won the round and add a score to them

      for (let i = 0; i < markersToHit.length; i++) {
        console.log(markersToHit[i]);
        if (markersToHit[i] === getActivePlayer().playerHits) {
          console.log(`${getActivePlayer().name} wins!`);
        }
      }
      console.log(`${getActivePlayer().name} :${getActivePlayer().playerHits}`);
    }

    winCheck();
  }

I tried to make an if statement that will match the values from the winningCombination to the activePlayer values in it's array. I'm expecting it to output on which player has won the round but I'm just stuck on the moment. Honestly, been five days.

Any ideas on how I can accomplish this?

Here is the codepen, if you're not clear on it. The console shows the playerHits I'm talking about: https://codepen.io/jimmyjimenez2400/pen/ZEjvrPq


Solution

  • All comments in the code:

    // Copied from your code, the winning combinations
    const markersToHit = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
    
    // Call this function with an array holding the player's current choices
    function isItAWinner(choices) {
      let winner = false;
      // Loop through all winning combinations
      markersToHit.forEach(winningCombination => {
      
        // If a winning combination has already been found, skip
        if(winner) return;
        
        // matchers contains the intersection of the player's choices and the current winning combination
        let matches = winningCombination.filter(singleMarker => {
          return choices.includes(singleMarker)
        });
        
        // If all three necessary choices of this winning combination are matched, this player wins
        if (matches.length === 3) {
          console.log("Winning combination: " + matches);
          winner = true;
        }
      });
      return winner;
    }
    
    // An example: player's choices (spoiler: they win)
    const playersChoices = [0, 3, 8, 6];
    console.log(isItAWinner(playersChoices));