Sailor Moon Memory Game
A game that tests the user's memory by displaying a series of photos and shuffles the images after each click - with each click affecting the state of application.
Using React.js, the page renders a series of images to the DOM. This initial render initializes the DOM, setting the state of several elements on the page (top score and score). With each click, the user affects the state by clicking an image and sets a booleans value of "clicked" to true. If the user clicks on the same image twice (on an image that a true value), the score is reset. If the user clicks on all of the images, avoiding clicking on the same image twice, then they will win the game. Each attempt will check to see if the user's current score is greater than that of the previous top score; if the current score is greater, the top score will be updated to reflect the new top score.
- HTML
- CSS
- Bootstrap
- JavaScript
- React.jss