Fixing bugs in Tic-Tac-Toe game

Tic-Tac-Toe.

I am currently working on creating and putting functions together to solve a small ‘math’ problem. These have been exercise that are provided by online resources. Which brings me to my other project of creating a simple Tic-Tac-Toe game.

This game is still only using front end tools because we are only interacting with the browser and are not saving anything onto a server.

By creating the first version of my online portfolio and getting my first client has given me some practice on laying out items on a webpage and displaying information.  I have been using some basic Javascript, JQuery and HTML. I still have not used any CSS nor styling on the Tic-Tac-Toe.

Right now it looks plain, white and boring but this goes back to my practices of starting with the basics. (See previous post on Wireframing) Once I get the functionality up and running I will be adding the glam to the game.

The goal for this project of creating a simple Tic Tac Toe game is for me to practice connecting the HTML and the Javascript. I want to see how they interact with each other and along the way I have encountered some bugs which I will explain below.

So far I have created a function to determine the winner of the game.

 

function win(player){
// Test columns
for (let i = 0; i < 3; i++) {
     if (trs[0].children[i].className == player &&
trs[1].children[i].className == player &&
trs[2].children[i].className == player)
    return true
}
   return false
}
};

 

This is just a snip it of the code which checks the column, we also need one for the rows, and diagonals.

I am using a function for who’s turn it is called function whoPlays() and an on click Event. The onclick event will call the function win(). This will determine if the click event created a winner, woo-hoo! If not, then the table data will take in the X or O. A bit of JQuery is used on the click event, this makes it easier to set up the event handler.

So now that we have a general idea of what is going on lets explore where the bugs came up.
tic tac toe errors

 

Here is where the code executes properly but when you look at the game you can see a couple of the bugs once the game to determine a winner.

First bug: When the ‘restart’ button is clicked to start a new game, the previous winner is still displayed.

Second bug: When you click ‘refresh’ on the web browser. The Tic-tac-toe canvas is clear but the game does not tell you what player goes first.
2bug-after-winning

 

So let’s get rid of these two bugs.

Our goal is to remove who the previous winner is and to display what player goes first.

When we take a look at the code we see that the bug can be fixed by putting in who’s turn it is in the three places.
code-repetition-nono

 

Yes, this will work but as I am learning some of the best practices when you are writing code is to limit the amount of times you repeat your code. Reasons of why code repetition should be limited will be covered at a later time.

 

As we know, we can create a function to take care of this action which we are trying to get. I created a function called whoPlays(), this determines which player goes.
3function-for-whoplays

 

I am going to use this function and place it in other parts of the code to successfully call the function. It will be placed in three areas. The first one is below the if statement when we are seeing what player is currently playing. The second one is after the ‘restart’ event is executed and the third is at the end of the code. You can see where the functions where placed in the image below on line 28, 33 and 36.
4using-the-function

 

So that took care of those two bugs. When the game is either refreshed, restarted or a winner is determined we will know who’s turn it is.

 

BUT… we are going to look at one more thing before we go. One of my goals in the long run is to use things that I learn along the way in places that come up.

Somewhere in between reading lessons, googling and exploring Javascript I know that single if statements that are pretty simple can be re-written by using a ternary operator.

 

Repeat, ternary operator. For some reason I like those two words.

 

In the image below you will see a happy face next to the ternary operator and below that the if statement. They both do exactly the same thing. In this case the amount of code does not matter much since it is a simple application, but once many lines of code are accumulated I want to believe that we want to be efficient and make the code easy to read.ternary-operator

 

Another example in how we can reduce code that we can see here is with the function win(player).  The for loops can incorporate arrow functions and it can decrease it or make it easier to read. This is also just a personal preference.
screen-shot-2016-12-15-at-12-05-13-pm

Now for me reading one line of code is easier to the eye then the four ones here. Are there times where you go back and change your code to decrease the amount of lines?

 

Until the next learning adventure, lets stay in touch.

 

You Might Also Like