Prototype of a simple memory game. A grid of cards will appear on the screen. The user can click a card to "flip" it over and display an image. When 2 cards of the same image are flipped over, a match is made. To win the game, find all the matching cards.
The prototype will have 2 views. A lobby view and a gameplay view.
A header in the lobby view will display the text string "Memory Game".
The lobby view will have 4 options for the size of the game. These options will be laid out as vertical buttons with a string that describes the size of the grid in the game.
Options are: 3x4, 5x2, 4x4, and 4x5
When one of the options is selected, the gameplay view opens and the game begins.
The gameplay view consists of card images laid out in a grid that matches the size of the selected grid from the lobby view.
When a card is clicked, an image appears. The image appears until another card is clicked. If the second card matches the image of the first card, a match is made and both cards continue to show their matched image. If the images do not match, the incorrect match continues to appears onscreen for 1 second, and then the images are hidden and the card back appears again.
Cards should not be actionable when their image is showing. The game continues until all cards are matched. If the user wants to exit the game, a back (previous view) button will be available in the upper left corner of the screen to exit back to the lobby. Once all cards are matched, the user can also exit the game by pressing the back button.
https://reacttraining.com/react-router/web/api/withRouter
- https://stackoverflow.com/questions/29307971/css-grid-of-squares-with-flexbox
- https://codepen.io/adg29/pen/bXMpqY
https://github.com/AaronCCWong/react-card-flip
https://semantic-ui.com/views/card.html
https://codepen.io/lenymo/pen/qozOWa
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.