Memoatse

js/script.js

@@ -0,0 +1,104 @@
+class Card {
+  constructor(imgPath) {
+    this.img = "ASSets/" + imgPath;
+    this.name = imgPath.split(".")[0];
+    this.pairId = Card.nextPairId++;
+  }
+  static altText = "Upside-down card";
+  static nextPairId = 0;
+}
+
+const cards = [
+  "card1.jpg",
+  "card2.jpg",
+  "card3.jpeg",
+]
+
+const deck = [];
+cards.forEach(card => {
+  deck.push(new Card(card));
+});
+
+// Fisher-Yates shuffle
+const 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]];
+  }
+  return array;
+}
+
+const buildFullDeck = (baseDeck) => {
+  return shuffle([...baseDeck, ...baseDeck]);
+};
+
+const createCardElement = (backSrc) => {
+  const cardElem = document.createElement("div");
+  cardElem.className = "card";
+  cardElem.dataset.revealed = "false";
+  const img = document.createElement("img");
+  img.src = backSrc;
+  img.alt = Card.altText;
+  cardElem.appendChild(img);
+  return cardElem;
+};
+
+const revealCard = (elem, card) => {
+  const img = elem.querySelector("img");
+  img.src = card.img;
+  elem.dataset.revealed = "true";
+};
+
+const hideCard = (elem, backSrc) => {
+  const img = elem.querySelector("img");
+  img.src = backSrc;
+  elem.dataset.revealed = "false";
+};
+
+const startGame = () => {
+  const container = document.getElementById("cards");
+  const backSrc = "ASSets/cardback.jpg";
+  const winSfx = new Audio("ASSets/fart.mp3");
+  const fullDeck = buildFullDeck(deck);
+  container.innerHTML = "";
+
+  let firstPick = null;
+  let isLocked = false;
+  let matchedCount = 0;
+
+  fullDeck.forEach((card) => {
+    const el = createCardElement(backSrc);
+
+    el.addEventListener("click", () => {
+      if (isLocked) return;
+      if (el.dataset.revealed === "true") return;
+
+      revealCard(el, card);
+
+      if (!firstPick) {
+        firstPick = { el, card };
+        return;
+      }
+
+      if (firstPick.card.pairId === card.pairId && firstPick.el !== el) {
+        matchedCount += 2;
+        firstPick = null;
+        if (matchedCount === fullDeck.length) {
+          try { winSfx.currentTime = 0; winSfx.play(); } catch (_) {}
+          setTimeout(startGame, 800);
+        }
+      } else {
+        isLocked = true;
+        const prev = firstPick;
+        firstPick = null;
+        setTimeout(() => {
+          hideCard(prev.el, backSrc);
+          hideCard(el, backSrc);
+          isLocked = false;
+        }, 700);
+      }
+    });
+
+    container.appendChild(el);
+  });
+};