Need help with TicTacToe project computer AI functionality

Need help with TicTacToe project computer AI functionality
0

#1

Hi campers,

I am working on the TicTacToe project. I have been stuck for about a week trying to get my computerTurn function to work properly. In the 2 player game option, everything works great, however when you choose 1 player game, and make the first move (which shows up fine), the computer’s move doesnt show up. I have used a nested array called “grid” to link to the html to show the moves. I can see when i console.log the grid that the computer is picking a spot, I just can’t figure out how to target that spot properly and dislplay the “X” or “O” for the computer. Also, I noticed from the console.log(grid) that when I hit the “play again” button instead of refresh the page, the computer moves start the get buggy and not work properly the second time around.

My goal is to find a solution without changing the entire structure of my code. I have looked at other coder’s projects and can’t seem to make their logic work with my code structure. I am still fairly inexperienced, and I know there is probably something small I am missing, just can’t seem to put my finger on it.

Any help or advice would be greatly appreciated! Here is a link to my codepen:

Thanks in advance!


#2

I believe you need some sort of timing function like setTimeout().


#3

Sometimes trying to make someone else’s code work work with your logic is like trying to fit a square peg into a hole. They are not compatible.

Your code is very difficult to follow. It is not organized (i.e functions at top of local scope and main code at bottom). Also, you have so much duplicate code. The code for the ‘X’ button click vs the ‘O’ button click is only about 1% different. You should create a function for this and figure out a way to handle the small differences. Your code appears as if you did not have a clear algorithm for certain sections before you started writing code.

I am just going to focus on if I am player ‘X’, because what I say should also apply to if I was player ‘O’/ Also, I am just going to explain how you can modify your code to have the computer make a mark on the board. I personally would recommend starting over with a well thought out algorithm for each piece of your game, but that will be up to you.

After I click a square which gets filled with an ‘X’ using $(this).html(“X”); your code checks if the game is won. If not, your computerTurn executes. computerTurn is where you should make the “O” mark. Instead of a $(this) like you had for the player to know which square to mark, you have compRow and compCol which represent the position a square on the board. But wait a second, will compRow and compCol actually give us good values to use? Let’s look at your computerTurn function closely. I assume you are wanting a random number either 0, 1, or 2 to be assigned to compRow and compCol with your code, but that is NOT what will happen. I suggest you review one of the earlier FCC challenge on creating random whole number to get only values of 0, 1, or 2.

      function computerTurn() {
        console.log('computerTurn')
        var compRow = (Math.random() * 3).toFixed();
        var compCol = (Math.random() * 3).toFixed();
        if (grid[compRow][compCol] === 0) {
          grid[compRow][compCol] = 2;
        }
        console.log(grid);
      }

Let’s assume you figure out how to get the correct random numbers for compRow and compCol and we get to your if statement which checks if a square has a 0 in it which means the space is available for a mark by the computer. If it is available, then you assign 2 to the 2-dimensional array grid using the compRow and compCol as indices. This is fine, but what if compRow and compRow end up being a square that is already occupied by either the player (1) or the computer (2)? You have no logic to handle getting another available square. You need to develop an algorithm around how you would do this.

Let’s assume you figured out how to get a compRow and a compCol which is definitely an available square for the computer to play. Now, we can make use of the jQuery eq function to select the correct row and col of the available square an put a ‘O’ in it.

$('#gameBoard .row:eq('+compRow+') .col:eq('+ compCol+')').html('O');

#4

Hi Randell,

Thanks for taking the time to look over my mess of a code and offer some solid advice. Like I said I am inexperienced with 0 schooling except for what I’ve learned on FCC. I will definitely take your advice and start over, trying to plan better before I start to write the code. Also thanks for bringing the eq function to my attention, I was not aware it existed. I will have to spend more time researching jQuery functions.

Cheers!