Last active
August 22, 2016 08:37
-
-
Save Baudin999/d81d6a1c2c887f8b47ad8722e7867529 to your computer and use it in GitHub Desktop.
Memory
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="board"> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var cards = [ | |
| { name: 'A', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRykrF9oZfo1NiPXHkdt1VOTxZbnjBfHh9Pw1AA8Ah-tz4EfJqcSA" }, | |
| { name: 'B', url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlASZkxXmba-WkMh_WhXISAmZ9SbCCaOHaL-qBdQek7j3WsOQd" }, | |
| { name: 'C', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXCVSZ8kqefQdih-7EJuRenh4VxBg3eAH6Z_mISF2BZgJ_bYW29A" }, | |
| { name: 'D', url: "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSsIZ2qJkkE1JAx6upOxXBm6MT0Zw6mtO4E67qtvecdZaAzoFdU" }, | |
| { name: 'E', url: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTeeLpXvjU0mQsoRsmC8ZT5PddwJ7QyvG2-E9Igel_fG_Gi8Cyg" }, | |
| { name: 'F', url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcEJDUrrtrd6G0NumX-H84BbbrTNXu0k7DkYYnezJMSBf3EBL_nw" }, | |
| { name: 'G', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQzsJhWM1AJJH_XMTMuTfUAVVDB20IjiqRmMgKXqtySw_OTK_0qew" }, | |
| { name: 'H', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTe8ZrvwEiYua5OS6eM5H-TqUNKJiE3grTQg8flwoo4GU-k7fF0LQ" } | |
| ]; | |
| var board = document.querySelector('.board'); | |
| var selectedCard; | |
| var suspend = false; | |
| (function init() { | |
| var _cards = shuffle(cards.concat(cards)); | |
| _cards.forEach(function(card) { | |
| var div = document.createElement('div'); | |
| div.className = 'card'; | |
| div.cardName = card.name; | |
| var img = document.createElement('img'); | |
| img.className = 'img'; | |
| img.setAttribute('src', card.url); | |
| var cover = document.createElement('div'); | |
| cover.className = 'cover'; | |
| div.appendChild(img); | |
| div.appendChild(cover); | |
| board.appendChild(div); | |
| div.onclick = function() { | |
| if (suspend) return; | |
| div.classList.add('show'); | |
| if (!selectedCard) { | |
| selectedCard = div; | |
| } | |
| else if(selectedCard.cardName === card.name) { | |
| delete selectedCard.onclick; | |
| delete div.onclick; | |
| selectedCard = null; | |
| } | |
| else { | |
| suspend = true; | |
| setTimeout(function() { | |
| selectedCard.classList.remove('show'); | |
| div.classList.remove('show'); | |
| selectedCard = null; | |
| suspend = false; | |
| }, 300); | |
| } | |
| } | |
| }) | |
| }()); | |
| function shuffle(array) { | |
| var currentIndex = array.length, temporaryValue, randomIndex; | |
| // While there remain elements to shuffle... | |
| while (0 !== currentIndex) { | |
| // Pick a remaining element... | |
| randomIndex = Math.floor(Math.random() * currentIndex); | |
| currentIndex -= 1; | |
| // And swap it with the current element. | |
| temporaryValue = array[currentIndex]; | |
| array[currentIndex] = array[randomIndex]; | |
| array[randomIndex] = temporaryValue; | |
| } | |
| return array; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* todo: add styles */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .board { | |
| display: flex; | |
| flex-wrap:wrap; | |
| width: 400px; | |
| } | |
| .board .card { | |
| flex: 0 0 100px; | |
| height: 100px; | |
| border: 1px solid black; | |
| z-index: 0; | |
| position: relative; | |
| } | |
| .board .img { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .board .cover { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: orange; | |
| } | |
| .board .card.show .cover { | |
| opacity: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment