mylescarey2019 / memorypalace

React.js Front End site - Memory Game

Memory Palace

React.js memory game

Description

This React.js web page is a simply memory game where the object is to select all 16 images without selecting any twice. After each selection the board shuffles randomly and images also randomly rotate. Current Score is tracked and High Score is display and upated as appropriate.

• Front-End Technology

  • React.js, HTML, CSS, JavaScript (ES6)

Details:

Github project : Memory Palace Repository

Deployed GitHub Pages link: Memory Palace

Design Detail - React.js methodology

• components rendered include Header, Scores, Message and Game Tiles
• Score and Game Tile component resused multiple times on page
• state used for rendering current and high scores
• state used for populating image the Game Tiles and is updated when randomized each move

Demo walkthru GIF :

• Use Cases seen in demo below
  • selecting same symbol twice - loss
  • new high score
  • randomized shuffle and rotation

Screen Captures:

home page

Getting Started

Dependencies

• none -

Installing

• none necessary - use link to page deployed on GitHub pages

Executing program

• click an image and repeat
• if image clicked twice current score will change to 0 - click image to start new game

Authors

Myles Carey [email protected]

Version History

• 1.0 - Initial Release
• dev branch

License

Acknowledgments

Thanks to beta testers - my 15yo & 17yo daughters and wife