Shuffle Game using JavaScript


  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <style type="text/css">  
  6.         #mainform {  
  7.             background-color: gray;  
  8.             width: 206px;  
  9.             height: 238px;  
  10.             border-style: solid;  
  11.             border-width: thick;  
  12.             border-color: antiquewhite;  
  13.             margin: 1px;  
  14.         }  
  15.   
  16.         .subdivs {  
  17.             width: 50px;  
  18.             height: 60px;  
  19.             background-color: aliceblue;  
  20.             border-style: solid;  
  21.             border-width: thick;  
  22.             border-color: antiquewhite;  
  23.             margin: 2px;  
  24.             padding: 2px;  
  25.             float: left;  
  26.             font-size: 36px;  
  27.             cursor: pointer;  
  28.         }  
  29.     </style>  
  30.     <title></title>  
  31. </head>  
  32. <body>  
  33.     <form id="form1" runat="server">  
  34.         <div id="mainform">  
  35.         </div>  
  36.   
  37.     </form>  
  38.     <script type="text/javascript">  
  39.         var arrays = ["1", "2", "3", "4", "5", "6", "7", "8", ""]  
  40.         var e = 0;  
  41.         Array.prototype.shuffle = function () {  
  42.             var i = arrays.length, j = 0, j, randomnum, temp;  
  43.             while (--i > 0) {  
  44.                 randomnum = Math.floor(Math.random() * (i + 1));  
  45.                 temp = this[randomnum];  
  46.                 this[randomnum] = this[j];  
  47.                 this[j] = temp;  
  48.             }  
  49.             //document.write(arrays);  
  50.         }  
  51.         function adddiv() {  
  52.             var subdivs = "";  
  53.             arrays.shuffle();  
  54.             for (var i = 0; i < arrays.length; i++) {  
  55.   
  56.                 subdivs = subdivs + '<div id="subdiv' + e + '"  class="subdivs"  onclick="replaceExisting(this, \'' + arrays[i] + '\');">' + arrays[i] + ' </div>';  
  57.                 e = e + 1;  
  58.                
  59.             };  
  60.             document.getElementById('mainform').innerHTML = subdivs;  
  61.         }  
  62.         adddiv();  
  63.   
  64.         function replaceExisting(element, getvalues) {  
  65.   
  66.             var ids = element.id;  
  67.             var i = arrays.length;  
  68.             var emptyarray, selectedarray, selectedid, temp1;  
  69.             for (var k = 0; k < i; k++) {  
  70.                 if (arrays[k] == getvalues) {  
  71.                     selectedarray = k;  
  72.                 }  
  73.                 if (arrays[k] == " ") {  
  74.                     emptyarray = k;  
  75.                 }  
  76.             }  
  77.             selectedid = "subdiv" + selectedarray;  
  78.             var selectedarray = ids.substring(6);  
  79.             var Emptyresult = validate(selectedarray);  
  80.             var resultelement = document.getElementById(selectedid);  
  81.             var emptyelement = document.getElementById(Emptyresult);  
  82.            // debugger;  
  83.             if (element.innerHTML != " " && Emptyresult!=null) {  
  84.                 emptyelement.innerHTML = resultelement.innerHTML;  
  85.                 resultelement.innerHTML = " ";  
  86.             }  
  87.               
  88.   
  89.         }  
  90.   
  91.         function validate(selectedarray) {  
  92.             if (selectedarray == 0) {  
  93.                 return getvalues0();  
  94.   
  95.             }  
  96.             if (selectedarray == 1) {  
  97.                 return getvalues1();  
  98.             }  
  99.             if (selectedarray == 2) {  
  100.                 return getvalues2();  
  101.             }  
  102.             if (selectedarray == 3) {  
  103.                 return getvalues3();  
  104.             }  
  105.             if (selectedarray == 4) {  
  106.                 return getvalues4();  
  107.             }  
  108.             if (selectedarray == 5) {  
  109.                 return getvalues5();  
  110.             }  
  111.             if (selectedarray == 6) {  
  112.                 return getvalues6();  
  113.             }  
  114.             if (selectedarray == 7) {  
  115.                 return getvalues7();  
  116.             }  
  117.             if (selectedarray == 8) {  
  118.                 return getvalues8();  
  119.   
  120.             }  
  121.             else if (_('subdiv0') == 1 && _('subdiv1') == 2 && _('subdiv2') == 3 && _('subdiv3') == 4  
  122. && _('subdiv4') == 5 && _('subdiv5') == 6 && _('subdiv6') == 7 && _('subdiv7') == 8) {  
  123.                 debugger;  
  124.                 alert('Congrats u have succeded');  
  125.             }  
  126.         }  
  127.         function _(element) {  
  128.             var d = document.getElementById(element).innerHTML;  
  129.             return d;  
  130.         }  
  131.         function getvalues0() {  
  132.             var val1 = _('subdiv1');  
  133.             if (val1 == " ") {  
  134.                 return "subdiv1"  
  135.             }  
  136.             var val3 = _('subdiv3');  
  137.             if (val3 == " ") {  
  138.                 return "subdiv3"  
  139.             }  
  140.             else   
  141.                 return null;  
  142.         }  
  143.         function getvalues1() {  
  144.             var val0 = _('subdiv0');  
  145.             if (val0 == " ") {  
  146.                 return "subdiv0"  
  147.             }  
  148.             var val2 = _('subdiv2');  
  149.             if (val2 == " ") {  
  150.                 return "subdiv2"  
  151.             }  
  152.             var val4 = _('subdiv4');  
  153.             if (val4 == " ") {  
  154.                 return "subdiv4"  
  155.             }  
  156.             else  
  157.                 return null;  
  158.         }  
  159.         function getvalues2() {  
  160.             var val1 = _('subdiv1');  
  161.             if (val1 == " ") {  
  162.                 return "subdiv1"  
  163.             }  
  164.             var val5 = _('subdiv5');  
  165.             if (val5 == " ") {  
  166.                 return "subdiv5"  
  167.             }  
  168.             else  
  169.                 return null;  
  170.         }  
  171.         function getvalues3() {  
  172.             var val0 = _('subdiv0');  
  173.             if (val0 == " ") {  
  174.                 return "subdiv0"  
  175.             }  
  176.             var val4 = _('subdiv4');  
  177.             if (val4 == " ") {  
  178.                 return "subdiv4"  
  179.             }  
  180.             var val6 = _('subdiv6');  
  181.             if (val6 == " ") {  
  182.                 return "subdiv6"  
  183.             }  
  184.             else  
  185.                 return null;  
  186.         }  
  187.         function getvalues4() {  
  188.             var val1 = _('subdiv1');  
  189.             if (val1 == " ") {  
  190.                 return "subdiv1"  
  191.             }  
  192.             var val3 = _('subdiv3');  
  193.             if (val3 == " ") {  
  194.                 return "subdiv3"  
  195.             }  
  196.             var val5 = _('subdiv5');  
  197.             if (val5 == " ") {  
  198.                 return "subdiv5"  
  199.             }  
  200.             var val7 = _('subdiv7');  
  201.             if (val7 == " ") {  
  202.                 return "subdiv7"  
  203.             }  
  204.             else  
  205.                 return null;  
  206.         }  
  207.         function getvalues5() {  
  208.             var val2 = _('subdiv2');  
  209.             if (val2 == " ") {  
  210.                 return "subdiv2"  
  211.             }  
  212.             var val4 = _('subdiv4');  
  213.             if (val4 == " ") {  
  214.                 return "subdiv4"  
  215.             }  
  216.             var val8 = _('subdiv8');  
  217.             if (val8 == " ") {  
  218.                 return "subdiv8"  
  219.             }  
  220.             else  
  221.                 return null;  
  222.         }  
  223.         function getvalues6() {  
  224.             var val3 = _('subdiv3');  
  225.             if (val3 == " ") {  
  226.                 return "subdiv3"  
  227.             }  
  228.             var val7 = _('subdiv7');  
  229.             if (val7 == " ") {  
  230.                 return "subdiv7"  
  231.             }  
  232.             else  
  233.                 return null;  
  234.         }  
  235.         function getvalues7() {  
  236.             var val6 = _('subdiv6');  
  237.             if (val6 == " ") {  
  238.                 return "subdiv6"  
  239.             }  
  240.             var val8 = _('subdiv8');  
  241.             if (val8 == " ") {  
  242.                 return "subdiv8"  
  243.             }  
  244.             var val4 = _('subdiv4');  
  245.             if (val4 == " ") {  
  246.                 return "subdiv4"  
  247.             }  
  248.             else  
  249.                 return null;  
  250.         }  
  251.         function getvalues8() {  
  252.             var val5 = _('subdiv5');  
  253.             if (val5 == " ") {  
  254.                 return "subdiv5"  
  255.             }  
  256.             var val7 = _('subdiv7');  
  257.             if (val7 == " ") {  
  258.                 return "subdiv7"  
  259.             }  
  260.             else  
  261.                 return null;  
  262.         }  
  263.   
  264.     </script>  
  265. </body>  
  266. </html>