mirror of
https://codeberg.org/JasterV/MEMORY-CARD-GAME.git
synced 2026-04-26 18:20:03 +00:00
318 lines
8.6 KiB
JavaScript
318 lines
8.6 KiB
JavaScript
let imgSrc = [
|
|
{
|
|
pairId: 0,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fclover-a.svg?v=1596056821579"
|
|
},
|
|
{
|
|
pairId: 1,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fclover-9.svg?v=1596095594108"
|
|
},
|
|
{
|
|
pairId: 2,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fclover-3.svg?v=1596095585744"
|
|
},
|
|
{
|
|
pairId: 3,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fhearts-a.svg?v=1596057450138"
|
|
},
|
|
{
|
|
pairId: 4,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fhearts-9.svg?v=1596095606413"
|
|
},
|
|
{
|
|
pairId: 5,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fdiamonds-9.svg?v=1596095602722"
|
|
},
|
|
{
|
|
pairId: 7,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fclover-6.svg?v=1596095596714"
|
|
},
|
|
{
|
|
pairId: 8,
|
|
src:
|
|
"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fdiamonds-3.svg?v=1596095587942"
|
|
}
|
|
];
|
|
|
|
let playBtn = document.getElementById("play");
|
|
let chooseUserDiv = document.querySelector(".choose-username");
|
|
let imgsGrid = document.getElementById("images-grid");
|
|
let congratsDiv = document.getElementById("congrats-container");
|
|
let looseDiv = document.getElementById("loose-container");
|
|
let playAgainBtns = document.querySelectorAll(".play-again-btn");
|
|
let modeContainer = document.getElementById("mode-container");
|
|
let hardBtn = document.getElementById("hard-btn");
|
|
let easyBtn = document.getElementById("easy-btn");
|
|
|
|
let tries = 0;
|
|
let hardMode = false;
|
|
|
|
let imgDivArray = createGridContentArray(imgSrc);
|
|
let discoveredCards = [];
|
|
let currentUser = "";
|
|
let startTime;
|
|
let scoresController = scoreBarController("user-scores");
|
|
|
|
imgDivArray.forEach(targetCard => {
|
|
targetCard.addEventListener("click", () => {
|
|
if (isFlipped(targetCard)) {
|
|
targetCard.classList.remove("flipped-cell");
|
|
|
|
if (discoveredCards.length % 2 == 0) {
|
|
discoveredCards.push(targetCard);
|
|
} else {
|
|
let lastCard = discoveredCards[discoveredCards.length - 1];
|
|
tries++;
|
|
if (areEqualCards(targetCard, lastCard)) {
|
|
discoveredCards.push(targetCard);
|
|
|
|
if (isGameEnd(discoveredCards, imgDivArray)) {
|
|
setTimeout(() => {
|
|
winGame(currentUser);
|
|
}, 300);
|
|
}
|
|
} else {
|
|
discoveredCards.pop();
|
|
setTimeout(() => {
|
|
lastCard.classList.add("flipped-cell");
|
|
targetCard.classList.add("flipped-cell");
|
|
if (hardMode) {
|
|
looseGame(currentUser);
|
|
}
|
|
}, 300);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
playBtn.addEventListener("click", goToModePage);
|
|
|
|
document.addEventListener("keydown", event => {
|
|
if (!chooseUserDiv.classList.contains("hide") && event.which === 13) {
|
|
goToModePage();
|
|
} else if (
|
|
(!looseDiv.classList.contains("hide") ||
|
|
!congratsDiv.classList.contains("hide")) &&
|
|
event.which === 13
|
|
) {
|
|
playAgain();
|
|
}
|
|
});
|
|
|
|
for (let btn of playAgainBtns) {
|
|
btn.addEventListener("click", playAgain);
|
|
}
|
|
|
|
easyBtn.addEventListener("click", () => {
|
|
hardMode = false;
|
|
startGame(currentUser);
|
|
});
|
|
|
|
hardBtn.addEventListener("click", () => {
|
|
hardMode = true;
|
|
startGame(currentUser);
|
|
});
|
|
|
|
/*--------------------------------------------------*/
|
|
/*-------------------- OBJECTS ---------------------*/
|
|
/*--------------------------------------------------*/
|
|
|
|
function scoreBarController(barId) {
|
|
let scoresBar = document.getElementById(barId);
|
|
|
|
return {
|
|
getUser(username) {
|
|
return document.querySelector(`[data-username=${username}]`);
|
|
},
|
|
|
|
hasUser(username) {
|
|
let userContainer = this.getUser(username);
|
|
return userContainer !== null;
|
|
},
|
|
|
|
createPlayingUser(username) {
|
|
if (this.hasUser(username)) {
|
|
let userContainer = this.getUser(username);
|
|
userContainer.remove();
|
|
userContainer.lastElementChild.textContent = "Currently playing...";
|
|
scoresBar.insertAdjacentElement("afterbegin", userContainer);
|
|
} else {
|
|
let userContainer = createUserScoreDiv(username);
|
|
if (scoresBar.childElementCount == 5) {
|
|
scoresBar.lastElementChild.remove();
|
|
}
|
|
scoresBar.insertAdjacentElement("afterbegin", userContainer);
|
|
}
|
|
},
|
|
|
|
setUserTime(username, seconds) {
|
|
if (this.hasUser(username)) {
|
|
let userContainer = this.getUser(username);
|
|
if (!hardMode) {
|
|
userContainer.lastElementChild.innerHTML =
|
|
`<i class="fas fa-stopwatch"></i> ${Math.floor(seconds)} seconds` +
|
|
` <i class="fas fa-mouse-pointer"></i> ${tries} tries`;
|
|
} else {
|
|
userContainer.lastElementChild.innerHTML = `<i class="fas fa-stopwatch"></i> ${Math.floor(
|
|
seconds
|
|
)} seconds (Hard Mode)`;
|
|
}
|
|
}
|
|
},
|
|
|
|
setUserLost(username) {
|
|
let userContainer = this.getUser(username);
|
|
userContainer.lastElementChild.innerHTML = `<p>Lost! - ${tries -
|
|
1} pairs in a row! </p>`;
|
|
}
|
|
};
|
|
}
|
|
|
|
function createUserScoreDiv(username) {
|
|
let container = document.createElement("div");
|
|
container.setAttribute("data-username", username);
|
|
container.innerHTML = `<h2>${username}</h2> <p>Currently playing...</p>`;
|
|
return container;
|
|
}
|
|
|
|
/*--------------------------------------------------*/
|
|
/*----------------- USEFULL FUNCTIONS --------------*/
|
|
/*--------------------------------------------------*/
|
|
|
|
function goToModePage() {
|
|
let username = document.getElementById("username").value;
|
|
if (isValidUsername(username)) {
|
|
currentUser = username.toLowerCase();
|
|
modeContainer.classList.remove("hide");
|
|
chooseUserDiv.classList.add("hide");
|
|
}
|
|
}
|
|
|
|
function playAgain() {
|
|
currentUser = "";
|
|
discoveredCards = [];
|
|
tries = 0;
|
|
unFlipCards(imgDivArray);
|
|
|
|
looseDiv.classList.add("hide");
|
|
congratsDiv.classList.add("hide");
|
|
|
|
chooseUserDiv.classList.remove("hide");
|
|
document.getElementById("username").value = "";
|
|
}
|
|
|
|
function startGame(username) {
|
|
startTime = Date.now();
|
|
scoresController.createPlayingUser(username);
|
|
|
|
shuffle(imgDivArray);
|
|
|
|
imgsGrid.innerHTML = "";
|
|
imgDivArray.forEach(img => {
|
|
imgsGrid.appendChild(img);
|
|
});
|
|
|
|
modeContainer.classList.add("hide");
|
|
imgsGrid.classList.remove("hide");
|
|
|
|
setTimeout(() => {
|
|
flipCards(imgDivArray);
|
|
}, 5000);
|
|
}
|
|
|
|
function isGameEnd(discoveredCards, cards) {
|
|
return discoveredCards.length === cards.length;
|
|
}
|
|
|
|
function winGame(username) {
|
|
let finalTimeSpan = document.getElementById("user-seconds");
|
|
let totalSeconds = (Date.now() - startTime) / 1000;
|
|
finalTimeSpan.textContent = `${Math.floor(totalSeconds)} seconds`;
|
|
|
|
scoresController.setUserTime(username, totalSeconds);
|
|
|
|
imgsGrid.classList.add("hide");
|
|
congratsDiv.classList.remove("hide");
|
|
}
|
|
|
|
function looseGame(username) {
|
|
let triesSpan = document.getElementById("tries-span");
|
|
let triesInARow = tries - 1;
|
|
scoresController.setUserLost(username);
|
|
triesSpan.textContent = triesInARow;
|
|
imgsGrid.classList.add("hide");
|
|
looseDiv.classList.remove("hide");
|
|
}
|
|
|
|
function areEqualCards(card1, card2) {
|
|
return card1.getAttribute("data-pair") === card2.getAttribute("data-pair");
|
|
}
|
|
|
|
function isValidUsername(name) {
|
|
return name !== undefined && name.trim() !== "";
|
|
}
|
|
|
|
function isFlipped(card) {
|
|
return card.classList.contains("flipped-cell");
|
|
}
|
|
|
|
function flipCards(cards) {
|
|
cards.forEach(card => card.classList.add("flipped-cell"));
|
|
}
|
|
|
|
function unFlipCards(cards) {
|
|
cards.forEach(card => card.classList.remove("flipped-cell"));
|
|
}
|
|
|
|
function createGridContentArray(imgs) {
|
|
let doubled = doubleContent(imgSrc);
|
|
return doubled.map(img => createImgDiv(img));
|
|
}
|
|
|
|
function createImgDiv(img) {
|
|
let container = document.createElement("div");
|
|
container.setAttribute("data-pair", img.pairId);
|
|
container.style.backgroundImage = `url(${img.src})`;
|
|
container.classList.add("cell");
|
|
return container;
|
|
}
|
|
|
|
function doubleContent(arr) {
|
|
return arr.concat(arr);
|
|
}
|
|
|
|
function shuffle(array) {
|
|
array.sort(() => Math.random() - 0.5);
|
|
}
|
|
|
|
// Placeholder fade
|
|
var usernameInput = document.getElementById("username");
|
|
var placeholder = document.getElementById("placeholder");
|
|
|
|
usernameInput.addEventListener("focusin", () => {
|
|
if (usernameInput.value == "") {
|
|
placeholder.style.opacity = "0";
|
|
}
|
|
});
|
|
|
|
usernameInput.addEventListener("focusout", () => {
|
|
if (usernameInput.value == "") {
|
|
placeholder.style.opacity = "1";
|
|
}
|
|
});
|
|
|
|
// Show responsive leaderboard
|
|
let scoreToggle = document.getElementById("score-toggle")
|
|
let scoreContainer = document.getElementById("score-container")
|
|
|
|
scoreToggle.addEventListener("click", () => {
|
|
scoreContainer.classList.toggle("fade-toggle")
|
|
})
|