How to Code Tic Tac Toe Game in jQuery
by Vincy. Last modified on July 12th, 2022.
In this article, we are going to learn to code the Tic Tac Toe game using jQuery. I will present you a code and it will show a single player Tic Tac Toe game panel to the user.
In this game, the user will play with the computer. It is designed with the simple logic to make the player win easily against the computer. Similar to this article, in a previous tutorial, we have seen an example of creating bouncing ball animation using jQuery.
In this example, the game panel contains clickable boxes in 3×3 grid view. On clicking these boxes, it will be marked with the corresponding markers.
When the user selecting a box then the X-marker will be added and a random box will be chosen to add O-marker for the computer’s turn.
Below screenshot shows the Tic Tack Toe game panel with the X and O markers denoting the user and the computer game entries.
HTML Code for Tic Tac Toe Game Panel
This HTML code is used to show the 3×3 grid view as the Tic Tac Toe game panel. This grid contains 9 clickable boxes. On clicking these boxes, the jQuery function will be called to mark the users play and trigger computer’s play automatically.
<div class="tile-container">
<div class="tile" id="tile-1" data-position="1"></div>
<div class="tile" id="tile-2" data-position="2"></div>
<div class="tile" id="tile-3" data-position="3"></div>
<div class="tile" id="tile-4" data-position="4"></div>
<div class="tile" id="tile-5" data-position="5"></div>
<div class="tile" id="tile-6" data-position="6"></div>
<div class="tile" id="tile-7" data-position="7"></div>
<div class="tile" id="tile-8" data-position="8"></div>
<div class="tile" id="tile-9" data-position="9"></div>
</div>
jQuery Code to Mark the User and Computer Entry
The following jQuery script contains functions that are used to handle the click event of the users and to trigger the computer’s play. When the user selecting a box in the game panel, then the jQuery code will be executed to mark that box with X-marker.
Then, it will choose a random box from the game panel which is not clicked and marked already. This random box will be marked with the O-marker for the computer’s turn.
<script>
function computerTurn() {
var choose = $(".tile:not(.marked)");
randChoice = choose[Math.floor(Math.random() * choose.length)];
$(randChoice).addClass('marked');
$(randChoice).addClass('o-mark');
trackTicTac(randChoice, 'o-mark');
}
function trackTicTac(obj, mark) {
var winning_probability = [ [ 1, 2, 3 ], [ 1, 4, 7 ], [ 1, 5, 9 ],
[ 2, 5, 8 ], [ 3, 5, 7 ], [ 3, 6, 9 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ];
var markedPosition = $(obj).data("position");
$.each(winning_probability, function(key, winning_probability_index) {
if ($.inArray(markedPosition, winning_probability_index) >= 0) {
markedLength = 0;
$.each(winning_probability_index, function(index, value) {
var innerSquareClass = $("#tile-" + value).attr("class");
if (innerSquareClass.indexOf(mark) > 0) {
markedLength = markedLength + 1;
if (markedLength == winning_probability_index.length) {
finished = true;
if (mark == "x-mark") {
status = " You Win!";
} else {
status = " You Lost!";
}
alert("Game Over." + status);
}
}
});
}
});
return finished;
}
$(document).ready(function() {
finished = false;
$(".tile").on('click', function() {
if (!finished) {
var squareClass = $(this).attr("class");
if (squareClass.indexOf("marked") < 0) {
$(this).addClass('marked');
$(this).addClass('x-mark');
finished = trackTicTac(this, 'x-mark');
computerTurn();
}
}
});
});
</script>
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.