My first steps before changing any of the code was to see the logic and how this actually works. So I started to map out each function starting from the main function.
At first this main function looks simple, the steps I observed.
- If the game area is clicked then it will put an X or 0 depending if its the players turn
- It then stores the results using the incer function and then checks this result using the check function.
- If the check returns false then it will disable the gameArea and enable the restart button
Nothing really to observe in the check function, it seems that it just sets the color of the tiles if the player wins and returns false if the player wins.
This function took the longest to figure out as at first glance I had no idea what it was doing.
- Parameters: i = $(this).data(“i”), j = $(this.data(“j”), t = 1 or -1
- If it is 3 in a row horizontal then it will return 11 or -9
- if it is 3 in a row vertical then it will return 21 or 19
- diag is an array (diag[0,0])
- it adds to see if its diagonal, if its diagonal starting from the left then it returns 30 and if its diagonal starting from the right then it returns 31
- If no one wins then it returns 0
The above screenshot is the issue as the rematch button does not re enable, why is that? In the above breakdown it states that if no one wins it it will return 0.
According to the check condition, it does not handle result = 0 because if the players are still playing the game, the incer function will still result 0 and if its a draw it will also return 0. Meaning that we cant add onto the incer function because returning 0 means that the players are still playing the game and I think its inefficient to loop through all the possibilities.
By adding a simple counter every time a tile is filled and adding it to the check function. If no one wins and the tieCounter == 9 meaning that the board is filled then it will return false/end the game.
Now if the game ends in a draw the game will disabling the board and enabling the rematch button
My approach for this issue went well as it gave me a through understanding on how this application works. I really like to work on projects that have an GUI and will show you results from simply changing the code. Just like this issue, it does not have to be front-end but I would definitely do an issue that affects the functionality of the front-end for future pull requests. Although I have created algorithms in different languages, this was a nice change of pace as I have never seen the logic for these types of games.
It was also nice to see the different coding styles and to follow the existing code. The variables were placed in a specific place with a let statement instead of a var
He also liked a specific format for his if statements on the location of the curly brackets.
Interacting with the community
While I was looking through the code, I had found an error in the code where it would not trigger a win in a specific case where if X would win on a diagonal starting from top right. I commented on the issue offering to fix the issue along with the above issue and he responded. A new issue was opened for the below problem and was fixed.
Pull Request — https://github.com/ron9817/tic_tac_toe-Game/pull/2