Tic-Tac-Toe - how to implement turns? (and the game not fully resetting)

Tic-Tac-Toe - how to implement turns? (and the game not fully resetting)
0

#1

I feel pretty stupid. I’ve made my way through all the front end projects but this one has me stuck on what feels like it should be an easy step. I can’t figure out how to implement the turns in the game. I can swap from player’s turn to computer’s turn easily enough within a while loop, but I’m unable to make the game wait for the user’s input.

I’ve abandoned the rest of the gameplay for now and just made a really basic test game in which the user and computer add Xs and Os to the screen in turn, just to work out what I’m doing wrong. I’ve tried searching everything I can on turn based games and user input. As I’m using Jquery it seems the .on() method should work but in practice I seem to be doing it wrong and keep getting stuck in infinite loops.

Please can anyone help? I feel so stupid.

https://codepen.io/jsanderson/pen/KmGRdW


#2

Instead of looping you could define a starting player, be it X or O and have both of them have a counter of turns.
The maximum number of turns for the game can be 9 as there are 9 spots where you can enter a value, a player can do 4 or 5 moves, depending on who starts.

Start a counter TOTAL_MOVES = 0 and X_MOVES = 0 and O_MOVES = 0
Decide the starting player
Starting player makes a move, if the starting player is X, TOTAL_MOVES++ && X_MOVES++
Otherwise TOTAL_MOVES++ && O_MOVES++
Game ends at 9 TOTAL_MOVES.
You don’t even need the X and O moves variables, but for the sake of knowing the game steps, use them if you wish. Hope it was helpful.


#3

That sounds like it’d work, though I’m still not sure how to have the game wait for the human player’s input, and that’s my major stumbling block here. Thanks.

(edit) tried a second version with a for loop but again, can’t make it wait for the user to click the button to add their input. I think I’m seriously misunderstanding event handlers or something.

https://codepen.io/jsanderson/pen/rmqZKZ

(second edit) hmm should probably explain what’s going on here since it’s not really tic tac toe at this point. Basically the user and computer are just taking it in turns to add an X or O mark into the div until 9 moves have passed. The user adds their mark by clicking the “add” button. What I need is for the program, when it’s the user’s turn, to sit and wait for the user to do that before continuing. It seems like it should be so simple but it’s not?


#4

I would start first by building the board. Then create the function that assigns a X or O to the cpu or player.

You will also need to do this for the “X” choice, the choice to be “O” is below.

  $("#oButton").on("click", function() {
    player = "O";     //assigns player "O"
    cpu = "X";        //assigns cpu "X"
    cpuAi();       //this function is the cpu moves.  Will need to create this
    moves = 0;  //sets moves to 0
  });

Next, I created a click function that allows me to mark a square with the letter I choose.

     $(".squares").on("click", function() 
         $(this).html(player);   //sets X or O in the square you click
          cpuAi();              //this function is the cpu moves. Will need to create this
     });

From there you create a function for the cpu moves(cpuAi()), checking for a winner and resetting the game board. The function for where the cpu should move gave me the most trouble. I opted to use if-else statements but there’s a min max function that is more elegant and intelligent. My solution is very basic and eventually I’ll clean it up. I included a link to my project. Like I said it’s very basic.


#5

I did mine’s the same way as rmonastra. Another important thing that you’ll need if doing it that way is an if statement inside the click event callback so that you are unable to click a cell that has already been touched. In order to do this I created a 9-slot array of booleans to keep track of which slots had already been “touched.” To know which slot I was on I had number id’s that corresponded to the indexes in the array. There’s countless ways to go about this though.
Sorry. I don’t know how to embed code :frowning: .
The relevant code starts at line 43.


#6

you don’t need a for loop, just check the number of moves every time the player or the computer makes a move, that can be done with the onclick event on the player turns and you can then deal the computer’s turn, score, checks and everything inside that onclick block. No need for loops.


#7

Thankyou, I did start out with a board, but as I was having trouble with the turn functions I decided to strip everything out and get that to work first. I think I have it working now thanks to your advice, will see how it works on a board proper.


#8

Your welcome, if you have any other questions just ask.


#9

Definitely have something working and the turn logic seems to be fine. I’m experiencing some odd behaviour with games following the first one, though. When you first play a game it works ok but subsequent games have some odd behaviour such as stating you have won when there isn’t a full line. Can’t work out why.

Note I’m using an array that corresponds to the board to actually see what has been filled in and check for win conditions, but I’m console logging it each turn to see it and there doesn’t seem to be anything wrong there. The game should completely reset every time but it seems as though something is sticking around from previous games and I can’t see what it is…

https://codepen.io/jsanderson/pen/dWwPRQ