Tuesday, 8 May 2012

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>


No comments:

Post a comment