Tic-Tac-Toe Game Using Simple jQuery

This is a simple Tic-Tac-Toe game I created using very simple jQuery commands. In this tutorial, I’ll show you step by step how to easily design the board using some CSS, and then get the game and functions set up using some easy to understand jQuery commands. Within a couple minutes of reading this tutorial, you’ll soon be playing against people in your own tic-tac-toe game that you yourself created.

Step 1: The Board

Okay so first off, creating a tic-tac-toe board is very simple. Here is the HTML:

Here is the CSS that follows:

So this is how the final board should look like (excluding the green numbers, they’re just there to show you what boxes are what numbers. We assigned them all seperate classes in
the HTML).
You’re able to click in any of the boxes and type whatever you want now, no restrictions yet. Let’s add some now though using jQuery and make this into an actual
tic-tac-toe game that you can play!

Okay, so the steps of how we are going to about making this tic-tac-toe game is:

1) When the user enters a key from the keyboard it checks whether it was an ‘x’ or ‘o’, if not
an error appears in the button div and the letter is not added to the board.
2) If the letter entered was in fact an ‘x’ or ‘o’, then it adds it to the board.
3) Then the final step is to
basically write the javascript so that it can determine all the possible winning combinations on the board, and if there is a row or column with 3 x’s or o’s in a row,
then that player wins.

So this would be the first and second parts of the javascript where we check for the user entering a key, and then determine what letter they entered.

If Statement: So what we do here is we check if they value entered in this input box is an ‘x’ or an ‘o’. If it is then we set the letters color to a dark red, set a readonly attribute which will not
let the user change the contents of thix box space anymore, and finally we set the button’s div html content to nothing because let’s say the user doesnt enter an ‘x’ or ‘o’ at first
and an error shows up, after they DO enter an ‘x’ or ‘o’ in that space, we don’t want that error text in the button div staying up on the screen.

Else If Statement: Here we check for if the user did not enter an ‘x’ or ‘o’ in one of the input spaces. If they enter anyting other than those
two letters, in the button div we set the html contents to display some sort of error statement and then we delete what they entered in. (ie. If a user enters the letter ‘k’ in one of the
spaces, it will quickly be deleted off the screen before they are able to click anywhere else, and an error will appear towards the bottom telling the user to only enter an ‘x’
or an ‘o’.)

Now that we are able to make users enter only in x’s and o’s into the board, what do we do about all the winning possibilites? Since this game has only 8 possible
ways of winning, we can easily use jQuery to check for all of them. Before in the HTML we gave each of the boxes an id of ‘box’, but we gave all the boxes a class of their own
corresponding position on the board. Having a different class assigned to each box now will allow us to check for winners. Here is an example of checking for 3 in a row on the
withinthe keyup function).

In this If Statement, we check for if the value of box 1, box 2, and box 3 have x’s in them. This is why we assigned each box it’s own class before. Now we must write
something within this if statement to inform the users of who the winner is. This is what we put within that if statement.

Now there’s a couple of different things happening in there, let me explain them step by step. Once a user gets 3 x’s in the first row, in the button div we change the
text to display "X WINS! Congratulations". Then we change all 3 of the winning box background colors to a shade of green, as to make those three spaces stand out. Then we target
all of the inputs, and we add the attribute of ‘readonly’ which will not allow the user to click and change whatever is in any of the boxes. It wouldn’t be fair if one of the
users wins, and then someone is easily able to just click in any of the boxes and change what is in them. So now we have a tic-tac-toe game with only one winning possibility, but
we must add the other seven. Here are the codes for the second and third rows.

Here are the codes for the columns and the diagonals.

We now have a board with all the possible winning combinations for ‘x’ accounted for. What about the ‘o’s though? We must take all the codes for the rows, columns, and diagonals and

Step 3: Finishing Up

So now for a recap. We have constructed the board using HTML and CSS, we have used jQuery to check for a users input, and finally we have written out all 16 possible
winning combinations for both letters also in jQuery. There is just now one more thing to do, and that is add a small piece of code to allow the user to reset the board when
he or she clicks the ‘reset button’ at the bottom. Note that this code goes outside the keyup function.

Check out an example of this game here!

Have fun tic-tac-toeing!

Leave a Reply

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