Trying to create a simple card matching game.
The idea is if you select two different cards in this game, they will flip back and you gain a turned used. If the two cards are the same they stay flipped over, you gain a turn used as well as a point.
However, I am not sure if my code is reading or understanding if the cards are the same or not.
Here is my code:
// Set 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' }
];
// Function to restart the game
const restartGame = () => {
const toggledCards = document.querySelectorAll('.card.toggled');
toggledCards.forEach((card) => {
card.classList.remove('toggled');
});
// Shuffle the imagesLinkArray
imagesLinkArray.sort(() => Math.random() - 0.5);
// Reset game state
toggledCardsArray = [];
move = 0;
winCount = 0;
movesDisplay.innerText = `Turn(s): ${move}`;
// Update 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;
});
};
// Add event listener to restart button
restart.addEventListener('click', restartGame);
// Function to handle card clicks
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener('click', function () {
// If the card is already flipped or two cards are already in the array, return
if (this.classList.contains('toggled') || toggledCardsArray.length === 2) return;
// Add 'toggled' class and add to toggledCardsArray
this.classList.add('toggled');
toggledCardsArray.push(this);
// Check if two cards are flipped
if (toggledCardsArray.length === 2) {
let firstCardSrc = toggledCardsArray[0].querySelector('.card-img')?.src;
let secondCardSrc = toggledCardsArray[1].querySelector('.card-img')?.src;
// If cards match
if (firstCardSrc === secondCardSrc) {
winCount++;
toggledCardsArray = []; // Clear the array for the next pair
} else {
// If cards do not match, flip them back after a delay
setTimeout(() => {
toggledCardsArray.forEach((card) => {
card.classList.remove('toggled');
});
toggledCardsArray = []; // Reset the array
}, 500);
}
// Increment move count and update display
move++;
movesDisplay.innerText = `Turn(s): ${move}`;
// Check if the player has won
if (winCount === 6) {
setTimeout(() => {
alert(`Congratulations!!! You won the game in ${move} moves.`);
}, 300);
}
}
I have tried to dive deep into Geek4Geeks, since it was following their game similar game that helped me build yet their code and mine don’t produce the same effect when cards are flipped.