Currently working on developing a straightforward card matching game.
The goal is to have two distinct cards selected in the game, they will flip back over, and you will consume a turn. If the two cards match, they will remain turned over, and you will gain both a point and use up a turn.
Yet, I am uncertain whether my code is able to determine if the cards are identical or not.
Presented below is the snippet of my code:
// Declaring global variables
const cards = document.getElementsByClassName('card');
let movesDisplay = document.querySelector('.move-counter');
let toggledCardsArray = [];
let move = 0;
let winCount = 0;
const restart = document.getElementById('restart');
const imagesLinkArray = [
{ id: 1, image: './assets/talisman1.png', newAlt: 'talisman1' },
{ id: 2, image: './assets/talisman2.png', newAlt: 'talisman2' },
{ id: 3, image: './assets/talisman3.png', newAlt: 'talisman3' },
{ id: 4, image: './assets/talisman4.png', newAlt: 'talisman4' },
{ id: 5, image: './assets/talisman5.png', newAlt: 'talisman5' },
{ id: 6, image: './assets/talisman6.png', newAlt: 'talisman6' },
{ id: 7, image: './assets/talisman1.png', newAlt: 'talisman1' },
{ id: 8, image: './assets/talisman2.png', newAlt: 'talisman2' },
{ id: 9, image: './assets/talisman3.png', newAlt: 'talisman3' },
{ id: 10, image: './assets/talisman4.png', newAlt: 'talisman4' },
{ id: 11, image: './assets/talisman5.png', newAlt: 'talisman5' },
{ id: 12, image: './assets/talisman6.png', newAlt: 'talisman6' }
];
// Restarting the game
const restartGame = () => {
const toggledCards = document.querySelectorAll('.card.toggled');
toggledCards.forEach((card) => {
card.classList.remove('toggled');
});
// Shuffling the imagesLinkArray
imagesLinkArray.sort(() => Math.random() - 0.5);
// Resetting game state
toggledCardsArray = [];
move = 0;
winCount = 0;
movesDisplay.innerText = `Turn(s): ${move}`;
// Updating card images
const allImagesSrc = document.querySelectorAll('.card-img');
allImagesSrc.forEach((el, index) => {
el.src = imagesLinkArray[index].image;
el.alt = imagesLinkArray[index].newAlt;
el.id = imagesLinkArray[index].id;
});
};
// Adding event listener to the restart button
restart.addEventListener('click', restartGame);
// Handling card clicks
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener('click', function () {
if (this.classList.contains('toggled') || toggledCardsArray.length === 2) return;
this.classList.add('toggled');
toggledCardsArray.push(this);
if (toggledCardsArray.length === 2) {
let firstCardSrc = toggledCardsArray[0].querySelector('.card-img')?.src;
let secondCardSrc = toggledCardsArray[1].querySelector('.card-img')?.src;
if (firstCardSrc === secondCardSrc) {
winCount++;
toggledCardsArray = [];
} else {
setTimeout(() => {
toggledCardsArray.forEach((card) => {
card.classList.remove('toggled');
});
toggledCardsArray = [];
}, 500);
}
move++;
movesDisplay.innerText = `Turn(s): ${move}`;
if (winCount === 6) {
setTimeout(() => {
alert(`Congratulations!!! You won the game in ${move} moves.`);
}, 300);
}
}
I have attempted to delve deep into Geek4Geeks for reference since it was inspired by a similar game from their platform. However, their code does not yield the same results as mine when handling flipped cards.