Gra Super pamięć / Super memory game stycznia 20, 2019 Pobierz link Facebook Twitter Pinterest E-mail Inne aplikacje Kultowa gra pamięciowa w wersji memowej. Oprócz pamięci trzeba się wykazać znajomością informatyki. / A cult memory game in the meme version. In addition to memory you need to demonstrate knowledge of computer science. <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; background: #060AB2; } .memory-game { width: 500px; height: 485px; margin: auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; perspective: 1000px; } .memory-card { width: calc(25% - 10px); height: calc(33.333% - 10px); margin: 5px; position: relative; box-shadow: 1px 1px 1px rgba(0,0,0,.3); transition: all .5s; transform-style: preserve-3d; transform: scale(1); } .memory-card.flip { transform: rotateY(180deg); } .memory-card:active { transform: scale(0.97); transition: transform .2s; } .front-face, .back-face { width: 100%; height: 100%; padding: 20px; position: absolute; backface-visibility: hidden; border-radius: 5px; background: #1C7CCC; object-fit: scale-down; object-position: center; } .front-face { transform: rotateY(180deg); } </style> </head> <body> <section class="memory-game"> <div class="memory-card" data-name="c"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinBg7_bSGSARNv-szlSNQe_MmATON6ytFsueNwWALpRhZm0yXyShRVxWOZhFr4rN-Lb3SZ-Ch_O4T2mjaqJocNK261PgSlsuua01Wf7Xjs0Joe_DPEjMZtcc-8O-RyCAe8bQX-N9WFoks/s1600/c.jpg"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="c"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWvjlpoBESG9msGgygidad8Jx9EL0OH0PniZs9PxHmJ9pbzgGM1zcC52oZwGnG82JeLgDw9wn0qG34N-Z_AmURue3dUEzhtp4tJpqhe8FvtxFazX0WDeXOGvFRwI14cTZc6cegGuV90tk/s1600/c.png"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="v"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCADYP19D1uoqORKpmePsE7CWoEnEsYi_QC1dj1lVBpRKnZZmxkIc2sBNng6TfLR6Sfrlb_p6ImoviSfYvhdvQoF2n0ZVWAYdkoaHDAkoYLdf96LieFEWVX7TDxJaRgkOvyavoYi5dI1A/s1600/v.jpg"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="v"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6O1Cw2Ccdfzm9DG-PywIpQG9LIn_x_hZw4n2MoKlSJkK4rKs0dxWTmWmqGEjfHY1RsSb9x1EB1zFdmXLI6ZEaUL-vDFnvfoySWMRsqHeYomFbHLI8nWDc6wstFwyjLM4CsiQbLzsBlJA/s1600/v.png"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="u"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSfyGberMUIjZDT0QEOYpcRK1r04u2uutywTfDSwfBCgpFWhVYp7_dQ_Phyf-uljhINVhOjagLEIgRZZBrF8CnsRHIusHkuQ_S0E8JstSCnltlJDDkEpdF5nPkWGiGXxy8uMjDJbFg74/s1600/u.jpg"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="u"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhE12jQAZLt03H-7H9v2wjoNeT4B5by1gD0NqjrsbPR_RXLAlHXe6EvqUAdfDYl4riF2n0ZxDRjrEXN_-H6O74VfAKaADU-6GfAX0vQrOAUcOWEduV3yVFapRbbX6TI09h1gDOXYBD3U/s1600/u.png"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="l"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCOjza95S5tF2nOm0-0NdIkXQpdVogSqJicpw3xESbvgLk1jZ4XrtPRsLH1jIKuoz0V6Jjz95S8MYvGvMKjfmlDWegBMlI0ymBI54RXSib3io5bVShWT740iPkZFC86FWXiayhCwoFS0/s1600/l.jpg"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="l"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXPDHQTDmRuQuS6C53gxteV6quGxq6mBkxp1VLO0Nd_AiDq7Jhax4HqBOiytXlyPNMS-PUdLNZzkAL4QKDY0ruKbcHBYOu2Spw4Wd1qIHWQdF2EhjHFfkspuPX6-aYk8-hBt1Qj5REqx4/s1600/l.png"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="j"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5KbBifA7JQ2ccWGmZq2OTMFgiZz47ua_ZqhO7s3A7jxSHy70Jxh1DnugiC_S5nWbpXN5dGNeGHZ5GFSNpMH2ciy-8npEoFA1rppBAtnplZ_vMuHNQ_twAu1o9GBG2124gc9nI9gcIYk/s1600/j.jpg"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="j"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeAcecpQR2iPZsnq2Y-0CeAu9GCBWWxiqhFGMxMdEPotGArkqsPSpiO-xCu_RNa3gW2MoVy8VG7RzCdVh5Dyq7qeTLRXNkOMMnt8Qth4Js3Lhtb-PBKuXR-FvIbL5ORciu9vu_Hhv1-0/s1600/j.png"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="h"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdUkun0Hx9p5CwfnGSNnOXsa0PnyDKSl4vhseohCbNHNdzfrNCojoSZX5gNHNgGroqzd42w7X3bKUsKL_6FCuRcfCainJLNjtqKdxvSeRdhot8-L36HqUviFq4YlzbptAkkEBQ7xctfY/s1600/h.jpg"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> <div class="memory-card" data-name="h"> <img class="front-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03I1zFfUSSwgI7ooYMoDPddLBve457ZFBcrUAfqnxfedcLaJqa492OFtHIdkY55be4Pe-ynvk3YY_yYjKT5qQzQfhlLPEFpm8WytDdtXWoISZJU4Gdb-Esmheb946DoeaU7EbG99y2jA/s1600/h.png"> <img class="back-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVs2mCH4hu2cZTPstJZ87uYsVoJFpRspYUF1Bva1nZrHuZ7RroZltLxzJozcpMCL-yeWtM96-IJHs6m1Ou9N6tNax3wAwO-ez12h-TSsr6rHNQd8o2pOQp-DsJYVrxm9536pfyxMxjws/s200/logo500.png"> </div> </section> <script> const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let firstCard, secondCard; function flipCard() { if (lockBoard) return; if (this === firstCard) return; this.classList.add('flip'); if (!hasFlippedCard) { hasFlippedCard = true; firstCard = this; return; } secondCard = this; lockBoard = true; checkForMatch(); } function checkForMatch() { let isMatch = firstCard.dataset.name === secondCard.dataset.name; isMatch ? disableCards() : unflipCards(); } function disableCards() { firstCard.removeEventListener('click', flipCard); secondCard.removeEventListener('click', flipCard); resetBoard(); } function unflipCards() { setTimeout(() => { firstCard.classList.remove('flip'); secondCard.classList.remove('flip'); resetBoard(); }, 1500); } function resetBoard() { hasFlippedCard = false; lockBoard = false; firstCard = null; secondCard = null; } (function shuffle() { cards.forEach(card => { let ramdomPos = Math.ceil(Math.random() * 12); card.style.order = ramdomPos; }); })(); cards.forEach(card => card.addEventListener('click', flipCard)); </script> </body> Komentarze
Komentarze
Prześlij komentarz