Create a Tic-Tac-Toe Game using jQuery - GeeksforGeeks

16 Nov, 2021
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 logics 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="https://code.jquery.com/jquery-3.4.1.slim.min.js">    </script>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">    </script>    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"          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 for 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 --><script> // Flag variable for checking Turn// We'll be modifying our base logic in the// next steps as per requirements   var 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;    }});</script>
 
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 move -->function 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 game -->function 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.  
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
simmytarika5
CSS-Misc
HTML-Misc
jQuery-Misc
Bootstrap
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to change the background color of the active nav-item?
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)