Articles → jQuery → How To Create Tic-Tac-Toe In Jquery

How To Create Tic-Tac-Toe In Jquery

In this tutorial I will explain how to create a tic-tac-toe in JQuery.

Software Requirements

Before you start reading this tutorial you should make sure that

Visual studio 2005 (or above) is installed on your machine.
Latest jQuery file i.e. jquery-latest.js (from the path http://code.jquery.com/jquery-latest.js) is downloaded on your system.

Technical Knowledge

In order to understand this tutorial you should know

Basics of HTML
Basics of JQuery
Basics of cascading style sheet

Steps Involved

In this tutorial we will follow these steps for implementation of tic-tac-toe in JQuery

Create a html file
Add a table in HTML file with 9 cells – 3 rows and 3 columns
Add a section to display player’s turn
Create a Reset link
Define the Players
Set a Turn for Players
Write code to change turns
Output

Step 1 - Create A Html File

First create a basic html file as shown below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title></title>
</head>
</body>

</html>

Step 2 - Add A Table In HTML File With 9 Cells – 3 Rows And 3 Columns

Add a table in HTML page which contains 9 cells i.e. 3 rows and 3 columns.

<table align="center" border="1" id="tblMain">
	<tr>
		<td id="col11" class="cellstyle">   </td>
		<td id="col12" class="cellstyle">   </td>
		<td id="col13" class="cellstyle">   </td>
	</tr>
	<tr>
		<td id="col21" class="cellstyle">   </td>
		<td id="col22" class="cellstyle">   </td>
		<td id="col23" class="cellstyle">   </td>
	</tr>
	<tr>
		<td id="col31" class="cellstyle">   </td>
		<td id="col32" class="cellstyle">   </td>
		<td id="col33" class="cellstyle">   </td>
	</tr>
</table>

Please note that we have given unique id to each cell so that it can be uniquely identified. We have also added class attribute in td. Now let’s define the class ‘cellstyle’

<style type="text/css">
.cellstyle {
	width: 100px;
	height: 100px;
}
</style>

Step 3 - Add A Section To Display Player’S Turn

It is important to indicate which player is using which sign. In the code shown below the value ‘O’ is hardcoded for player A and ‘X’ is hardcoded for player ‘B’. This section will never change.

<table align="center">
	<tr>
		<td> Player A - </td>
		<td> <span style='font-size: 50pt;'>O</span> </td>
	</tr>
	<tr>
		<td> Player B - </td>
		<td> <span style='font-size: 50pt;'>X</span> </td>
	</tr>
</table>
<br />
<div style="text-align: center;" id="divTurn"> </div>

The code shown above has a second section of div by the name of ‘divTurn’. This section is going to be dynamic and will display the player’s turn.

Step 4 - Create A Reset Link

It is important to have a reset link which will allow users to clear all the table cells or in other terms restart the game.

<a href="#" id="lnkReset">Reset</a>

So now the code will look something like this:

<a href="#" id="lnkReset">Reset</a>
<br />
<table align="center">
	<tr>
		<td> Player A - </td>
		<td> <span style='font-size: 50pt;'>O</span> </td>
	</tr>
	<tr>
		<td> Player B - </td>
		<td> <span style='font-size: 50pt;'>X</span> </td>
	</tr>
</table>
<br />
<div style="text-align: center;" id="divTurn"> </div>
<br />
<table align="center" border="1" id="tblMain">
	<tr>
		<td id="col11" class="cellstyle">   </td>
		<td id="col12" class="cellstyle">   </td>
		<td id="col13" class="cellstyle">   </td>
	</tr>
	<tr>
		<td id="col21" class="cellstyle">   </td>
		<td id="col22" class="cellstyle">   </td>
		<td id="col23" class="cellstyle">   </td>
	</tr>
	<tr>
		<td id="col31" class="cellstyle">   </td>
		<td id="col32" class="cellstyle">   </td>
		<td id="col33" class="cellstyle">   </td>
	</tr>
</table>

Step 5 - Define The Players

Now we will add jQuery methods to define the players.

var m_player_turn = 'A';
var m_winner = '';

Here we have defined two variables. The first variable ‘m_player_turn’ is for storing player’s turn (we have hard coded the default value to A) and second variable i.e. ‘m_winner’ is required for storing the name of the winner.

Step 6 - Set A Turn For Players

We will now add a ready method as shown below

$(document).ready(function() {
	$("#divTurn").html(m_player_turn + " turn");
});

Once the players are ready to play, it is important to set the turn. Here we are setting the turn for ‘m_player_turn’(which is set to ‘A’) . It means player ‘A’ will start the game.

Step 7 - Write Code To Change Turns

Now it is time that we define the event which will be invoked when user click on table’s cell. ‘O’ or ‘X’ will be added in the cell on click depending on which player is on turn. In the code below if ‘A’ clicks on the cell ‘O’ will be displayed or else ‘X’ will be displayed.

$(“#tblMain”).find(“td”).click(function() {
			if($(this).html().indexOf(“ < img”) == -1) {
				if(m_player_turn == ‘A’) {
					$(this).append(“ < span style = ’font - size: 50 pt; text - align: center;’ > O < /span>”);
					} else {
						$(this).append(“ < span style = ’font - size: 50 pt; text - align: center;’ > X < /span>”);
						}
						ChangeTurn();
					}
				});

