How to make game a draw with existing code-CodePudding

I've created functions with all winning combinations for player one and player two but need to create one for a draw and don't want to write out all possible draw combinations. What would be the best way to attempt this? I was thinking if I could make the playerOneWin and playerTwoWin function true if they run I could have a draw function() that says if both are false then the match is a draw, or if all boxes are fille and playerOne and playerTwo haven't won then it is a draw.

var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
var box3 = document.querySelector(".box3");
var box4 = document.querySelector(".box4");
var box5 = document.querySelector(".box5");
var box6 = document.querySelector(".box6");
var box7 = document.querySelector(".box7");
var box8 = document.querySelector(".box8");
var box9 = document.querySelector(".box9");

var activePlayer;

var playerOne = "X";
var playerTwo = "O";

activePlayer = playerOne;

function clickBoxPlayer(event) {
  if (activePlayer === playerOne) {
    var boxClicked = event.target;

    if (
      boxClicked.innerHTML === playerOne ||
      boxClicked.innerHTML === playerTwo
    ) {
      console.log("noturturn");
    } else if (boxClicked.innerHTML === "") {
      boxClicked.innerHTML = activePlayer;
      activePlayer = playerTwo;
    }
    console.log("one");
    //tie && winning function

    function playerOneWin() {
      if (
        box1.innerHTML === playerOne &&
        box2.innerHTML === playerOne &&
        box3.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box1.innerHTML === playerOne &&
        box4.innerHTML === playerOne &&
        box7.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box1.innerHTML === playerOne &&
        box5.innerHTML === playerOne &&
        box9.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box2.innerHTML === playerOne &&
        box5.innerHTML === playerOne &&
        box8.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box3.innerHTML === playerOne &&
        box6.innerHTML === playerOne &&
        box9.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box3.innerHTML === playerOne &&
        box5.innerHTML === playerOne &&
        box7.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box4.innerHTML === playerOne &&
        box5.innerHTML === playerOne &&
        box6.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      } else if (
        box7.innerHTML === playerOne &&
        box8.innerHTML === playerOne &&
        box9.innerHTML === playerOne
      ) {
        console.log("playeronewins");
      }
    }
    playerOneWin();
  } else if (activePlayer === playerTwo) {
    var boxClicked = event.target;

    if (
      boxClicked.innerHTML === playerOne ||
      boxClicked.innerHTML === playerTwo
    ) {
      console.log("noturturn");
    } else if (boxClicked.innerHTML === "") {
      boxClicked.innerHTML = activePlayer;
      activePlayer = playerOne;
    }

    console.log("two");
  }
  //player two winning combinations
  function playerTwoWin() {
    if (
      box1.innerHTML === playerTwo &&
      box2.innerHTML === playerTwo &&
      box3.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box1.innerHTML === playerTwo &&
      box4.innerHTML === playerTwo &&
      box7.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box1.innerHTML === playerTwo &&
      box5.innerHTML === playerTwo &&
      box9.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box2.innerHTML === playerTwo &&
      box5.innerHTML === playerTwo &&
      box8.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box3.innerHTML === playerTwo &&
      box6.innerHTML === playerTwo &&
      box9.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box3.innerHTML === playerTwo &&
      box5.innerHTML === playerTwo &&
      box7.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box4.innerHTML === playerTwo &&
      box5.innerHTML === playerTwo &&
      box6.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    } else if (
      box7.innerHTML === playerTwo &&
      box8.innerHTML === playerTwo &&
      box9.innerHTML === playerTwo
    ) {
      console.log("playertwowins");
    }
  }
  playerTwoWin();
}

var allBoxes = document.querySelector(".allBoxes");
allBoxes.addEventListener("click", clickBoxPlayer);

.allBoxes div {
  display     : block;
  float       : left;
  width       : 2em;
  height      : 2em;
  margin      : .3em;
  background  : lightgrey;
  text-align  : center;
  line-height : 1.8em;
  cursor      : pointer;
  }
.allBoxes div:nth-of-type(4),
.allBoxes div:nth-of-type(7) {
  clear : left;
  }

<section >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</section>

CodePudding user response：

You are correct, if you changed your playerOneWin and playerTwoWin functions to return true or false based on the checks that you are already doing and if you also add a function that returns true if all boxes are filled (and false otherwise), then you can use them to check for the winning and the draw conditions like this

    if (playerOneWin()) {
        console.log("playeronewins");
    }

    // your other code

    if (playerTwoWin()) {
        console.log("playertwowins");
    }
    else if (allBoxesFilled() && !playerOneWin()) {
        console.log("draw");
    }

CodePudding user response：

the way to do that:

const
  Boxes    = Array.from(document.querySelectorAll('#allBoxes > div'))
, players  = ['x','o']
, winCases = [[0,1,2],[3,4,5],[6,7,8],[0,4,8],[2,4,6],[0,3,6],[1,4,7],[2,5,8]] 
  ;
var 
  playerNum = 0
, winnerIs  = ''
  ;
document.querySelector('#allBoxes').onclick = ({target}) =>
  {
  if (!target.matches('#allBoxes div')
    || winnerIs != '' 
    ) return

  if (target.textContent ==='')
    {
    target.textContent = players[playerNum]
    checkWinner(players[playerNum])
    playerNum =   playerNum % 2
  } }
function checkWinner(player)
  {
  if (winCases.some(suite=>suite.every(x=>Boxes[x].textContent === player )))
    {
    winnerIs = player
    console.log(' winner is:',player)
     
    for (let [a,b,c] of winCases)
      {
      if ( Boxes[a].textContent === player
        && Boxes[b].textContent === player
        && Boxes[c].textContent === player
        ){
        Boxes[a].className = Boxes[b].className = Boxes[c].className = 'win'
        break;
  } } } }

#allBoxes div {
  display     : block;
  float       : left;
  width       : 2em;
  height      : 2em;
  margin      : .3em;
  background  : lightgrey;
  text-align  : center;
  line-height : 1.8em;
  cursor      : pointer;
  }
#allBoxes div:nth-of-type(4),
#allBoxes div:nth-of-type(7) {
  clear : left;
  }
#allBoxes div.win {
  background : yellow;
  }

<section id="allBoxes">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</section>