Tic-Tac-Toe turn system - help needed

1

Hi campers!

I am working on the Tic-Tac-Toe JavaScript project but I am hitting a wall with regards to the turn system. If I run the function playGame() on the console manually, the computer turn runs and the circle is placed on the game board, however I am unable to get this to automatically run from my code. I tried with a while loop that runs until the totalMoves are equal to 9, but this creates an infinite loop that breaks the code.

This is a link to my codepen, I would really appreciate your help :slight_smile:

Thank you in advance!

2

Maybe try calling playGame() in player turn:

//player actions
function player(icon) {
  //adding a cross to the clicked blocks
  for (let i = 0; i < blocks.length; i++) {
    blocks[i].addEventListener("click", function() {
      if (
        computerMoves.indexOf(this.id) !== -1 ||
        playerMoves.indexOf(this.id) !== -1
      ) {
        return;
      }
      this.getElementsByTagName("i")[0].classList.add("clicked");
      whoseTurn = "computer";
      totalMoves++;
      playerTurn++;
      //storing the moves from the player and sorting them to compare with winning result
      playerMoves.push(this.id);
      playerMoves.sort();
      console.log(playerMoves);
      hasWon(playerMoves, winningCombinations);
      playGame();
    });
  }
}
1 Like
3

Thank you so much, that was the missing piece! I was trying to approach this in the wrong way… How did you come up with this solution?

4

I’m glad it helped. Sometimes it’s just the little things. In your app, after you called playGame(), player() would run. However, after player() ran, nothing else would happen in your code. That’s because you declared the functions, but they weren’t being called anywhere else in your code, so they were just sitting doing nothing.