Gra Super pamięć / Super memory game

stycznia 20, 2019

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>
</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>

MEM 365

Szukaj na tym blogu

Gra Super pamięć / Super memory game

Komentarze

Prześlij komentarz