Game | Devpost

What made me do this project

I have done this project as a part of Udacity Front-end Developer Nanodegree. In this hackathon period, enhanced my project in terms of UI and responsiveness(With a food theme😋).

Steps that I have followed in building this project

First, I have downloaded the scratch project, then unzipped the files and opened the index.html file in the Chrome browser to take a look at the static view of the game.

Scratch Project Link : [https://github.com/udacity/fend-project-memory-game]

Initially, two cards are made matched and a card opened. So, I have removed the required classes of those cards in index.html in order to make them close, that is, to their initial view.
Then, I have written the required code for getting the game window view in "index.html" and added styles to them in the "app.css" file.
Next, I have written the logic required for the game in the "app.js" file.
In the app.js file, first I have declared the variables required and used "DOM selectors" to get HTML elements by their class names.
Then, I have added an event listener to those elements if required.
By using a "for loop", I have added event listeners to all the 16 cards in order to make them flip when clicked.
I have added sounds to the game in order to make it effective, so, created objects to the "Audio" class.
I have written a condition, that is, if the count of clicked cards is 2, then I have to invoke the compare() function.

10.In compare() function, I have used "if-else". If the two cards matched, then added the classes "match, animated, wobble" and removed the classes "open, show" for the card's class list and incremented match_cnt by 1.

If the two clicked cards do not match, then I have removed the classes "open, show, disabled" from the class list.
Then, I have emptied the clicked cards array.
I have used one more "if condition", that is, when match_cnt is 8, then I have made the timer to be stopped using "clearInterval" and the final star rating is stored in a variable. And a pop-up window is made to be displayed which contains the time is taken, final star rating, a number of moves along with a close button and play again button.
Finally, I have written code to shuffle the cards in the shuffle() function. The functions that I have defined in the app.js file are:

displaycard(): This function is invoked when a card is clicked. The card is made to be flipped, when clicked, in this function.
compare(): This function is invoked when the length of clickedcards is 2.This performs the comparison of two clicked cards.
time(): This function is invoked when the first card is clicked and when the resume button is clicked. This holds the values of min and sec.
mcount():This function is invoked in compare() function. This holds the count of moves.
restart_Game(): This function is invoked when the restart button is clicked.
pause_Game(): This function is invoked when clicked on the pause button.
resume_Game(): This function is invoked when clicked on the resume button.
shuffle(array): This function is invoked once the window is loaded or reloaded. This function performs the shuffling of cards.

Game Criteria

The criteria that are followed in building this game is:

A deck of 16 cards with 8 different symbols(2 cards each) plays a vital role in this game. Initially, they are shuffled.
Player is supposed to click on the cards.
When a card is clicked, it is made to flip.
When the Player clicked on the first card, the timer starts.
A comparison of two cards by the Player is considered to be made a single move, so the count of moves will be incremented by 1(each time the player makes a comparison).
When the Player makes a comparison, if the two cards match, then they are made to be not get flipped again and the count of matches is incremented by 1.If they do not match, they are flipped again.
A star rating is given to the player's performance based on the number of moves he/she made to win the game.
A score panel is displayed above the deck of cards which provide the current status of star rating, time, and a number of moves along with pause and restart buttons of game.
When the Player match all the cards, that is, the count of matches is equal to 8(as there are 16 cards), then the Player is considered to be won the game. Then, a window is displayed in which star rating, time is taken, count of moves along with a close button, a play again button are provided.

How to play?

This game does not have any rules to play.
The Player has to click on a card and then one more card to make a comparison, this should be done until all the cards are matched.
The Player has to try to complete the game within as few as possible moves so that he/she can get a good star rating for his/her performance.
The Player can pause the game by clicking on the "pause" button.
The Player can resume the game by clicking on the "resume" button.
The Player can restart the game by clicking on the "restart" button.
The Player can play again once he/she won the game by clicking on the "Play again" button.