#Struggling to create a bot that plays tic tac toe randomly

36 messages · Page 1 of 1 (latest)

jade pumice
#
  • you should stop using innerHTML
  • your function names are crazy confusing. suggest renaming them to something more accurate/descriptive.
  • step through your overall logic and you'll find the issue
#

  1. script loads and calls playTurn() (first poorly named function, since it doesn't actually play a turn at all...). all this function does is assign a click event handler to every spot on the board.

  2. when a player clicks on the board, the above click handler is called. all this handler does is check if user selected bot or 2 players. if 2 players, call chooseTwoPlayers(). if bot, call chooseAIBot(). both of these are poorly named, since this is not related to choosing the opponent.

  3. ignoring 2-player mode, chooseAIBot() actually sets the players choice on the board and sets currentTurn to 2. no matter what play it is, it always sets it to 2... furthermore, that's all the function actually does. the user would have to click again for botPlay() to ever get called, but even that's a mess of confusion.

# 
    const botPlay = () => {
        let randomPlay = getBotChoice().innerHTML;
        // for (let i = 0; i < boardArray.length; i++) {}
        playerHeading.textContent = "";
        if (playerOption.value === "X") {
            randomPlay = "X";
        } else if (playerOption.value === "O") {
            randomPlay = "O";
        }
        randomPlay.currentTurn = 1;
    };

what is it that you expect this to even do?

#

"X".currentTurn = 1 😢

#

it's fine here, but better to avoid altogether. you never need it. use textContent like you're already doing several places.

#

playBotTurn() is still in your click handler, instead of automatically being called after the players turn.

#

why are you looping through the entire boardArray?

#

I explained the busted logic above

#

step through it. step-by-step

#

you already picked a random number. that number is an index from your array.

#

why are you setting the bots choice to the same character the player selected?

#

ya, see above

#

you're also always setting currentTurn to either 1 or 2, so you're going to have a tough time playing more than two turns.

#

yikes. I just saw how you're checking for a win, too. why use a class (that isn't even syntactically correct)?

#

stop making every function call reliant on click handlers. you do the same thing in your (terribly named) WinConditions.play() function

#

again, think it through step-by-step logically. do you want a function to be called when a user clicks on something or do you want it to be called after the previous line of another function?

#

why would it?

#

are you though?

#

when is playTurn() called?

#

if you didn't use such terrible names, it would be a lot more obvious

#

no...

#

tell me step-by-step what you think that function is doing.

#

nope

#

you're wrong.

#

you skipped several lines of the function

#

and doing what with that array (only one array)?

#

adding a click event listener.

#

the only thing that function does is add event listeners. it does not call them.

#

those event listeners are not called until the click event.

#

so of course a click is required for anything inside of them to occur

#

again, read through JS.info. you really need to read the whole thing, but you specifically should read the entire async section

#

exactly what I just said.

#

for what?

#

you're already using too many

#

go sleep, then go read. you aren't close because you aren't understanding the basic flow of code.