Tic Tac Toe

For this weekend we were assigned a Tic-Tac-Toe assignment as a test of our basic jQuery and DOM manipulation skills. I thought it was pretty fun, so I thought I’d make a little post with my initial solution (may make another post if I have an improved iteration. I’ll focus on how I implemented win detection.

Firstly, the grid was set up with 9 divs like so:

 <div class=”box” id=”1"></div>
<div class=”box” id=”2"></div>
<div class=”box” id=”3"></div>
<div class=”box” id=”4"></div>
<div class=”box” id=”5"></div>
<div class=”box” id=”6"></div>
<div class=”box” id=”7"></div>
<div class=”box” id=”8"></div>
<div class=”box” id=”9"></div>

In the CSS file the box class was given properties to format the size of the boxes and the text within them.

The meat of the work is in the JavaScript file. I’ll break down the 2 key functions for win detection:

function win(box1, box2, box3, symbol) { 
  if ( box1.text() + box2.text() + box3.text() 
=== symbol + symbol + symbol ) {
    $(‘#gamestage’).html( symbol + ‘ Player Wins!’ )
.css({‘color’: ‘orange’, ‘fontWeight’: ‘bold’});

board.off(‘click’);
    if ( symbol === ‘X’ ) { 
      box1.addClass(‘winsquaresx’); 
box2.addClass(‘winsquaresx’);
box3.addClass(‘winsquaresx’);
    } else { 
      box1.addClass(‘winsquareso’); 
box2.addClass(‘winsquareso’);
box3.addClass(‘winsquareso’);
    }; 
};
};
  • This win function takes 4 parameters: box1, box2, box3 and symbol.
  • The box parameters expect jQuery objects pointing to divs in the HTML page and the symbol is passed as a text character “X” or “O”.
  • The function adds together the text contained within the HTML of the 3 boxes into a 3 character string.
  • It then compares that string against a string of 3 symbols. If they are equal, e.g. if “XXX” === “XXX” then it will then display a win message by inserting some text into an element on the page.
  • In the if/else section it then adds some CSS to the winning squares by using a class with colour properties defined in the CSS file.

Note: ‘board’ is a variable containing every div within the ‘box’ class which elsewhere in the code is listening for clicks on those divs. As the game is over on a win, I turn off the click event across the board.

Now, this function needs to be called to check combinations. I do this here:

function checkWin() { 
win(box(‘1’), box(‘2’), box(‘3’), ‘X’);
win(box(‘4’), box(‘5’), box(‘6’), ‘X’);
win(box(‘7’), box(‘8’), box(‘9’), ‘X’);
win(box(‘1’), box(‘4’), box(‘7’), ‘X’);
win(box(‘2’), box(‘5’), box(‘8’), ‘X’);
win(box(‘3’), box(‘6’), box(‘9’), ‘X’);
win(box(‘1’), box(‘5’), box(‘9’), ‘X’);
win(box(‘3’), box(‘5’), box(‘7’), ‘X’);
win(box(‘1’), box(‘2’), box(‘3’), ‘O’);
win(box(‘4’), box(‘5’), box(‘6’), ‘O’);
win(box(‘7’), box(‘8’), box(‘9’), ‘O’);
win(box(‘1’), box(‘4’), box(‘7’), ‘O’);
win(box(‘2’), box(‘5’), box(‘8’), ‘O’);
win(box(‘3’), box(‘6’), box(‘9’), ‘O’);
win(box(‘1’), box(‘5’), box(‘9’), ‘O’);
win(box(‘3’), box(‘5’), box(‘7’), ‘O’);
};

I feel like this is in some need of re-factoring, but for now it works as follows:

  • I call the win function and pass it 4 arguments.
  • For the box arguments, I call another function ‘box’ which is defined elsewhere. It takes an id number and then formats it to match the JQuery object syntax, e.g. box(‘1’) will return $(‘#1’). I felt this improved code readability and made it easier for me to type (although I may change this).
  • Each line checks a winning combination by passing the 3 div numbers that would make either a horizontal, vertical or diagonal win. I do this for both the X’s and O’s.

Note: This function is run on every turn. That means every time a player clicks a div, after the div is populated with an X or an O, this function runs through all the winning combinations and sees if any have been met yet. If they haven’t, nothing happens and the document continues listening for click events.

The final product visually looks like below.

If you’d like to look over the code and check out more features such as the HTML/CSS and the functionality for click events, player turns and tied games, please check out my github repo. Thanks for reading!

https://github.com/Jamesmcgeachie/tictactoe