Beispiel:Memo-Card-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
 <title>Memo-Quiz - fertig!</title>
 <style>
  1. gameboard {
 display: grid;
 gap: 1em;

grid-template-columns: repeat(4, 1fr); width: 32em; }

  1. gameboard button {
 width: 8em;
 aspect-ratio: 1 / 1;
 perspective: 500px;
 background: transparent;
 border: 0;
 padding: 0;

}

img { 

 max-width: 100%;
 display: block;

}

.flip-card-inner { 

 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.6s;
 transform-style: preserve-3d;

}

ul { 

 text-align: start;

}

.flip-card[aria-selected="true"] .flip-card-inner { 

 transform: rotateY(180deg);

}

.flip-card-front, .flip-card-back { 

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: thin solid black;
 backface-visibility: hidden;

}

.flip-card-front { 

 background-color: #e6f2f7;
 transform: rotateY(180deg);

}

.flip-card-front img { 

 width: 100%;
 height: auto;
 background-color: #fff;
 display: block;

}

.flip-card-back { 

 background: white url(https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg);
 background-size: contain; 
 background-repeat: no-repeat;
 background-position: center;

}

.error, .success { padding: 1rem 2rem; }

.error { background: #ffdddd; color: red; }

.success { background: #ddffdd; color: green; white-space: pre-wrap; }

</style>


</head>

<body>

Memo-Quiz

Wähle zwei Karten aus und prüfe, ob sie ein Set sind.

 	<img src="https://wiki.selfhtml.org/images/f/fd/Snowman.svg" alt="snowman">
 	<img src="https://wiki.selfhtml.org/images/9/90/Advent-candles-4.svg" alt="candles">  
   <img src="https://wiki.selfhtml.org/images/0/01/Selfhtml-logo-Weihnachten.png" alt="SELF-Logo mit Nikloausmütze, ca 2008">
   <img src="https://wiki.selfhtml.org/images/5/59/Selfangel.jpg" alt="SELF-Mitglied als Weihnachtsengel, ca 2008">    
   <img src="https://wiki.selfhtml.org/images/4/47/Elf.svg" alt="ELF">  
   <img src="https://wiki.selfhtml.org/images/6/66/SELF-Logo-Nikolaus.svg" alt="logo">

Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele/Memo-Quiz">Memo-Quiz</a>.

<a href="https://forum.selfhtml.org/advent/2024">
<img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px">

Zurück zum
Adventskalender 2024.

</a>


<script> document.addEventListener("DOMContentLoaded", () => { 

 const gameboard = document.querySelector("#gameboard");
 const hint = document.querySelector("#hint");

 let selectedCards = [];
 let totalPairs;
 let matchedPairs = 0;

 function alert(text, type) {
   if (text) {
     setTimeout(() => {
       hint.textContent = text;
       hint.className = type ? type : "error";
     }, 50);
   } else {
     hint.textContent = "";
     hint.className = "";
   }
 }

 function shuffle(array) {
   for (let i = array.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
     [array[i], array[j]] = [array[j], array[i]];
   }
 }



 function initializeGame() {
   const images = Array.from(gameboard.querySelectorAll("img"));
   const cards = [];



   images.forEach((img) => {
     cards.push({ src: img.src, alt: img.alt });
     cards.push({ src: img.src, alt: img.alt });
   });

   shuffle(cards);

   gameboard.innerHTML = "";
   matchedPairs = 0;
   totalPairs = cards.length / 2;

   cards.forEach(({ src, alt }) => {
     const button = createCard(src, alt);
     gameboard.appendChild(button);
   });
 }

 function createCard(src, alt) {
   const button = document.createElement("button");
   button.classList.add("flip-card");
   button.setAttribute("aria-selected", "false");

   const flipCardInner = document.createElement("div");
   flipCardInner.classList.add("flip-card-inner");

   const flipCardFront = document.createElement("img");
   flipCardFront.classList.add("flip-card-front");
   flipCardFront.src = src;
   flipCardFront.alt = alt;

   const flipCardBack = document.createElement("div");
   flipCardBack.classList.add("flip-card-back");

   flipCardInner.appendChild(flipCardFront);
   flipCardInner.appendChild(flipCardBack);
   button.appendChild(flipCardInner);

   button.addEventListener("click", () => {
     handleCardClick(button, src);
   });

   return button;
 }

 function handleCardClick(card, src) {
   if (selectedCards.length >= 2 || card.getAttribute("aria-selected") === "true") {
     return; 
   }

   card.setAttribute("aria-selected", "true");
   selectedCards.push({ card, src });

   if (selectedCards.length === 2) {
     const [firstCard, secondCard] = selectedCards;

     if (firstCard.src === secondCard.src) {
       matchedPairs++;
       selectedCards = [];
       if (matchedPairs === totalPairs) {
         alert("Herzlichen Glückwunsch!", "success");
       }
     } else {

       setTimeout(() => {
         firstCard.card.setAttribute("aria-selected", "false");
         secondCard.card.setAttribute("aria-selected", "false");
         selectedCards = [];
       }, 1000);
     }
   }
 }

 initializeGame();

}); </script> </body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Memo-Card-3.html&oldid=100507“