Home / Web / Tic Tac Toe Game In JavaScript
js_game

Tic Tac Toe Game In JavaScript

In this post we are discussing about Tic Tac Toe Game using  Javascript . The game is build with Simple Logic & Javascript Implementation. Complete code available for download.

<!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>
<link href=”TicTacToe.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery-1.9.1.min.js” type=”text/javascript”></script>
<script  type=”text/javascript”>

 

$(document).ready(function () {
var columns = 3;
var rows = 3;

for (var rowIterateIndex = 1; rowIterateIndex <= rows; rowIterateIndex++) {
for (var columnIterateIndex = 1; columnIterateIndex <= columns; columnIterateIndex++) {
var div = ‘<div class=”imageDivElement” location=”‘ + rowIterateIndex + ” + columnIterateIndex + ‘”></div>’;
$(“#gameAreaDiv”).append(div);
}
for (var count = 0; count < 5; count++) {
var br = ‘<br/>’;
$(“#gameAreaDiv”).append(br);
}
}
var userTurn = 1;
$(“.imageDivElement”).click(function () {
if ($(this).css(‘background-image’) != ‘none’) {
//alert(“Img already present”);
}
else {
if (userTurn % 2 == 1) {
userTurn = userTurn + 1;
$(this).css({ ‘background-image’: ‘url(Images/x.png)’ });
if (userTurn > 4) {
if (checkWinner()) {
showPopUp(‘x’);
};
}
}
else {
$(this).css({ ‘background-image’: ‘url(Images/o.png)’ });
userTurn = userTurn + 1;
if (userTurn > 4) {
if (checkWinner()) {
showPopUp(‘o’);
}
}
}
}
if (userTurn > 9) {
showPopUp(‘tie’);
}
});
function showPopUp(user) {
var div = document.getElementById(‘popup’);
div.style.display = “block”;
var span = document.getElementById(‘meassageSpan’);
if (user == ‘x’) {
$(‘.WinnerUserDiv’).css({ ‘background-image’: ‘url(Images/x.png)’ });
//span.innerHTML = ‘<strong>X has won!!<strong>’;
} else if (user == ‘o’) {
$(‘.WinnerUserDiv’).css({ ‘background-image’: ‘url(Images/o.png)’ });
//span.innerHTML = ‘<strong>O has won!!<strong>’;
}
else if (user == ‘tie’) {
span.innerHTML = ‘<strong>Game Tie!! Play Again..<strong>’;
}
var body = document.body;
body.className = ‘modalBackground’;
$(‘.imageDivElement’).unbind(‘click’);
}

function HidePopUp() {
document.getElementById(‘popup’).style.display = “none”;
var body = document.body;
body.className = ”;
}
$(“#inputTxtBox”).keyup(function AddImages() {
var inputText = $(“#inputTxtBox”).val();
var divArray = $(‘.imageDivElement’);
var img = “<img src=” + “../Images/” + inputText[inputText.length – 1] + “.png” + “/>”;
$(divArray[inputText.length – 1]).append(img);
});
function checkWinner() {
if (checkingRowsForWinner()) { return true; }
if (checkingColumnsForWinner()) { return true; }
if (checkingDiagonalsForWinner()) { return true; }
return false;
}
function checkingRowsForWinner() {
for (var startingDivRowIndex = 1; startingDivRowIndex <= rows; startingDivRowIndex++) {
var imageOfFirstColumn = $(‘.imageDivElement[location=’ + (startingDivRowIndex * 10 + 1) + ‘]’).css(‘background-image’);
var imageOfSecondColumn = $(‘.imageDivElement[location=’ + (startingDivRowIndex * 10 + 2) + ‘]’).css(‘background-image’);
var imageOfThirdColumn = $(‘.imageDivElement[location=’ + (startingDivRowIndex * 10 + 3) + ‘]’).css(‘background-image’);
if ((imageOfFirstColumn != ‘none’) && (imageOfSecondColumn != ‘none’) && (imageOfThirdColumn != ‘none’)) {
if ((imageOfFirstColumn == imageOfSecondColumn) && (imageOfSecondColumn == imageOfThirdColumn)) {
return true;
}
}
}
}
function checkingColumnsForWinner() {
for (var startingDivColumnIndex = 1; startingDivColumnIndex <= rows; startingDivColumnIndex++) {
var imageOfFirstRow = $(‘.imageDivElement[location=’ + (startingDivColumnIndex + 10 * 1) + ‘]’).css(‘background-image’);
var imageOfSecondRow = $(‘.imageDivElement[location=’ + (startingDivColumnIndex + 10 * 2) + ‘]’).css(‘background-image’);
var imageOfThirdRow = $(‘.imageDivElement[location=’ + (startingDivColumnIndex + 10 * 3) + ‘]’).css(‘background-image’);
if ((imageOfFirstRow != ‘none’) && (imageOfSecondRow != ‘none’) && (imageOfThirdRow != ‘none’)) {
if ((imageOfFirstRow == imageOfSecondRow) && (imageOfSecondRow == imageOfThirdRow)) {
return true;
}
}
}
}
function checkingDiagonalsForWinner() {
var imageAt11Location = $(‘.imageDivElement[location=’ + 11 + ‘]’).css(‘background-image’);
var imageAt22Location = $(‘.imageDivElement[location=’ + 22 + ‘]’).css(‘background-image’);
var imageAt33Location = $(‘.imageDivElement[location=’ + 33 + ‘]’).css(‘background-image’);
var imageAt31Location = $(‘.imageDivElement[location=’ + 31 + ‘]’).css(‘background-image’);
var imageAt13Location = $(‘.imageDivElement[location=’ + 13 + ‘]’).css(‘background-image’);
if ((imageAt11Location != ‘none’) && (imageAt22Location != ‘none’) && (imageAt33Location != ‘none’)) {
if ((imageAt11Location == imageAt22Location) && (imageAt22Location == imageAt33Location)) {
return true;
}
}
if ((imageAt31Location != ‘none’) && (imageAt22Location != ‘none’) && (imageAt13Location != ‘none’)) {
if ((imageAt31Location == imageAt22Location) && (imageAt22Location == imageAt13Location)) {
return true;
}
}
}
$(‘button[name=startOverButton]’).click(function () {
location.reload();
});
$(‘button[name=btnclose]’).click(function () {
window.close();
});
});

</script>
</head>
<body class=’initialBackground’ >
<div id=”gameAreaDiv” class=’gameAreaDiv’>

</div>
<div id=”popup” class=”modalPopup”>
<div class=”popupHeader”>
<div style=”width: 226px; float: left;”
align=”center”>
<strong>Game Over!!!!</strong>
</div>
<div style=”float: right; text-align: center;”>
<button id=”popupImagebtn” name=’btnclose’>
</button>
</div>
</div>
<div style=”height: 129px; margin: 0px auto; width: 249px; clear: both”>
<div align=”center” style=”height: 100px;”>

<span id=”meassageSpan”></span>
<div id=”winnerUserDiv” class=”WinnerUserDiv”></div>
</div>
<div style=”” align=”center”>
<button style=”” id=’startOverButton’ name=’startOverButton’ class=”startOverButton”>
<strong>Restart!!!</strong>
</button>
</div>
</div>
</div>
</body>
</html>

 

Download Complete Game Source Code:

Click To Download

About Helpservices

About This site (allhelpservices.com) is dedicated to helping other bloggers learn the skills of blogging, wordpress, education, technology, social media sharing , SEO, Electronics, Earn Money From Blogging, Web hosting and web share their own experiences and promote the blogging medium. We started Allhelpservices in August 2015 mainly because we wanted to keep a record of what we wear learning from development and because we wanted to connect with other learners.

Check Also

style sheet

What are ways of inserting a style sheet?

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps ...

Leave a Reply