Memory Game using JavaScript

  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .mainboardClass  
  8.         {  
  9.             margin:0px auto;  
  10.             width:800px;  
  11.             height:540px;  
  12.             background-color:#ccc;  
  13.             padding:24px;  
  14.             border:dashed;  
  15.   
  16.               
  17.         }  
  18.         div#minboard>div {  
  19.             background: url(Images/Untitled123.png) no-repeat;  
  20.              margin: 0px auto;  
  21.             text-align: center;  
  22.             margin: 10px;  
  23.             padding: 20px;  
  24.             width: 71px;  
  25.             height: 71px;  
  26.             cursor: pointer;  
  27.             text-align: center;  
  28.             border: thin;  
  29.             float:left;  
  30.             font:24px;  
  31.         }  
  32.     </style>  
  33.     <script type="text/javascript">  
  34.         //Fisher Yates Shuffle Algorithm  
  35.         var arr = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I'];  
  36.         var memory_values_array = [];  
  37.         var memory_values_id = [];  
  38.         var tilesFliped = 0;  
  39.         Array.prototype.shuffle = function () {  
  40.             var i = arr.length, j, temp;  
  41.             while (--i > 0) {  
  42.                 j = Math.floor(Math.random() * (i + 1));  
  43.                 temp = this[j];  
  44.                 this[j] = this[i];  
  45.                 this[i] = temp;  
  46.             }  
  47.         }  
  48.          
  49.         function newboard() {  
  50.             var adddivs = '';  
  51.             arr.shuffle();  
  52.             for (var i = 0; i < arr.length; i++) {  
  53.                 //Adds div dynamically to the array lenth  
  54.                adddivs += '<div id="title_' + i + '"  onclick=" pageflip(this, \''+arr[i]+'\'); "></div>';  
  55.             }  
  56.             document.getElementById('minboard').innerHTML = adddivs;  
  57.         }  
  58.        
  59.         function pageflip(ids,tileValue)  
  60.         {  
  61.             //Check the tile is empty   
  62.             if(ids.innerHTML=="" && tileValue.length < 2)  
  63.             {  
  64.                 ids.style.color = '#FFF';  
  65.                 //Assign the value to the tile  
  66.                 ids.innerHTML = tileValue;  
  67.                 ids.style.background = 'URL() no-repeat';  
  68.                 //push the first tile value into the array  
  69.                 if (memory_values_array.length == 0) {  
  70.                     memory_values_array.push(tileValue);  
  71.                     memory_values_id.push(ids.id);  
  72.                 }  
  73.                     //If 2nd tile is clicked   
  74.                else if (memory_values_array.length == 1 )  
  75.                {  
  76.                    //Push the value in "memory_values_array"  
  77.                    //Push the dive in "memory_values_id"  
  78.                     memory_values_array.push(tileValue);  
  79.                     memory_values_id.push(ids.id);  
  80.   
  81.                    //if both values selected matches then   
  82.                     if(memory_values_array[0]==memory_values_array[1])  
  83.                     {  
  84.                           
  85.                         tilesFliped = tilesFliped + 2;  
  86.                         memory_values_array=[];  
  87.                         memory_values_id = [];  
  88.   
  89.                         //New board is generated if all tiles are successfully mapped  
  90.                         if(tilesFliped==arr.length)  
  91.                         {  
  92.                             clearTimeout(timer);  
  93.                             alert("Board Cleared Take this as Bonus");  
  94.                             newboard();  
  95.                         }  
  96.                     }  
  97.                     else {  
  98.                         //If both clicked tiles does not match then Empty the array   
  99.                         //Change the back ground color of the tiles   
  100.                         function ifNothingMatches() {  
  101.                             var id1 = document.getElementById(memory_values_id[0])  
  102.                             var id2 = document.getElementById(memory_values_id[1])  
  103.                             id1.innerHTML = "";  
  104.                             id1.style.background = 'URL(Images/Untitled123.png) no-repeat';  
  105.                             id2.innerHTML = "";  
  106.                             id2.style.background = 'URL(Images/Untitled123.png) no-repeat';  
  107.                             memory_values_array = [];  
  108.                             memory_values_id = [];  
  109.                         }  
  110.                         setTimeout(ifNothingMatches,700)  
  111.                     }  
  112.                 }  
  113.             }  
  114.         }  
  115.     </script>  
  116.       
  117. </head>  
  118. <body>  
  119.     <div id="minboard" class="mainboardClass"></div>  
  120.     <script>newboard();  
  121.     </script>  
  122.  </body>  
  123. </html>