In this post, we are going to implement 2-player tic-tac-toe using jQuery. It is quite easy to develop with some simple validations and error checks. Player-1 starts playing the game and both the players make their moves in consecutive turns. The player who makes a straight 3-block chain wins the game. Here, we’ll be implementing this game on the front-end using simple logic and validation checks only.
Prerequisites: Basic knowledge of some front-end technologies like HTML, CSS, jQuery and Bootstrap.
Developing the layout: First of all, we will develop 3 * 3 grid layout and apply some CSS effects on the same. It should also show a text showing the turn of the player. It should also contain a button to reset the game whenever needed.
HTML Code:
html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<script src=
</script>
<link rel="stylesheet"
href=
<script src=
</script>
<link rel="stylesheet"
href=
integrity=
"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<!-- Heading -->
<div class="container-fluid text-center">
<h1 style="color: white;">TIC-TAC-TOE</h1>
</div>
<br>
<br>
<div class="container-fluid text-center">
<!-- Inform area for player's turn -->
<h4 id="screen" style="color: white;">
PLAYER 1 TURN FOLLOWS
</h4>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4"> </div>
<div class="col-lg-4">
<!-- Playing Canvas -->
<center>
<table>
<tr>
<td colspan="3">
</tr>
<tr>
<td>
<button class="sq1 r"></button>
</td>
<td>
<button class="sq2 r"></button>
</td>
<td>
<button class="sq3 r"></button>
</td>
</tr>
<tr>
<td>
<button class="sq4 r"></button>
</td>
<td>
<button class="sq5 r"></button>
</td>
<td>
<button class="sq6 r"></button>
</td>
</tr>
<tr>
<td>
<button class="sq7 r"></button>
</td>
<td>
<button class="sq8 r"></button>
</td>
<td>
<button class="sq9 r"></button>
</td>
</tr>
</table>
<br>
<br>
<!-- Reset button for Game -->
<input type="button" class="reset btn btn-lg
btn-danger btn-block"
value="RESET"
onClick="reset()" />
</center>
</div>
<div class="col-lg-4"> </div>
</div>
</div>
</body>
</html>
|
CSS Code:
CSS
<!-- Applying CSS Properties --> <style> body {
background-color: #000000;
}
button {
height: 80px;
width: 80px;
background-color: white;
border: 0px transparent;
border-radius: 50%;
margin: 4px;
padding: 4px;
}
.fa {
font-size: 48px;
color: black;
}
.reset {
padding: 8px;
}
.reset:hover {
opacity: 0.8;
}
</style> |
Output:
Implementing Logic: Now, we need to implement the following steps in our main code for mimicking the logic of a tic-tac-toe game.
Consecutive player turns: The consecutive turns will follow after the first player plays his move. Also, the text notifying the player’s turn should also be updated accordingly.
JavaScript
// Consecutive player Turns// Flag variable for checking Turn// We'll be modifying our base logic in the// next steps as per requirements let turn = 1;$("button").click(function () {
if (turn == 1) {
$("#screen").text("PLAYER 2 TURN FOLLOWS");
// Check sign font from font-awesome
$(this).addClass("fa fa-check");
turn = 2;
}
else {
$("#screen").text("PLAYER 1 TURN FOLLOWS");
// Cross sign font from font-awesome
$(this).addClass("fa fa-times");
turn = 1;
}
}); |
- Mark/Notify invalid moves: Also, we need to ensure that the player on the turn should not play any invalid move. For this, we will check if the clicked button is not already used by other font class in the process. If it is already marked by a font, mark the move invalid for a short interval.
JavaScript
// Script for checking any invalid moves$("button").click(function () {
if ($(this).hasClass("fa fa-times") ||
$(this).hasClass("fa fa-check")) {
$(this).css("background-color", "red");
setTimeout(() => {
$(this).css("background-color", "white");
}, 800);
}
}); |
- Check for winning moves: We will develop a function that will check whether the player has completed the grid or not. For this, we need to check for 8 winning configurations of the player. We will send the font class to the function for checking the same.
JavaScript
// Function to check the winning movefunction check(symbol) {
if ($(".sq1").hasClass(symbol) &&
$(".sq2").hasClass(symbol) &&
$(".sq3").hasClass(symbol)) {
$(".sq1").css("color", "green");
$(".sq2").css("color", "green");
$(".sq3").css("color", "green");
return true;
} else if ($(".sq4").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq6").hasClass(symbol)) {
$(".sq4").css("color", "green");
$(".sq5").css("color", "green");
$(".sq6").css("color", "green");
return true;
} else if ($(".sq7").hasClass(symbol)
&& $(".sq8").hasClass(symbol)
&& $(".sq9").hasClass(symbol)) {
$(".sq7").css("color", "green");
$(".sq8").css("color", "green");
$(".sq9").css("color", "green");
return true;
} else if ($(".sq1").hasClass(symbol)
&& $(".sq4").hasClass(symbol)
&& $(".sq7").hasClass(symbol)) {
$(".sq1").css("color", "green");
$(".sq4").css("color", "green");
$(".sq7").css("color", "green");
return true;
} else if ($(".sq2").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq8").hasClass(symbol)) {
$(".sq2").css("color", "green");
$(".sq5").css("color", "green");
$(".sq8").css("color", "green");
return true;
} else if ($(".sq3").hasClass(symbol)
&& $(".sq6").hasClass(symbol)
&& $(".sq9").hasClass(symbol)) {
$(".sq3").css("color", "green");
$(".sq6").css("color", "green");
$(".sq9").css("color", "green");
return true;
} else if ($(".sq1").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq9").hasClass(symbol)) {
$(".sq1").css("color", "green");
$(".sq5").css("color", "green");
$(".sq9").css("color", "green");
return true;
} else if ($(".sq3").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq7").hasClass(symbol)) {
$(".sq3").css("color", "green");
$(".sq5").css("color", "green");
$(".sq7").css("color", "green");
return true;
} else {
return false;
}
} |
- Resetting the game: Clicking on this button will reset the game.
JavaScript
// Resetting the gamefunction reset() {
$("#screen").text("PLAYER 1 TURN FOLLOWS");
$("#screen").css("background-color", "transparent");
$(".r").removeClass("fa fa-check");
$(".r").removeClass("fa fa-times");
turn = 1;
// Reset Colors
$(".sq1").css("color", "black");
$(".sq2").css("color", "black");
$(".sq3").css("color", "black");
$(".sq4").css("color", "black");
$(".sq5").css("color", "black");
$(".sq6").css("color", "black");
$(".sq7").css("color", "black");
$(".sq8").css("color", "black");
$(".sq9").css("color", "black");
} |
Output: Combining all the codes written above then it will be a complete tic-tac-toe game.