Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Tic Tac Toe

Three-In-A-Row in Javascript!


Demo: Tic Tac Toe


Tic Tac Toe. The game you’ve learned to play since you were a kid. All you needed was to draw a 3 x 3 grid and take turns filling the grid with an X or an O. The winner of the game is the player who gets three-in-a-row first.

For this project, recreating a game of Tic Tac Toe was going to be interesting. I started off this project by hand drawing a rough wireframe of the game’s grid and mocking it up crudely in HTML and CSS.

 

 


Random note: I used to think that having fancy HTML and CSS was impressive. After a few years of writing code, I’ve come to realize having less HTML isn’t a bad thing! It’s what you do with your HTML that counts.


 

Game Functions

We all know that the objective of this game is to get “three-in-a-row.” While that’s simple enough, recreating the game in Javascript required building some key pieces to the game. The first was to have a clickable playing grid.

At first, I thought about just creating a bunch of div tags and creating event listeners for clicks on the div’s. Instead, I opted to use <a> tags and the .btn Bootstrap class to create clickable buttons. Once styled in CSS, the buttons would no longer appear as buttons, but just as little white squares that can be used for the game play. CSS wizardry/trickery I suppose.

The second thing I wanted to address was creating a “reset” or “start” point where all the game’s settings would begin. The nine spaces in the game would appear as blank spaces, which would later be occupied with X’s and O’s as a player engages with the game.

 

 

The var turns assigns the blank spaces in each of the grid spaces, a score count is set to zero for both the player and computer and track winning points for each. There are two reset functions built into this game; one to simply reset the game when the player wants start over and a second reset that would automatically trigger when the game comes to a tie. Without this second reset, the game would not advance forward and leave the game “stuck” or “frozen” in the same state.

By default, the user would be set to use X in game play, while the computer is assigned O, although it would’ve been just fine assigning each player no defined value.

I did, however, create a function that give the user the option to select either X or O before starting the game.

 

 

Game Play

The logic behind this game was simple. The player can select any blank space on the grid and place their X or O on there, while the computer’s algorithm is programmed to search for a blank space at random using Math.random() and checking to see if the space is occupied by an X or O.

 

 

I do digress that while the logic is simplified, I could have chosen to make the game harder by programming the computer to strategically check the best scenarios for making three in a row. The perfect game of Tic Tac Toe is usually one that almost always ends in a tie.

I guess this is why they have chickens in Vegas playing Tic Tac Toe against people for money prizes.

As the game progresses, there is a control flow set up to check for matching sequences. The sequences basically are predetermined “paths” that any X’s or O’s could take to make three in a row. This control flow is built into the function winCondition().

 

 

If any of those conditions are met, the game will stop and declare a winner. The game will cease to continue, a point is awarded to the winner and the game will reset (via reset2(), the second reset from above) and the next round will start.

 

UX Design

As I said earlier, the HTML skeleton of this game was pretty plain. There were endless ideas on how to best style and design the UI for optimum playing and user experience. For this project, I thought it would be fun to design and implement a bit of character into the game’s user experience.

The first thing I wanted to address was simplicity of starting the game.

By default, the game does not start until the player has selected X or O.  I didn’t want to add a “start” button, which felt out of touch with the paper and pencil version we’re used to seeing.

After the player selects their starting X or O, I added a display box in the game’s console. This display box is used to show different messages during game play, including who’s turn it is, when the computer is “thinking” and declaring a winner or a tie.

 

 

Yes, I said “computer is ‘thinking'”…

 

 

 

I thought it’d be clever to include a bit of code to simulate that the computer was “thinking” about its next move.

In actuality, computers process things so quickly, it never really takes longer than a few nanoseconds or milliseconds to return a result. To create this simulated “thinking”, I added some Javascript to use setTimeout based on randomly generated numbers. The timeout would be decremented in seconds and trigger after every move the player makes. Once the timeout is completed, the computer’s move would then be placed on the game’s grid and continue on to the player’s turn again.

Simulated “thinking”, get it?

 

 

I know lots of other Tic Tac Toe games just simply plop their computer’s move onto the screen right after a player makes a move. It always felt too “forced” or “preconceived” when in reality it’s not. The computer technically is “thinking” by checking for available places to make a move. This logic, while preprogrammed into the game, isn’t predetermined in anyway thus giving players a chance to win.