Built a Memory Card game using JavaScript.Built a Memory Card game using HTML5, CSS3 and JavaScript. Used CSS Animation and also used Array sort method to sort the images.
-
Selecting Elements: The code starts by selecting all HTML elements with the class name "card" using the
document.querySelectorAll(".card")
method. It assigns these elements to thecards
constant. -
Variable Initialization: Two variables,
matched
,cardOne
, andcardTwo
, are initialized.matched
keeps track of how many pairs of cards have been successfully matched.cardOne
andcardTwo
will be used to temporarily store the clicked cards to compare and match. -
disableDeck Flag: The
disableDeck
variable is used to control whether user interactions (clicks on cards) should be disabled temporarily. It's set tofalse
initially. -
flipCard Function: This function is called when a card is clicked. It accepts an event object but uses destructuring to directly extract the
target
property and rename it toclickedCard
.- It checks if
cardOne
is not the same asclickedCard
and if thedisableDeck
flag is not true. - If these conditions are met, it adds the "flip" class to the clicked card, triggering a flip animation.
- If
cardOne
is not set, it setscardOne
to the clicked card and exits the function. - If
cardOne
is already set, it setscardTwo
to the clicked card, disables further clicks (disableDeck = true
), and gets the image sources of both cards. - It then calls the
matchCards
function to check if the clicked cards match.
- It checks if
-
matchCards Function: This function is called when two cards are clicked and need to be checked for a match.
- It takes two image URLs,
img1
andimg2
, as arguments. - If the images match (i.e.,
img1
is the same asimg2
), it increments thematched
counter. - If all pairs are matched (
matched
equals 8), it schedules a card shuffle after a delay of 1 second. - It removes the "click" event listeners from the matched cards, resets the
cardOne
andcardTwo
variables, and setsdisableDeck
tofalse
. - If the images don't match, it adds a "shake" animation class to both cards after a delay of 400ms.
- After another delay of 1200ms, it removes the "shake" and "flip" classes from both cards, resets
cardOne
andcardTwo
, and setsdisableDeck
tofalse
.
- It takes two image URLs,
-
shuffleCard Function: This function is responsible for shuffling and resetting the cards.
- It resets the
matched
counter and setsdisableDeck
tofalse
. - It initializes an array
arr
containing numbers from 1 to 8 in pairs (representing the different card images) and then shuffles the array randomly. - It loops through the
cards
usingforEach
and performs the following actions:- Removes the "flip" class to ensure all cards are face-down.
- Updates the
src
attribute of the card's image to match the shuffledarr
for that card. - Adds a "click" event listener to the card, connecting it to the
flipCard
function.
- It resets the
-
Initial Shuffle: The
shuffleCard
function is called initially to shuffle and set up the cards. -
Event Listeners: Finally, event listeners are attached to all cards to trigger the
flipCard
function when a card is clicked.
Before you begin, ensure you have met the following requirements:
- Git must be installed on your operating system.
To run Memory Card Game v.1.0, run this command on your git bash:
Linux and macOS:
sudo git clone https://github.com/Pranav-Jadhav09/memory-card-game-v1.git
Windows:
git clone https://github.com/Pranav-Jadhav09/memory-card-game-v1.git
MIT