Articles → jQuery → How to create tic-tac-toe in jQuery

How to create tic-tac-toe in jQuery






Software requirements









Technical knowledge











Steps Involved





















Step 1 - Create a html file




<!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>
</head>
</body>
</html>



Step 2 - Add a table in HTML file with 9 cells

– 3 rows and 3 columns




<table align="center" border="1" id="tblMain">
        <tr>
            <td id="col11" class="cellstyle">
                 
            </td>
            <td id="col12" class="cellstyle">
                 
            </td>
            <td id="col13" class="cellstyle">
                 
            </td>
        </tr>
        <tr>
            <td id="col21" class="cellstyle">
                 
            </td>
            <td id="col22" class="cellstyle">
                 
            </td>
            <td id="col23" class="cellstyle">
                 
            </td>
        </tr>
        <tr>
            <td id="col31" class="cellstyle">
                 
            </td>
            <td id="col32" class="cellstyle">
                 
            </td>
            <td id="col33" class="cellstyle">
                 
            </td>
        </tr>
</table>




<style type="text/css">
        .cellstyle
        {
            width: 100px;
            height: 100px;
        }
</style>



Step 3 - Add a section to display player’s turn




<table align="center">
        <tr>
            <td>
                Player A -
            </td>
            <td>
                <span style='font-size: 50pt;'>O</span>
            </td>
        </tr>
        <tr>
            <td>
                Player B -
            </td>
            <td>
                <span style='font-size: 50pt;'>X</span>
            </td>
        </tr>
</table>
<br />
<div style="text-align: center;" id="divTurn">
</div>





Step 4 - Create a Reset link




<a href="#" id="lnkReset">Reset</a>




<a href="#" id="lnkReset">Reset</a>
    <br />
    <table align="center">
        <tr>
            <td>
                Player A -
            </td>
            <td>
                <span style='font-size: 50pt;'>O</span>
            </td>
        </tr>
        <tr>
            <td>
                Player B -
            </td>
            <td>
                <span style='font-size: 50pt;'>X</span>
            </td>
        </tr>
    </table>
    <br />
    <div style="text-align: center;" id="divTurn">
    </div>
    <br />
    <table align="center" border="1" id="tblMain">
        <tr>
            <td id="col11" class="cellstyle">
                 
            </td>
            <td id="col12" class="cellstyle">
                 
            </td>
            <td id="col13" class="cellstyle">
                 
            </td>
        </tr>
        <tr>
            <td id="col21" class="cellstyle">
                 
            </td>
            <td id="col22" class="cellstyle">
                 
            </td>
            <td id="col23" class="cellstyle">
                 
            </td>
        </tr>
        <tr>
            <td id="col31" class="cellstyle">
                 
            </td>
            <td id="col32" class="cellstyle">
                 
            </td>
            <td id="col33" class="cellstyle">
                 
            </td>
        </tr>
</table>



Step 5 - Define the Players




var m_player_turn = 'A';
var m_winner = '';





Step 6 - Set a Turn for Players




$(document).ready(
function () {
                $("#divTurn").html(m_player_turn + " turn");
});





Step 7 - Write code to change turns




$(“#tblMain”).find(“td”).click(
function () {
if ($(this).html().indexOf(“<img”) == -1) {
if (m_player_turn == ‘A’) {
                            $(this).append(“<span style=’font-size:50pt;text-align:center;’>O</span>”);
                        }
else {
                            $(this).append(“<span style=’font-size:50pt;text-align:center;’>X</span>”);
                        }                       
                        ChangeTurn();
                    }
                }
);




/*
                Reset link click event
                */
                $("#lnkReset").click(
                    function () {
                        if (confirm("Are you sure you want to reset the game")) {
                            Reset();
                        }
                    });

function Reset() {
            $("#tblMain").find("td#col11").html(" ");
            $("#tblMain").find("td#col12").html(" ");
            $("#tblMain").find("td#col13").html(" ");
            $("#tblMain").find("td#col21").html(" ");
            $("#tblMain").find("td#col22").html(" ");
            $("#tblMain").find("td#col23").html(" ");
            $("#tblMain").find("td#col31").html(" ");
            $("#tblMain").find("td#col32").html(" ");
            $("#tblMain").find("td#col33").html(" ");

            m_player_turn = 'A'
            $("#divTurn").html(m_player_turn + " turn");
}






function ChangeTurn() {
            if (CheckGameCompletion() == false) {
                if (m_player_turn == 'A')
                    m_player_turn = 'B';
                else
                    m_player_turn = 'A';

                $("#divTurn").html(m_player_turn + " turn");
            }
            else {
                if (m_winner == "O")
                    alert("Game Completed. Player A wins");
                else
                    alert("Game Completed. Player B wins");

                Reset();
            }
        }

function CheckGameCompletion() {
            var isGameComplete = false;
            var c11alt = $("#tblMain").find("td#col11").find("span").html();
            var c12alt = $("#tblMain").find("td#col12").find("span").html();
            var c13alt = $("#tblMain").find("td#col13").find("span").html();
            var c21alt = $("#tblMain").find("td#col21").find("span").html();
            var c22alt = $("#tblMain").find("td#col22").find("span").html();
            var c23alt = $("#tblMain").find("td#col23").find("span").html();
            var c31alt = $("#tblMain").find("td#col31").find("span").html();
            var c32alt = $("#tblMain").find("td#col32").find("span").html();
            var c33alt = $("#tblMain").find("td#col33").find("span").html();

            if (c11alt != undefined && c12alt != undefined && c13alt != undefined) {
                if (c11alt == c12alt && c12alt == c13alt) {
                    isGameComplete = true;
                    m_winner = c11alt;
                }
            }

            if (c21alt != undefined && c22alt != undefined && c23alt != undefined) {
                if (c21alt == c22alt && c22alt == c23alt) {
                    isGameComplete = true;
                    m_winner = c21alt;
                }
            }

            if (c31alt != undefined && c32alt != undefined && c33alt != undefined) {
                if (c31alt == c32alt && c32alt == c33alt) {
                    isGameComplete = true;
                    m_winner = c31alt;
                }
            }

            if (c11alt != undefined && c21alt != undefined && c31alt != undefined) {
                if (c11alt == c21alt && c31alt == c21alt) {
                    isGameComplete = true;
                    m_winner = c11alt;
                }
            }

            if (c12alt != undefined && c22alt != undefined && c32alt != undefined) {
                if (c12alt == c22alt && c32alt == c22alt) {
                    isGameComplete = true;
                    m_winner = c12alt;
                }
            }

            if (c13alt != undefined && c23alt != undefined && c33alt != undefined) {
                if (c13alt == c23alt && c33alt == c23alt) {
                    isGameComplete = true;
                    m_winner = c13alt;
                }
            }

            if (c11alt != undefined && c22alt != undefined && c33alt != undefined) {
                if (c11alt == c22alt && c33alt == c22alt) {
                    isGameComplete = true;
                    m_winner = c11alt;
                }
            }

            if (c13alt != undefined && c22alt != undefined && c31alt != undefined) {
                if (c13alt == c22alt && c31alt == c22alt) {
                    isGameComplete = true;
                    m_winner = c13alt;
                }
            }


            return isGameComplete;
}



Step 8 - Output



Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Thursday, July 17, 2014

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250