We will now define the reset event. It is important that all cells are reset when any of the players clicks on the ‘reset’ link.

/*
                Reset link click event
                */
$("#lnkReset").click(function() {
	if(confirm("Are you sure you want to reset the game")) {
		Reset();
	}
});

function Reset() {
	$("#tblMain").find("td#col11").html(" ");
	$("#tblMain").find("td#col12").html(" ");
	$("#tblMain").find("td#col13").html(" ");
	$("#tblMain").find("td#col21").html(" ");
	$("#tblMain").find("td#col22").html(" ");
	$("#tblMain").find("td#col23").html(" ");
	$("#tblMain").find("td#col31").html(" ");
	$("#tblMain").find("td#col32").html(" ");
	$("#tblMain").find("td#col33").html(" ");
	m_player_turn = 'A'
	$("#divTurn").html(m_player_turn + " turn");
}

Once a player clicks on the ‘Reset’ link a message will be displayed to confirm if the game should be reset or not. Upon confirmation the Reset() function will be called. In step 2 we had given a unique id to each cell so in the Reset() function every cell will be searched by its id and the value will be reset. The player ‘A’ will get the turn to play.

Now we will define the ChangeTurn() function. This function will check if the game is over or not. If the game is not completed then it will allow players to take turn one by one. If the game has completed then it will declare the winner and reset the game.The code below also define all possible conditions for which the game will be considered completed and it also defines who is supposed to be the winner in each case.

function ChangeTurn() {
	if(CheckGameCompletion() == false) {
		if(m_player_turn == 'A') m_player_turn = 'B';
		else m_player_turn = 'A';
		$("#divTurn").html(m_player_turn + " turn");
	} else {
		if(m_winner == "O") alert("Game Completed. Player A wins");
		else alert("Game Completed. Player B wins");
		Reset();
	}
}

function CheckGameCompletion() {
	var isGameComplete = false;
	var c11alt = $("#tblMain").find("td#col11").find("span").html();
	var c12alt = $("#tblMain").find("td#col12").find("span").html();
	var c13alt = $("#tblMain").find("td#col13").find("span").html();
	var c21alt = $("#tblMain").find("td#col21").find("span").html();
	var c22alt = $("#tblMain").find("td#col22").find("span").html();
	var c23alt = $("#tblMain").find("td#col23").find("span").html();
	var c31alt = $("#tblMain").find("td#col31").find("span").html();
	var c32alt = $("#tblMain").find("td#col32").find("span").html();
	var c33alt = $("#tblMain").find("td#col33").find("span").html();
	if(c11alt != undefined && c12alt != undefined && c13alt != undefined) {
		if(c11alt == c12alt && c12alt == c13alt) {
			isGameComplete = true;
			m_winner = c11alt;
		}
	}
	if(c21alt != undefined && c22alt != undefined && c23alt != undefined) {
		if(c21alt == c22alt && c22alt == c23alt) {
			isGameComplete = true;
			m_winner = c21alt;
		}
	}
	if(c31alt != undefined && c32alt != undefined && c33alt != undefined) {
		if(c31alt == c32alt && c32alt == c33alt) {
			isGameComplete = true;
			m_winner = c31alt;
		}
	}
	if(c11alt != undefined && c21alt != undefined && c31alt != undefined) {
		if(c11alt == c21alt && c31alt == c21alt) {
			isGameComplete = true;
			m_winner = c11alt;
		}
	}
	if(c12alt != undefined && c22alt != undefined && c32alt != undefined) {
		if(c12alt == c22alt && c32alt == c22alt) {
			isGameComplete = true;
			m_winner = c12alt;
		}
	}
	if(c13alt != undefined && c23alt != undefined && c33alt != undefined) {
		if(c13alt == c23alt && c33alt == c23alt) {
			isGameComplete = true;
			m_winner = c13alt;
		}
	}
	if(c11alt != undefined && c22alt != undefined && c33alt != undefined) {
		if(c11alt == c22alt && c33alt == c22alt) {
			isGameComplete = true;
			m_winner = c11alt;
		}
	}
	if(c13alt != undefined && c22alt != undefined && c31alt != undefined) {
		if(c13alt == c22alt && c31alt == c22alt) {
			isGameComplete = true;
			m_winner = c13alt;
		}
	}
	return isGameComplete;
}

Step 8 - Output

Picture showing the output of tic-tac-toe in jquery

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Thursday, July 17, 2014

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**