A Pokémon memory card game – try to select all twelve cards without repeating yourself! If you select the same card twice, it's game over and you'll have the option to play again.
Click here to view the live site!
- Head to the live site on any device (mobile, tablet, or desktop – it doesn't matter)
- Click on each Pokémon card once (and only once!)
- If you're on desktop, enjoy the dynamic card animations as you hover over and select them. Nice!
- Try to select all twelve cards without any duplications, or else you'll have to start over
- Once you've caught all twelve, you win!
- Click on the
?icon if you need to review the instructions - Click on the sound icon to enjoy some music while you play. Click on it again to pause the music.
- Play again as many times as you like! Each time, twelve Pokémon of the original 151 are randomly selected for you. So you can enjoy the game's replay value not knowing what will come up next!
gameplay.mp4
This project was built in order to implement the React concepts I've learned thus far, including: components, JSX, keys, props, state, and effects. The main goal was to use hooks to manage and utilize state while fetching and using data from an external API.
I additionally decided to have even more fun with side effects and add some lively animations to the cards (using JavaScript and CSS in tandem), as shown in the video above. I has quite happy with the results and learned quite a bit. See the code at src/components/Card.jsx.
- JavaScript
- CSS
- HTML
- React
- Vite – for project scaffolding and development
- Git (obviously)
- Pokémon data: PokéAPI
- International Pokémon logo: Wikipedia Commons
- Pokémon card background: AtomicmonkeyTCG on DeviantArt
- Landscape background: Mizudokei on DeviantArt
- Background music: GlitchxCity
- Poké Ball favicon: Wikipedia Commons
