Question about Tic Tac Toe game - alert not working

1

Hi all, I’m making progress on my Tic Tac Toe game. I’m almost done with letting the computer make the optimal move by doing the following –

  1. If the opponent will win, block the button.
  2. otherwise, if there’s a chance to form a straight line, click that button
    3)otherwise, if the button in the very center of the grid exists, click on that
  3. otherwise, if any buttons in the four corners exist, click on that
  4. otherwise, click on any random button that remains to be clicked.

It seems to work fine, except that I want an alert to appear, saying “computer won!”, if condition 2) is met – meaning the computer clicked a button to form a straight line. However, that alert isn’t working right now.

Below is my code. winX is the buttons to win for the opponent, winO is the buttons to win for the computer, allBtn is all the buttons left to be clicked, and cornerBtn are the buttons in the four corners. For some reason, the computer will click the button in the winO array when condition 2 is met, but not executing the console.log, or alert function.

Thanks!

if(winX.length>0){
randomBtn = winX[Math.floor(Math.random() * winX.length)];
}

 else if(winO.length>0){
   randomBtn = winO[Math.floor(Math.random() * winO.length)];
   console.log(winO.indexOf(randomBtn));
   alert ("computer won!");
 }
 
 else if (allBtn.indexOf(5) > -1) {
   randomBtn = 5;
 }
 
 else if (cornerBtn.length>0){
   randomBtn = cornerBtn[Math.floor(Math.random() * cornerBtn.length)];
   cornerBtn.splice(cornerBtn.indexOf(randomBtn), 1);
 }
 
 else {randomBtn = allBtn[Math.floor(Math.random()*allBtn.length)];};

You can see the original codepen here.

2

Try using console.log() to debug your code and see where you are not seeing what you expect, for example:

console.log("Nya!", winX, winO); // This logs "Nya!" and the expected values of winX and winO to the console

if(winX.length>0){
  // Is the code inside this if statement never executed?
  console.log("Nyu?")

  randomBtn = winX[Math.floor(Math.random() * winX.length)];
}
else if(winO.length>0){
  // Is the code inside this else if statement never executed even when the computer wins?
  console.log("Nyo!");

  randomBtn = winO[Math.floor(Math.random() * winO.length)];
  console.log(winO.indexOf(randomBtn));
  alert ("computer won!");
}

Before you do that you should really refactor your code first—at the moment you have effectively the same code repeated nine times for very single button, you can simply make a function for that code and pass in the button number as a variable. Debugging for both the player and the computer will become a lot easier that way, too.

You may also want to read a style guide for JavaScript. Writing readable code, if nothing else, will likely increase the chance of people helping you and should be a basic requirement (I assume) for getting hired if that’s what you are aiming for.

3

Thanks for your great suggestions! I’ll try to rewrite the code and make the repetitive part into a function. Will also use console.log() the way you suggested.

Do you have any suggestions on which resources to use for the JS style guide? Thanks again!

4

I personally use Google’s style guide as a reference only because the first time I read about JavaScript style guide was about it. You will likely find other style guides more digestible if you are just starting out.

Do note that most, if not all, of these rules have nothing to do with whether your code will run or not—they are just the preferred ways a specific group of people structure code, designed with legibility and maintainability in mind. So the bottom line is that you don’t have to follow any rules in these guides as long as you are consistent and your code is written with readability in mind (treat it as your room and that there is always the chance of a good friend suddenly dropping by)—if nothing else, refactoring will become easier, and you will likely avoid unnecessary headaches when you ever learn another language, such as Python, in which spacing matters.

Once you are comfortable with being able to write code consistently, you could consider setting up a code editor, such as Atom or Sublime Text, and use tools that help you write consistent code faster (indentation guide, linter, templates… etc.).

I hope that helps, good luck. :slight_smile:

5

great, super helpful! Will look into the Google style guide, and your explanation of the purpose of having a consistent style for readability makes perfect sense! Thanks again!!

1 Like