Discus Implementing Game Of Memory

Discus Implementing Game Of Memory
1. The game is implemented on codepen.io or jsfiddle.net where a link can be shared. For example, you may use https://jsfiddle.net/boilerplate/react-jsx as a starting point.
2. It is a single-player game.
3. You may use any popular utility libraries and choose to use JavaScript or TypeScript.
4. The game board is always square (N x N) where N is some hard coded value you can pick and
N%2 = 0.
5. The game board is composed of randomly generated pairs.
Discus Implementing Game Of Memory
6. Render the game board in HTML with React.js.
7. The board should be a grid of squares.
8. The grid line width should be 2px (device-independent-pixels).
9. Use UTF-8 characters for the card images. 🌀 () through 🗿 () work well.
10. All cards start “face-down”, displaying a placeholder UTF-8 character of your choosing.
11. The game starts as soon as the page loads (codepen.io) or after clicking “Run” (jsfiddle.net)
12. Clicking on a card that is “face-down” will display the card’s UTF-8 character, replacing the “face-
down” character.
Discus Implementing Game Of Memory
13. At most, two cards can be visible (face-up) at the same time.
14. If two visible cards do not match, fill the grid squares containing the two cards with red.
15. If two visible cards match, fill the grid squares containing the two cards with a color other than
red.
Discus Implementing Game Of Memory
16. Display the background color change for the two cards for two seconds.
17. If the two cards matched, remove the cards and display empty squares.
18. When removing the card background colors, if the cards did not match, change the squares back
to the “face-down” characters.
19. When removing the card background colors, if the cards did match, remove the characters,
leaving empty squares.
20. When all matches are found, change the entire board to the color used when a match was
found.
21. Meeting the requirements is all that is necessary, but do fix bugs that make the game
unplayable.