Help With The TicTacToe Project

Help With The TicTacToe Project
0

#1

I have two arrays ‘won1’ and ’ won2’ to compare with ‘win’ win is an array of arrays that have all the possible results to the winner. when I compare ‘won1’ to ‘win’ - once I’ve gained the game - it works and alerts that “X won”, but when the “O wins the game”, it doesn’t alert anything. I’m using a function in which I just call win and won1/won2.

Here’s my code on code pen:

it’s quite messy but I’m just trying things out.

Also, I have no idea how to make the game ‘unwinnable’, so any tips would be appreciated.

If I’m overcomplicating things, please tell me, I’ve done this all on my own so I didn’t come up with a better way to approach this challenge.


#2

Did you resolve your problem? I assume you did, because when I play the game as ‘X’ and let ‘O’ win, it notifies me that the computer won the game (see screenshot below).


#3

If you google “tic tac toe strategy”, you will come up with several sites that explain scenarios to win or at least tie in every game. The computer’s logic would need to recreate this strategy to never lose.

You just need to convert these strategies into an algorithm and then write the code for it. Another more advanced way to have the computer always either win or tie is to use the Minimax algorithm. Several campers here have successfully implemented this approach in their tic tac toe projects. Search the forum for Minimax to see what questions and answers other campers have had about Minimax.


#4

Yes I did, it turned out it was because the function executed only when I click events, then if the computer wins the game the function wouldn’t execute. I just added setTimeOut so the function would call itself every x seconds.


#5

After I read the above statement, I reviewed your code. Using setTimeout to run every 2 seconds is more of a hack than a real solution. Instead of calling the move function over and over every 2 seconds, you only want to call it after the player makes a move and

I refactored your code by removing the setTimeout that runs every 2 seconds inside the move function and the relevant clearTimeouts. Since your move function really just adds the computer’s move and performs a check to see if the computer has one or ties, the most logical place to call the move function is right after your push the computer’s move into the won2 array.

I also reviewed the rest of your code and a found a lot of duplicate code that could be eliminated. One example of duplicate code is in your compare and compare2 functions. They are 99% the same function. The only difference between the two is in compare, you assign isSame an expression and in compare2, you assign isSame2 the same exact expression. Why not just have one function (compare) that returns the value of this final expression and then where you need to refer to isSame or isSame2, you assign the result of the calling the function to the applicable variable (isSame or isSame2). This would take out 18 lines of code from your overall solution.

Example:

      const move = function() {
        for (let i = 0; i < win.length; i++) {
          compare2(win[i], won2);
          if (isSame2) {

becomes

      const move = function() {
        for (let i = 0; i < win.length; i++) {
          isSame2 = compare(win[i], won2);
          if (isSame2) {

Actually, if you make the change I suggest to have only a single compare function, you do not even need an isSame or isSame2 variable. Instead, you could just change your if statement to:

      const move = function() {
        for (let i = 0; i < win.length; i++) {
          if ( compare(win[i], won2) ) {

Hopefully, this helps you to understand how to first get rid of that band-aid setTimeout you were using and a little more about writing DRY (Do Not Repeat Yourself) code. If you have any questions or comments about what I have written here, please reply back.


#6

thanks for the code review, I will make the changes that you suggested, I’m still a beginner so I am currently struggling to get the code to work as opposed to writing better code xD though I always trying to figure out what’s the best way to do certain tasks :DD.