Массивы и проверка на Winner с использованием подмножеств в Javascript. Крестики-нолики - PullRequest
Новая
       12

Массивы и проверка на Winner с использованием подмножеств в Javascript. Крестики-нолики

0 голосов
/ 30 октября 2019

** Моя проблема либо в том, как я сохраняю данные в arrX и arrY, либо в том, как я пытаюсь определить победителя. Я еще не учел игру CAT, но не собираюсь этого делать, пока не выясню, как определить победителя. ArrWinner должен проверять каждый элемент внутри него, который является несколькими массивами. Если кто-то является подмножеством arrX или arrY, он должен предупредить окно о том, что игрок выиграл. 

<div style = "text-align: center" class = "box" id = "0" onclick="placeChoice(this.id)"></div>
    <div style = "text-align: center" class = "box" id = "1" onclick="placeChoice(this.id)"> </div>
    <div style = "text-align: center" class = "box" id = "2" onclick="placeChoice(this.id)"> </div>
    <div style = "text-align: center" class = "box" id = "3" onclick="placeChoice(this.id)"> </div>
    <div style = "text-align: center" class = "box" id = "4" onclick="placeChoice(this.id)"></div>
    <div style = "text-align: center" class = "box" id = "5" onclick="placeChoice(this.id)"> </div>
    <div style = "text-align: center" class = "box" id = "6" onclick="placeChoice(this.id)"> </div>
    <div style = "text-align: center" class = "box" id = "7" onclick="placeChoice(this.id)"> </div>
    <div style = "text-align: center" class = "box" id = "8" onclick="placeChoice(this.id)"> </div>
<script>
//count is used to switch between X and O
    let count = 1;
    let xCount = 0;
    let yCount = 0;
    let arrX = [];
    let arrY = [];
    let arrWinner = [
      [0,1,2],
      [3,4,5],
      [6,7,8],
      [0,4,8],
      [6,4,2],
      [0,3,6],
      [1,4,7],
      [2,5,8]
                 ];
    function placeChoice(id)
    {
      //loops a maximum of 9 times bc there are only 9 spots on board
      for(let i = 1; i <= 9; i++)
      {
          if(count % 2 == 1)
          {
            count = count + 1;
            xCount++;
            document.getElementById(id).innerHTML = "X";

            //converts ID which is a string to an int
            let numIdX = parseInt(id);

            //stores the new int into the x array
            arrX[numIdX] = numIdX;

            console.log(arrX);//TEST arrX is storing O ID's???

            //Doesn't let the user click on the same spot again
            document.getElementById(id).onclick = null;

            //if starts when x has picked at least 3 spots to check win
            if(xCount >= 3)
            {
              //Test that is only returning false for me
              console.log(arrWinner.every(val => arrX.includes(val)));

              //checks every element in arrWinner to see if it's a subset of arrX
              // And returns true or false
              if(arrWinner.every(value => arrX.includes(value)) == true)
              {
                window.alert("X Wins!");
              }

            }
          }
          else if(count % 2 == 0)
          {
            count = count + 1;
            yCount++;
            document.getElementById(id).innerHTML = "O";
            let numIdY = parseInt(id);
            arrY[numIdY] = numIdY;
            //console.log(arrY);
            document.getElementById(id).onclick = null;
            if(yCount >= 3)
            {
              if(arrWinner.every(value => arrY.includes(value)) == true)
              {
                window.alert("Y Wins!");
              }
            }
          }
      }
    }
    </script>
...