Contribution #2 for Hacktoberfest

Ryan Wilson
Oct 10 · 5 min read

This week I have contributed my second pull request for Hacktoberfest. This pull request was for a Tic-Tac-Toe game by ron9817 and the issue was to fix a bug with the rematch button not revealing itself. Unlike my first pull request, the installation of the project was easy as it was a Javascript game but overall adding to the code was more complex. I picked this repository because it really stood out because I always wanted to learn the logic for a tile based game and it turned out that it contains a lot of different math statements. At first I was not planning to blog about this contribution because it was for fun, but it was definitely good practice when it came to adding onto existing code and I wanted to share my experience.

Tic-Tac-Toe

http://ronkar.pythonanywhere.com/xn0

This Tic-Tac-Toe game is a Javascript game using HTML as its front end. This website does not use any frameworks except Jquery which made it easy to install, but overall was an increase in difficulty when it came to changing the code. It was good to see different coding styles and since this was a project run by 1 person, there was no comments left for other contributors.

Preparation

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.

Main function

At first this main function looks simple, the steps I observed.

  1. If the game area is clicked then it will put an X or 0 depending if its the players turn
  2. It then stores the results using the incer function and then checks this result using the check function.
  3. If the check returns false then it will disable the gameArea and enable the restart button
Check condition

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.

incer function

This function took the longest to figure out as at first glance I had no idea what it was doing.

  1. Parameters: i = $(this).data(“i”), j = $(this.data(“j”), t = 1 or -1
  2. If it is 3 in a row horizontal then it will return 11 or -9
  3. if it is 3 in a row vertical then it will return 21 or 19
  4. diag is an array (diag[0,0])
  5. 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
  6. If no one wins then it returns 0

The issue

issue

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.

Check condition

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.

Solution

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

Learning Experience

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.

https://github.com/ron9817/tic_tac_toe-Game/issues/3

Links

Project- https://github.com/ron9817/tic_tac_toe-Game

Issue - https://github.com/ron9817/tic_tac_toe-Game/issues/1

Pull Request — https://github.com/ron9817/tic_tac_toe-Game/pull/2

Ryan Wilson

Written by

Hi my name is Ryan Wilson and these blogs are for a course called OSD600

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade