index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <meta name="description" content="Memory">
   6 <title>Memory</title>
   7 <script>
   8 var t1=null;
   9 var t2=null;
  10 var found=0;
  11 document.addEventListener("DOMContentLoaded",verteiler);
  12 document.addEventListener("DOMContentLoaded",controll);
  13 document.addEventListener("DOMContentLoaded",mischen);
  14 function verteiler(){
  15         for (i=0;i<=15;i++){
  16                 document.getElementsByName('card')[i].style.width="100px";
  17                 document.getElementsByName('card')[i].style.height="100px";
  18                 document.getElementsByName('card')[i].style.position="absolute";
  19                 document.getElementsByName('card')[i].style.backgroundColor="red";
  20                 document.getElementsByName('card')[i].style.cursor="pointer";
  21                 document.getElementsByName('card')[i].style.borderStyle="solid";
  22                 document.getElementsByName('card')[i].style.borderWidth="2px";
  23
  24                 if (i<=3){
  25                 document.getElementsByName('card')[i].style.top="100px";
  26         }
  27         else if (i<=7){
  28                 document.getElementsByName('card')[i].style.top="250px";
  29         }
  30         else if (i<=11){
  31                 document.getElementsByName('card')[i].style.top="400px";
  32         }
  33         else if (i<=15){
  34                 document.getElementsByName('card')[i].style.top="550px";
  35         }
  36         if (i===0||i===4||i===8||i===12){
  37                 document.getElementsByName('card')[i].style.left="100px";
  38         }
  39         else if (i===1||i===5||i===9||i===13){
  40                 document.getElementsByName('card')[i].style.left="250px";
  41         }
  42         else if (i===2||i===6||i===10||i===14){
  43                 document.getElementsByName('card')[i].style.left="400px";
  44         }
  45         else if (i===3||i===7||i===11||i===15){
  46                 document.getElementsByName('card')[i].style.left="550px";
  47         }
  48
  49
  50                 }
  51         }
  52         function controll(){
  53
  54 card0=document.getElementsByName('card')[0];
  55 card0.addEventListener('click', function(){change(0);}, true);
  56 card1=document.getElementsByName('card')[1];
  57 card1.addEventListener('click', function(){change(1);}, true);
  58 card2=document.getElementsByName('card')[2];
  59 card2.addEventListener('click', function(){change(2);}, true);
  60 card3=document.getElementsByName('card')[3];
  61 card3.addEventListener('click', function(){change(3);}, true);
  62 card4=document.getElementsByName('card')[4];
  63 card4.addEventListener('click', function(){change(4);}, true);
  64 card5=document.getElementsByName('card')[5];
  65 card5.addEventListener('click', function(){change(5);}, true);
  66 card6=document.getElementsByName('card')[6];
  67 card6.addEventListener('click', function(){change(6);}, true);
  68 card7=document.getElementsByName('card')[7];
  69 card7.addEventListener('click', function(){change(7);}, true);
  70 card8=document.getElementsByName('card')[8];
  71 card8.addEventListener('click', function(){change(8);}, true);
  72 card9=document.getElementsByName('card')[9];
  73 card9.addEventListener('click', function(){change(9);}, true);
  74 card10=document.getElementsByName('card')[10];
  75 card10.addEventListener('click', function(){change(10);}, true);
  76 card11=document.getElementsByName('card')[11];
  77 card11.addEventListener('click', function(){change(11);}, true);
  78 card12=document.getElementsByName('card')[12];
  79 card12.addEventListener('click', function(){change(12);}, true);
  80 card13=document.getElementsByName('card')[13];
  81 card13.addEventListener('click', function(){change(13);}, true);
  82 card14=document.getElementsByName('card')[14];
  83 card14.addEventListener('click', function(){change(14);}, true);
  84 card15=document.getElementsByName('card')[15];
  85 card15.addEventListener('click', function(){change(15);}, true);
  86 }
  87
  88 function mischen(){
  89 var left=[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7];
  90 for(i=0;i<=15;i++){
  91          var f=Math.floor(Math.random()*left.length);
  92          document.getElementsByName('card')[i].innerHTML="<img src='shapes/s"+left[f]+".png'height='100' name='pic' style='visibility:hidden' />";
  93          for(h=f;h<left.length;h++){
  94                  left[h]=left[(h+1)];
  95                  }
  96                  left.pop();
  97         }
  98
  99         }
 100
 101 function change(card){
 102         if(t1===null&&t2===null){
 103                 t1=card;
 104                 document.getElementsByName('pic')[t1].style.visibility="visible";
 105                 document.getElementsByName('card')[t1].style.borderStyle="none";
 106         }
 107         else if(t2===null&&t1!=card){
 108                 t2=card;
 109                 document.getElementsByName('pic')[t2].style.visibility="visible";
 110                 document.getElementsByName('card')[t2].style.borderStyle="none";
 111                 var yn=false;
 112             if(document.getElementsByName('card')[t1].innerHTML===document.getElementsByName('card')[t2].innerHTML){
 113                 yn=true;
 114                 }
 115                 var to=setTimeout(dis,1000,yn,t1,t2);
 116
 117                 }
 118
 119                 }
 120         function dis(yn,a,b){
 121                 if(yn){
 122                         found+=1;
 123                         if(found===8){
 124                         window.alert("You Won.");
 125                         }
 126                  document.getElementsByName('card')[a].style.visibility="hidden";
 127                  document.getElementsByName('card')[b].style.visibility="hidden";
 128
 129
 130                         }
 131                  document.getElementsByName('pic')[a].style.visibility="hidden";
 132                  document.getElementsByName('pic')[b].style.visibility="hidden";
 133                  document.getElementsByName('card')[a].style.borderStyle="solid";
 134                  document.getElementsByName('card')[b].style.borderStyle="solid";
 135             t1=null;
 136                 t2=null;
 137                 }
 138 </script>
 139 <style>
 140 body{background-color:#0034BC}
 141 </style>
 142 </head>
 143 <body>
 144         <div name="card"></div>
 145         <div name="card"></div>
 146         <div name="card"></div>
 147         <div name="card"></div>
 148         <div name="card"></div>
 149         <div name="card"></div>
 150         <div name="card"></div>
 151         <div name="card"></div>
 152         <div name="card"></div>
 153         <div name="card"></div>
 154         <div name="card"></div>
 155         <div name="card"></div>
 156         <div name="card"></div>
 157         <div name="card"></div>
 158         <div name="card"></div>
 159         <div name="card"></div>
 160 </body>
 161 </html>