Tic Tac Toe using JavaScript


  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <style type="text/css">  
  4.         .btn {  
  5.             width: 55px;  
  6.             height: 55px;  
  7.             font-size: 25px;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11. </head>  
  12. <body>  
  13.   
  14.       
  15.         <div>  
  16.             <table>  
  17.                 <tr>  
  18.                     <td>  
  19.                         <input id="2Player" type="button" value="TwoPlayer" onclick="SelectGame(this.id)" name="2Player" />  
  20.                     </td>  
  21.                     <td>  
  22.                         <input id="Computer" type="button" value="Computer" onclick="SelectGame(this.id)" name="Computer" />  
  23.                     </td>  
  24.                 </tr>  
  25.             </table>  
  26.             <table>  
  27.                 <tr>  
  28.                     <td>  
  29.                         <input id="A1" type="button" onclick="checkUser(this.id);" class="btn" name="A1" />  
  30.                     </td>  
  31.                     <td>  
  32.                         <input id="A2" type="button" onclick="checkUser(this.id);" class="btn" name="A2" />  
  33.                     </td>  
  34.                     <td>  
  35.                         <input id="A3" type="button" onclick="checkUser(this.id);" class="btn" name="A3" />  
  36.                     </td>  
  37.                 </tr>  
  38.                 <tr>  
  39.                     <td>  
  40.                         <input id="B1" type="button" onclick="checkUser(this.id);" class="btn" name="B1" />  
  41.   
  42.                     </td>  
  43.                     <td>  
  44.   
  45.                         <input id="B2" type="button" onclick="checkUser(this.id);" class="btn" name="B2" />  
  46.                     </td>  
  47.                     <td>  
  48.                         <input id="B3" type="button" onclick="checkUser(this.id);" class="btn" name="B3" />  
  49.                     </td>  
  50.                 </tr>  
  51.                 <tr>  
  52.                     <td>  
  53.                         <input id="C1" type="button" onclick="checkUser(this.id);" class="btn" name="C1" />  
  54.   
  55.                     </td>  
  56.                     <td>  
  57.                         <input id="C2" type="button" onclick="checkUser(this.id);" class="btn" name="C2" />  
  58.   
  59.                     </td>  
  60.                     <td>  
  61.                         <input id="C3" type="button" onclick="checkUser(this.id);" class="btn" name="C3" />  
  62.                     </td>  
  63.                 </tr>  
  64.   
  65.             </table>  
  66.         </div>  
  67.      
  68.     <script type="text/javascript">  
  69.         var result = "";  
  70.         var CheckForWinningOpton = "";  
  71.         var player = true;  
  72.         var totalCount = 0;  
  73.         var gameChosen = 0;  
  74.           
  75.         var SelectGame = function (clickedId) {  
  76.             if (document.getElementById(clickedId).value == "TwoPlayer") {  
  77.                 gameChosen = 0;  
  78.                 document.getElementById("Computer").disabled = true;  
  79.             }  
  80.             else {  
  81.                 gameChosen = 1;  
  82.                 document.getElementById("2Player").disabled = true;  
  83.             }  
  84.         }  
  85.         function checkUser(clickedId) {  
  86.             if (gameChosen == 0) {  
  87.                 totalCount = totalCount + 1;  
  88.                 if (player == true) {  
  89.                     document.getElementById(clickedId).value = 'X';  
  90.                     document.getElementById(clickedId).disabled = true;  
  91.                     clear(false);  
  92.                 }  
  93.                 else {  
  94.                     document.getElementById(clickedId).value = 'O';  
  95.                     document.getElementById(clickedId).disabled = true;  
  96.                     clear(true);  
  97.                 }  
  98.                 checkForWinner();  
  99.             }  
  100.             else {  
  101.                 //Check Whether Computer has any option to win this game  
  102.                 //Block if Human is going to win  
  103.                 //Pocket the Corner Place if first 2 Condition Fails  
  104.                 //If corner places are full then go for Empty places  
  105.                     document.getElementById(clickedId).value = 'X';  
  106.                     document.getElementById(clickedId).disabled = true;  
  107.                     clear(false);  
  108.                   
  109.                result= CheckForWinningOpton("O");  
  110.                 if(result==null)  
  111.                 {  
  112.                     result = CheckForWinningOpton("X")  
  113.                     if(result==null)  
  114.                     {  
  115.                         result = LookforCorner();  
  116.                         if (result == null)  
  117.                             {  
  118.                             result = LookforEmpty();  
  119.                         }  
  120.                     }  
  121.                 }  
  122.                  
  123.                 document.getElementById(result).value = 'O';  
  124.                 document.getElementById(result).disabled = true;  
  125.                 clear(true);  
  126.                   
  127.                 checkForWinner();  
  128.             }  
  129.               
  130.         }  
  131.           
  132.        
  133.         CheckForWinningOpton = function (Value) {  
  134.             var A1 = document.getElementById("A1").value;  
  135.             var A2 = document.getElementById("A2").value;  
  136.             var A3 = document.getElementById("A3").value;  
  137.   
  138.             var B1 = document.getElementById("B1").value;  
  139.             var B2 = document.getElementById("B2").value;  
  140.             var B3 = document.getElementById("B3").value;  
  141.   
  142.             var C1 = document.getElementById("C1").value;  
  143.             var C2 = document.getElementById("C2").value;  
  144.             var C3 = document.getElementById("C3").value;  
  145.   
  146.   
  147.           
  148.             if (A1 == Value && A2 == Value && A3 == "")  
  149.                 return "A3";  
  150.             if (A1 == Value && A3 == Value && A2 == "")  
  151.                 return "A2";  
  152.             if (A2 == Value && A3 == Value && A1 == "")  
  153.                 return "A1";  
  154.   
  155.             if (B1 == Value && B2 == Value && B3 == "")  
  156.                 return "B3";  
  157.             if (B1 == Value && B3 == Value && B2 == "")  
  158.                 return "B2";  
  159.             if (B3 == Value && B2 == Value && B1 == "")  
  160.                 return "B1";  
  161.   
  162.             if (C1 == Value && C2 == Value && C3 == "")  
  163.                 return "C3";  
  164.             if (C1 == Value && C3 == Value && C2 == "")  
  165.                 return "C2";  
  166.             if (C3 == Value && C2 == Value && C1 == "")  
  167.                 return "C1";  
  168.             //Check Vertical  
  169.   
  170.   
  171.             if (A1 == Value && B1 == Value && C1 == "")  
  172.                 return "C1";  
  173.             if (B1 == Value && C1 == Value && A1 == "")  
  174.                 return "A1";  
  175.             if (A1 == Value && C1 == Value && B1 == "")  
  176.                 return "B1";  
  177.   
  178.             if (A2 == Value && B2 == Value && C2 == "")  
  179.                 return "C2";  
  180.             if (B2 == Value && C2 == Value && A2 == "")  
  181.                 return "A2";  
  182.             if (A2 == Value && C2 == Value && B2 == "")  
  183.                 return "B2";  
  184.   
  185.             if (A3 == Value && B3 == Value && C3 == "")  
  186.                 return "C3";  
  187.             if (B3 == Value && C3 == Value && A3 == "")  
  188.                 return "A3";  
  189.             if (A3 == Value && C3 == Value && B3 == "")  
  190.                 return "B3";  
  191.   
  192.             //Check Diagonal  
  193.   
  194.             if (A1 == Value && B2 == Value && C3 == "")  
  195.                 return "C3";  
  196.             if (B2 == Value && C3 == Value && A1 == "")  
  197.                 return "A1";  
  198.             if (A1 == Value && C3 == Value && B2 == "")  
  199.                 return "B2";  
  200.   
  201.   
  202.             if (C1 == Value && B2 == Value && A3 == "")  
  203.                 return "A3";  
  204.             if (B2 == Value && A3 == Value && C1 == "")  
  205.                 return "C1";  
  206.             if (C1 == Value && A3 == Value && B2 == "")  
  207.                 return "B2";  
  208.   
  209.             else  
  210.             return null;  
  211.   
  212.         }  
  213.           
  214.         function LookforCorner()  
  215.         {  
  216.             var A1 = document.getElementById("A1").value;  
  217.             var A2 = document.getElementById("A2").value;  
  218.             var A3 = document.getElementById("A3").value;  
  219.   
  220.             var B1 = document.getElementById("B1").value;  
  221.             var B2 = document.getElementById("B2").value;  
  222.             var B3 = document.getElementById("B3").value;  
  223.   
  224.             var C1 = document.getElementById("C1").value;  
  225.             var C2 = document.getElementById("C2").value;  
  226.             var C3 = document.getElementById("C3").value;  
  227.   
  228.   
  229.           
  230.             if (A1 != "" && A3== "")  
  231.                 return "A3";  
  232.   
  233.             if (A3 != "" && A1 == "")  
  234.                 return "A1";  
  235.   
  236.             if (C1 != "" && C3 == "")  
  237.                 return "C3";  
  238.   
  239.             if (C3 != "" && C1 == "")  
  240.                 return "C3";  
  241.             else  
  242.             return null;  
  243.         }  
  244.         var LookforEmpty=function()  
  245.         {  
  246.             var A1 = document.getElementById("A1").value;  
  247.             var A2 = document.getElementById("A2").value;  
  248.             var A3 = document.getElementById("A3").value;  
  249.   
  250.             var B1 = document.getElementById("B1").value;  
  251.             var B2 = document.getElementById("B2").value;  
  252.             var B3 = document.getElementById("B3").value;  
  253.   
  254.             var C1 = document.getElementById("C1").value;  
  255.             var C2 = document.getElementById("C2").value;  
  256.             var C3 = document.getElementById("C3").value;  
  257.   
  258.   
  259.   
  260.             if (A1 == "")  
  261.                 return "A1";  
  262.             if (A2 == "")  
  263.                 return "A2";  
  264.             if (A3 == "")  
  265.                 return "A3";  
  266.   
  267.   
  268.             if (B1 == "")  
  269.                 return "B1";  
  270.             if (B2 == "")  
  271.                 return "B2";  
  272.             if (B3 == "")  
  273.                 return "B3";  
  274.   
  275.   
  276.             if (C1 == "")  
  277.                 return "C1";  
  278.             if (C2 == "")  
  279.                 return "C2";  
  280.             if (C3 == "")  
  281.                 return "C3";  
  282.             else  
  283.             return null;  
  284.   
  285.               
  286.         }  
  287.         var checkForWinner = function () {  
  288.             var A1 = document.getElementById("A1").value;  
  289.             var A2 = document.getElementById("A2").value;  
  290.             var A3 = document.getElementById("A3").value;  
  291.   
  292.             var B1 = document.getElementById("B1").value;  
  293.             var B2 = document.getElementById("B2").value;  
  294.             var B3 = document.getElementById("B3").value;  
  295.   
  296.             var C1 = document.getElementById("C1").value;  
  297.             var C2 = document.getElementById("C2").value;  
  298.             var C3 = document.getElementById("C3").value;  
  299.   
  300.   
  301.             var checkUserWins = false;  
  302.   
  303.             if (A1 == A2 && A2 == A3 && A1 != "") {  
  304.                 checkUserWins = true;  
  305.                 alert(A1 + " Wins");  
  306.             }  
  307.             if (B1 == B2 && B2 == B3 && B1 != "") {  
  308.                 checkUserWins = true;  
  309.                 alert(B1 + " Wins");  
  310.             }  
  311.             if (C1 == C2 && C2 == C3 && C1 != "") {  
  312.                 checkUserWins = true;  
  313.                 alert(C1 + " Wins");  
  314.             }  
  315.   
  316.             if (A1 == B1 && B1 == C1 && A1 != "") {  
  317.                 checkUserWins = true;  
  318.                 alert(A1 + " Wins");  
  319.             }  
  320.             if (A2 == B2 && B2 == C2 && A2 != "") {  
  321.                 checkUserWins = true;  
  322.                 alert(A2 + " Wins");  
  323.             }  
  324.             if (A3 == B3 && B3 == C3 && A3 != "") {  
  325.                 checkUserWins = true;  
  326.                 alert(A3 + " Wins");  
  327.             }  
  328.   
  329.             if (A1 == B2 && B2 == C3 && A1 != "") {  
  330.                 checkUserWins = true;  
  331.                 alert(A1 + " Wins");  
  332.             }  
  333.             if (A3 == B2 && B2 == C1 && A3 != "") {  
  334.                 checkUserWins = true;  
  335.                 alert(A3 + " Wins");  
  336.             }  
  337.             else if (totalCount == 9 && checkUserWins==false) {  
  338.                 alert("Game Draw");  
  339.             }  
  340.   
  341.         }  
  342.         var clear = function (value) {  
  343.             player = value;  
  344.         }  
  345.     </script>  
  346. </body>  
  347. </html>