StefiIOE

lab 5.3

Feb 10th, 2020
190
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Memory</title>
  6.   <style type="text/css">
  7.     img {width: 100px; height: 100px; display: block;}
  8.   </style>
  9.   <script>
  10.     document.addEventListener("DOMContentLoaded", function() {
  11.       var $table = document.getElementsByTagName("table")[0],
  12.         $data = $table.getElementsByTagName("img"),
  13.         flag = true, flag1 = false, step = 1,
  14.         first, second,
  15.         defaultSrc = "http://www.hearthstonetopdecks.com/wp-content/uploads/2014/06/card-back-default.png",
  16.         images = [];var firstSrc, secondSrc,
  17.         $reset = document.getElementsByTagName("input")[0];
  18.  
  19.       for(var i = 0; i < $data.length; i++) {
  20.         images.push([$data[i].parentNode.id, $data[i].src]);
  21.         $data[i].src = defaultSrc;
  22.       }
  23.  
  24.       function find(id) {
  25.         for(var i = 0; i < images.length; i++)
  26.           if(images[i][0] == id) {
  27.             return images[i][1];
  28.           }
  29.       }
  30.  
  31.       function changeAndFind(elem) {
  32.         if(first != elem) {
  33.           second = elem;
  34.           second.src = secondSrc = find(second.parentNode.id);
  35.         } else return;
  36.         if(firstSrc == secondSrc && first.parentNode.id != second.parentNode.id)
  37.           first.className = second.className = "found";
  38.         step = 3;
  39.       }
  40.  
  41.       function memorize(elem) {
  42.         if(elem.tagName == "IMG" && elem.className != "found") {
  43.           if(step == 1) {
  44.             first = elem;
  45.             first.src = firstSrc = find(first.parentNode.id);
  46.             step = 2;
  47.           } else if(step == 2) {
  48.             changeAndFind(elem);
  49.           } else if(step == 3) {
  50.             if(elem != second) {
  51.               var temp = first;
  52.               first = second;
  53.               firstSrc = first.src;
  54.             } else return;
  55.             if(temp.className != "found")
  56.               temp.src = defaultSrc;
  57.             changeAndFind(elem);
  58.           }
  59.         }
  60.       }
  61.  
  62.       function resetGame() {
  63.         for(var i = 0; i < $data.length; i++) {
  64.           $data[i].src = defaultSrc;
  65.           $data[i].className = "";
  66.         }
  67.         step = 1;
  68.       }
  69.  
  70.       $table.addEventListener("click", function(e) {
  71.         memorize(e.target);
  72.       });
  73.       $reset.addEventListener("click", resetGame);
  74.     });
  75.   </script>
  76. </head>
  77. <body>
  78. <h1>Meморија</h1>
  79. <div style="text-align:left; float:left">
  80.   <table border="1">
  81.     <tr>
  82.       <td id="11"><img src="https://vignette.wikia.nocookie.net/hearthstone/images/f/fd/Clutch_of_Yogg-Saron.jpg/revision/latest?cb=20160418183801"/></td>
  83.       <td id="12"><img src="https://i.pinimg.com/736x/79/8d/d1/798dd1bd41e909379be18be4e8e31231--game-cards-card-games.jpg"/></td>
  84.       <td id="13"><img src="https://i.pinimg.com/170x/16/6e/1b/166e1beee58541041d60b0c5e213312e--disn-game-icon.jpg"/></td>
  85.       <td id="14"><img src="https://static.giga.de/wp-content/uploads/2015/05/hearthstone-karten-r%C3%BCcken24.jpg"/></td>
  86.     </tr>
  87.     <tr>
  88.       <td id="21"><img src="https://static.giga.de/wp-content/uploads/2015/05/hearthstone-karten-r%C3%BCcken24.jpg"/></td>
  89.       <td id="22"><img src="https://i.pinimg.com/170x/3e/0d/25/3e0d251ad17b4379e894e4235c957f93--hearth-stone-warcraft-art.jpg"/></td>
  90.       <td id="23"><img src="https://vignette2.wikia.nocookie.net/hearthstone/images/1/13/Card_back-Naxxramas.png/revision/latest?cb=20140822161549"/></td>
  91.       <td id="24"><img src="https://vignette.wikia.nocookie.net/hearthstone/images/f/fd/Clutch_of_Yogg-Saron.jpg/revision/latest?cb=20160418183801"/></td>
  92.     </tr>
  93.     <tr>
  94.       <td id="31"><img src="https://i.pinimg.com/736x/79/8d/d1/798dd1bd41e909379be18be4e8e31231--game-cards-card-games.jpg"/></td>
  95.       <td id="32"><img src="https://i.pinimg.com/170x/16/6e/1b/166e1beee58541041d60b0c5e213312e--disn-game-icon.jpg"/></td>
  96.       <td id="33"><img src="https://vignette1.wikia.nocookie.net/hearthstone/images/b/bd/Pirates_card_back.jpg/revision/latest?cb=20140903210009"/></td>
  97.       <td id="34"><img src="https://vignette1.wikia.nocookie.net/hearthstone/images/b/bd/Pirates_card_back.jpg/revision/latest?cb=20140903210009"/></td>
  98.     </tr>
  99.     <tr>
  100.       <td id="41"><img src="https://vignette2.wikia.nocookie.net/hearthstone/images/1/13/Card_back-Naxxramas.png/revision/latest?cb=20140822161549"/></td>
  101.       <td id="42"><img src="http://8gmwp015fo-flywheel.netdna-ssl.com/wp-content/uploads/sites/4/2014/12/cardbackgnome.png"/></td>
  102.       <td id="43"><img src="https://i.pinimg.com/170x/3e/0d/25/3e0d251ad17b4379e894e4235c957f93--hearth-stone-warcraft-art.jpg"/></td>
  103.       <td id="44"><img src="http://8gmwp015fo-flywheel.netdna-ssl.com/wp-content/uploads/sites/4/2014/12/cardbackgnome.png"/></td>
  104.     </tr>
  105.   </table>
  106.   <input type="submit" value="RESET"/>
  107. </div>
  108. <br/>
  109. </body>
  110. </html>
RAW Paste Data