Reference no: EM132849552
Implement the game of memory.
1. The game is implemented on codepen.io or jsfiddle.net where a link can be shared.
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.
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.
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.
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.