Articles → jQuery → How to create tic-tac-toe in jQuery

How to create tic-tac-toe in jQuery






Software requirements









Technical knowledge











Steps Involved





















Step 1 - Create a html file




<!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




<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>




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



Step 3 - Add a section to display player’s turn




<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>





Step 4 - Create a Reset link




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




<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




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





Step 6 - Set a Turn for Players




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





Step 7 - Write code to change turns




$(“#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();
					}
				});




/*
                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");
}






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/FeedbackCharacters remaining 250