Memory Game by @italotramontin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
disabledImpedisce la modifica di un input
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<h2>Titolo di intestazione di secondo livello
multipleConverte in lista a selezione multipla
<canvas>Tag per disegnare grafica dinamica su pagine web.

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

Esempio di scrittura HTML per esam

basic structure

Tabella con ricerca

Liste e tabelle

La Storia di Livia

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memory Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f9;
    }
    .game-container {
      display: grid;
      grid-template-columns: repeat(4, 100px);
      grid-gap: 10px;
    }
    .card {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: white;
      cursor: pointer;
      transform: scale(1);
      transition: transform 0.2s ease, background-color 0.2s ease;
    }
    .card.hidden {
      background-color: #007bff;
      color: #007bff;
      cursor: pointer;
    }
    .card.matched {
      background-color: #28a745;
      color: white;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div class="game-container" id="game"></div>
  
  <script>
    const icons = ['?', '?', '?', '?', '?', '?', '?', '?'];
    const cards = [...icons, ...icons].sort(() => Math.random() - 0.5);

    const gameContainer = document.getElementById('game');

    // Create and display cards
    cards.forEach(icon => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.icon = icon;
      card.textContent = icon;
      gameContainer.appendChild(card);
    });

    let firstCard = null;
    let secondCard = null;
    let lockBoard = false;

    // Hide cards after initial display
    setTimeout(() => {
      document.querySelectorAll('.card').forEach(card => {
        card.classList.add('hidden');
        card.textContent = '';
      });
    }, 2000); // 2 seconds initial display

    // Flip a card
    function flipCard(card) {
      if (lockBoard || card === firstCard || card.classList.contains('matched') || !card.classList.contains('hidden')) return;

      card.classList.remove('hidden');
      card.textContent = card.dataset.icon;

      if (!firstCard) {
        firstCard = card;
        return;
      }

      secondCard = card;
      checkForMatch();
    }

    // Check for a match
    function checkForMatch() {
      if (firstCard.dataset.icon === secondCard.dataset.icon) {
        firstCard.classList.add('matched');
        secondCard.classList.add('matched');
        resetCards();
      } else {
        lockBoard = true;
        setTimeout(() => {
          firstCard.classList.add('hidden');
          secondCard.classList.add('hidden');
          firstCard.textContent = '';
          secondCard.textContent = '';
          resetCards();
        }, 1000);
      }
    }

    // Reset card selections
    function resetCards() {
      [firstCard, secondCard, lockBoard] = [null, null, false];
    }

    // Add event listener for card clicks
    gameContainer.addEventListener('click', e => {
      if (e.target.classList.contains('card')) {
        flipCard(e.target);
      }
    });
  </script>
</body>
</html>