How to Code Tic Tac Toe Game in jQuery
by Vincy. Last modified on July 4th, 2023.
This article will teach us to code the Tic Tac Toe game using jQuery. I will present you a code showing the user a single-player Tic Tac Toe game panel.
In this game, the user will play with the computer. It is designed with 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 a 3×3 grid view. On clicking these boxes, it will be marked with the corresponding markers.
When the user selects a box, the X-marker will be added, and a random box will be chosen to add the O-marker for the computer’s turn.
The 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 shows the 3×3 grid view as the Tic Tac Toe game panel. This grid contains nine clickable boxes. On clicking these boxes, the jQuery function will mark the user’s play and trigger the 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 users’ click event and trigger the computer’s play. When the user selects a box in the game panel, the jQuery code will be executed to mark that box with an 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>
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
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.