This was my second JavaScript project implemented in the Driven Education bootcamp, where HTML is dynamically fed with JS. It was the implementation of the Parrot Card Game, a themed memory game with randomness, effects and transition, responsiveness and dancing parrots!
- User can choose the number of pair cards
- Cards put randomly on the table
- CSS animations for turning the cards
- Time counter
- You can restart the game after finishing it, choosing another number of pairs
-
GENERAL
- Do not use any library to implement this project (jQuery, lodash, react, etc), or other languages that compile to JS (TypeScript, ELM, etc), only pure JavaScript.
- The project must be developed using Git and GitHub, in a public repository.
- For each requirement implemented make a commit with a descriptive message of what you have evolved.
-
LAYOUT
- Apply layout for desktop and mobile
-
DISTRIBUTION OF CARDS
- When to enter the game, the user will be asked how many cards he wants to play with (use
prompt
) - The user can only enter even numbers in the
prompt
, from 4 to 14. Any number that escapes this rule should not be accepted. In the case of invalid numbers, theprompt
must be repeated, until the user enters a valid number. - After entering a valid number of cards, the game must insert the cards face down on the page so that the distribution is random
- When to enter the game, the user will be asked how many cards he wants to play with (use
-
CLICK ON CARD
- When clicking on a card, it must be turned over
- If it is the first card of the pair, it must remain face up until the user chooses the second card
- In case it is the second face up card, there are 2 situations:
- If it is the same as the first card, the user got it right and both must now be face up until the end of the game
- If it is a different card than the first card turned over, the user made a mistake. In this case, the game must wait 1 second and then turn the two cards face down again.
-
END OF THE GAME
- When the user has finished turning over all the cards correctly, an
alert
should be displayed with the message "You won in X moves!" where X is the number of times the user turned a card in the game.
- When the user has finished turning over all the cards correctly, an
-
BONUS
- Place a timer at the top right of the screen, counting how many seconds have passed since the start of the game. At the end, inform the number of seconds in the victory message.
- At the end of the game, ask with a
prompt
if the user would like to restart the game. If he answers yes, start the game again by asking the number of cards.