https://github.com/gregolive/memory-game

楽しく脳トレしよう
https://github.com/gregolive/memory-game

javascript react

Last synced: 18 days ago
JSON representation

楽しく脳トレしよう

• Host: GitHub
• URL: https://github.com/gregolive/memory-game
• Owner: gregolive
• Created: 2022-03-28T10:26:16.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-29T15:24:51.000Z (almost 3 years ago)
• Last Synced: 2023-07-25T07:27:39.460Z (over 1 year ago)
• Topics: javascript, react
• Language: JavaScript
• Homepage: https://gregolive.github.io/memory-game
• Size: 1.43 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Memory Game

Try your best not to click the same card twice in this brain training memory game.

[Live demo](https://gregolive.github.io/memory-game/) 👈

## Functionality

- On startup players are presented with a popup modal with the game instrucations and begin playing by clicking the start button

- The gameboard contains 12 cards out of a pool of 22 total cards (containg a photo and the name of a character from the show ちびまる子ちゃん)

- Players are awarded a point for every consectutive card clicked, but their score is reset if they click a card twice

- A player's best score is saved in their browser using Javascript's localStorage

- The app features functional components with hooks used for saving component state and perform side effects (fetching/persisting best scores and alerts)

## Reflection

Using React functional components rather than class components in this project helped me to understand why many developers have come to prefer functional components after the introduction of hooks. In my opinion, it is easier to write succient components with the use of functions and using the useEffect() hook is more intuitive than the various lifecycle methods from class components.

## Screenshot