105 lines
2.4 KiB
JavaScript
105 lines
2.4 KiB
JavaScript
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);
|
|
});
|
|
};
|