Teach your app to beat you at Tic-Tac-Toe

July 22, 2017
July 22, 2017 natrivera

As part of the Front-End Development curriculum for FreeCodeCamp.com I was required to build a Tic-Tac-Toe web app. I worked and worked on it adding responsive web design and a simple user experience. Using the common languages that are taught in the course HTML, CSS, Boorstrap, javaScript, and JQuery, I built a functioning app. Recently, I was proudly displaying my work, but got the feedback that the app was too easy to beat and I realized I never incorporated any A.I. to the code. Logic!!! Seriously, my favorite part of putting together any app. I was determined to find a solution to this flaw in my app and I came up with a working system.


Note: While putting together this post, I found the minimax algorithm. This solution to the tic-tac-toe app is not an explanation of it, it is my logic. A result of the light bulb going off in my head. 🙂


The main idea here is to use the grid system that comes with bootstrap to put together a set of boxes to serve as your nine position board.


In order to later access each of the boxes in the grid, I gave each spot their corresponding position as the “ID” name, allowing me to use JQuery to get the element id an parse out the the numbers for use with later logic.

00 , 01 , 02
10 , 11 , 12
20 , 21 , 22



When a user clicks a location on the board, they are choosing that location as their move. Then, it is up to my logic to work its magic.

A two dimensional array with the value of five in all locations is initialized when the game starts. Anytime a location is chosen, the corresponding array location is updated with a boolean value, True or False.


Here, the script checks if the user’s move was a win. This is done after every move, user and pc. If, the move is not a win, the pc chooses its next move.

Next, the logic scores all combinations and stores the results in an array. In Tic-Tac-Toe, there are eight sub arrays that are possible wins, three horizontal lines, three vertical lines, and two diagonals.

Score = 15    sub-array has combination of        5 , 5 , 5

Score = 10    sub-array has combination of        5 , 5 , False

Score =      sub-array has combination of        5 , False , False

Score = 11    sub-array has combination of        5 , 5 , True

Score = 7      sub-array has combination of        5 , True , True

Score = 6      sub-array has combination of        5 , True , false


Teach your app to beat you at Tic-Tac-Toe

The numbers to look for for are five and seven because they represent sub-arrays that are one play away from a win. The logic loops through an array that has the scores called arrsums. If the array has a score of five or seven, the pc plays the location that has the open spot, or the location with the value of five. The logic also checks if the play is a win for itself and that play is obviously given preference.

Again, this is not using the MIniMax algorithm. I’ll try to build the next version using that algorithm. Also, I am always open to suggestions.

Play my finished product here:


check out the code here:

See the Pen Tic Tac Toe Copy by Nat Rivera (@natrivera) on CodePen.

, , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's get in touch.

Reach me at Nat@NatRivera.com
Or simply fill out this form.