bdnugget/memoatse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Memoatse

Browse Source
This commit is contained in:
bdnugget
2026-02-03 01:22:47 +01:00
parent 6b5574e3c7
commit 15b186aab0
9 changed files with 158 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
ASSets/card1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
ASSets/card2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
ASSets/card3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 359 KiB

BIN
ASSets/cardback.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
ASSets/fart.mp3 Normal file
View File

Binary file not shown.

4
README.md
View File

@ -1,2 +1,4 @@
# memoatse # Memory but with Goatse and memes
loldongs

34
css/style.css Normal file
View File

@ -0,0 +1,34 @@
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 12px;
max-width: 900px;
margin: 0 auto;
}
.container div {
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 3 / 4;
}
.container div img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media (max-width: 600px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
h1 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
}

17
index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Memoatse</title>
<link href="css/style.css" rel="stylesheet">
<script src ="js/script.js"></script>
</head>
<body>
<h1>Memoatse</h1>
<div class="container" id="cards"></div>
<script>
window.onload = ev => startGame();
</script>
</body>
</html>

104
js/script.js Normal file
View File

@ -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);
});
};