Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Memory</title>
- <style type="text/css">
- img {width: 100px; height: 100px; display: block;}
- </style>
- <script>
- document.addEventListener("DOMContentLoaded", function() {
- var $table = document.getElementsByTagName("table")[0],
- $data = $table.getElementsByTagName("img"),
- flag = true, flag1 = false, step = 1,
- first, second,
- defaultSrc = "http://www.hearthstonetopdecks.com/wp-content/uploads/2014/06/card-back-default.png",
- images = [];var firstSrc, secondSrc,
- $reset = document.getElementsByTagName("input")[0];
- for(var i = 0; i < $data.length; i++) {
- images.push([$data[i].parentNode.id, $data[i].src]);
- $data[i].src = defaultSrc;
- }
- function find(id) {
- for(var i = 0; i < images.length; i++)
- if(images[i][0] == id) {
- return images[i][1];
- }
- }
- function changeAndFind(elem) {
- if(first != elem) {
- second = elem;
- second.src = secondSrc = find(second.parentNode.id);
- } else return;
- if(firstSrc == secondSrc && first.parentNode.id != second.parentNode.id)
- first.className = second.className = "found";
- step = 3;
- }
- function memorize(elem) {
- if(elem.tagName == "IMG" && elem.className != "found") {
- if(step == 1) {
- first = elem;
- first.src = firstSrc = find(first.parentNode.id);
- step = 2;
- } else if(step == 2) {
- changeAndFind(elem);
- } else if(step == 3) {
- if(elem != second) {
- var temp = first;
- first = second;
- firstSrc = first.src;
- } else return;
- if(temp.className != "found")
- temp.src = defaultSrc;
- changeAndFind(elem);
- }
- }
- }
- function resetGame() {
- for(var i = 0; i < $data.length; i++) {
- $data[i].src = defaultSrc;
- $data[i].className = "";
- }
- step = 1;
- }
- $table.addEventListener("click", function(e) {
- memorize(e.target);
- });
- $reset.addEventListener("click", resetGame);
- });
- </script>
- </head>
- <body>
- <h1>Meморија</h1>
- <div style="text-align:left; float:left">
- <table border="1">
- <tr>
- <td id="11"><img src="https://vignette.wikia.nocookie.net/hearthstone/images/f/fd/Clutch_of_Yogg-Saron.jpg/revision/latest?cb=20160418183801"/></td>
- <td id="12"><img src="https://i.pinimg.com/736x/79/8d/d1/798dd1bd41e909379be18be4e8e31231--game-cards-card-games.jpg"/></td>
- <td id="13"><img src="https://i.pinimg.com/170x/16/6e/1b/166e1beee58541041d60b0c5e213312e--disn-game-icon.jpg"/></td>
- <td id="14"><img src="https://static.giga.de/wp-content/uploads/2015/05/hearthstone-karten-r%C3%BCcken24.jpg"/></td>
- </tr>
- <tr>
- <td id="21"><img src="https://static.giga.de/wp-content/uploads/2015/05/hearthstone-karten-r%C3%BCcken24.jpg"/></td>
- <td id="22"><img src="https://i.pinimg.com/170x/3e/0d/25/3e0d251ad17b4379e894e4235c957f93--hearth-stone-warcraft-art.jpg"/></td>
- <td id="23"><img src="https://vignette2.wikia.nocookie.net/hearthstone/images/1/13/Card_back-Naxxramas.png/revision/latest?cb=20140822161549"/></td>
- <td id="24"><img src="https://vignette.wikia.nocookie.net/hearthstone/images/f/fd/Clutch_of_Yogg-Saron.jpg/revision/latest?cb=20160418183801"/></td>
- </tr>
- <tr>
- <td id="31"><img src="https://i.pinimg.com/736x/79/8d/d1/798dd1bd41e909379be18be4e8e31231--game-cards-card-games.jpg"/></td>
- <td id="32"><img src="https://i.pinimg.com/170x/16/6e/1b/166e1beee58541041d60b0c5e213312e--disn-game-icon.jpg"/></td>
- <td id="33"><img src="https://vignette1.wikia.nocookie.net/hearthstone/images/b/bd/Pirates_card_back.jpg/revision/latest?cb=20140903210009"/></td>
- <td id="34"><img src="https://vignette1.wikia.nocookie.net/hearthstone/images/b/bd/Pirates_card_back.jpg/revision/latest?cb=20140903210009"/></td>
- </tr>
- <tr>
- <td id="41"><img src="https://vignette2.wikia.nocookie.net/hearthstone/images/1/13/Card_back-Naxxramas.png/revision/latest?cb=20140822161549"/></td>
- <td id="42"><img src="http://8gmwp015fo-flywheel.netdna-ssl.com/wp-content/uploads/sites/4/2014/12/cardbackgnome.png"/></td>
- <td id="43"><img src="https://i.pinimg.com/170x/3e/0d/25/3e0d251ad17b4379e894e4235c957f93--hearth-stone-warcraft-art.jpg"/></td>
- <td id="44"><img src="http://8gmwp015fo-flywheel.netdna-ssl.com/wp-content/uploads/sites/4/2014/12/cardbackgnome.png"/></td>
- </tr>
- </table>
- <input type="submit" value="RESET"/>
- </div>
- <br/>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement