Tic Tac Toe Game

CSS

<style type="text/css">

        input

        {

            width: 50px;

            height: 50px;

        }

        .winner

        {

            background-color: #FF69B4;

        }

</style>

HTML

<table width="150px">

            <tr>

                <td>

                    <input type="button" id="1" onclick="return Tic(this);" />

                </td>

                <td>

                    <input type="button" id="2" onclick="return Tic(this);" />

                </td>

                <td>

                    <input type="button" id="3" onclick="return Tic(this);" />

                </td>

            </tr>

            <tr>

                <td>

                    <input type="button" id="4" onclick="return Tic(this);" />

                </td>

                <td>

                    <input type="button" id="5" onclick="return Tic(this);" />

                </td>

                <td>

                    <input type="button" id="6" onclick="return Tic(this);" />

                </td>

            </tr>

            <tr>

                <td>

                    <input type="button" id="7" onclick="return Tic(this);" />

                </td>

                <td>

                    <input type="button" id="8" onclick="return Tic(this);" />

                </td>

                <td>

                    <input type="button" id="9" onclick="return Tic(this);" />

                </td>

            </tr>

        </table>

        <br />

        <input type="button" id="btnPlay" onclick="return Play();" value="Play" 

                  style="width:100px; height: 30px; font: verdana 12pt;" />

        <asp:HiddenField ID="hfGameOver" runat="server" Value="No" />

        <asp:HiddenField ID="hfValue" runat="server" Value="X" />

Script

<script type="text/javascript" language="javascript">

   var ID = [1, 2, 3, 4, 5, 6, 7, 8, 9];

       

    // Possible Solution Array 2D

   var SolArr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7],

                     [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7]];

       

        // For Play Again

        function Play() {

            for (var i = 0; i < 9; i++) {

              var btn = document.getElementById(ID[i]);

              btn.value = "";

              btn.className = "";

              document.getElementById('<%= hfGameOver.ClientID  %>').value = "No";

            }

        }

        // For Tic

        function Tic(obj) {           

            var val;

            var TicValue = document.getElementById('<%=  hfValue.ClientID  %>').value;

            if (document.getElementById('<%= hfGameOver.ClientID  %>').value == "Yes") {

                alert("Game Over");

                return false;

            }

            if (obj.value != "") {

                alert("You can't change value");

                return false;

            }

            if (TicValue == "X") {

                obj.value = TicValue;

                val = "O";

            }

            else {

                obj.value = TicValue;

                val = "X";

            }

            CheckForResult();

            document.getElementById('<%=  hfValue.ClientID  %>').value = val;

        }

        // For Checking Result.

        function CheckForResult() {           

            var TicValue = document.getElementById('<%=  hfValue.ClientID  %>').value;

            for (var i = 0; i < 8; i++) {

                var Id1 = SolArr[i][0], Id2 = SolArr[i][1], Id3 = SolArr[i][2];

                var txt1 = document.getElementById(Id1);

                var txt2 = document.getElementById(Id2);

                var txt3 = document.getElementById(Id3);

                if ((txt1.value != "") && (txt1.value == txt2.value) && 
                    (txt2.value == txt3.value)) {

                    txt1.className = "winner";

                    txt2.className = "winner";

                    txt3.className = "winner";

                   

                    document.getElementById('<%= hfGameOver.ClientID  %>').value = "Yes";

                    alert(TicValue + " is Winner.");

                    return false;

                }

               

            }

        }

            

    </script>