A memory card game built with React and Vite. The objective of the game is to click on as many unique cards as possible without clicking the same card twice.
This memory game presents players with a grid of Pokémon character cards. The player must click on a card, and the game will track which cards have been clicked. If a player clicks on a card they have already clicked, their score resets to zero. The game keeps track of the current and highest scores.
- Description
- Screenshot
- Preview
- Features and Implementation
- Installation
- Usage
- Tech Stack
- License
- Contact Information
You can view a live preview of the page here.
-
Card Rendering:
- Each card displays an image and name of a Pokémon character.
- Components:
Card.jsx,CardContainer.jsx.
-
Score Tracking:
- The current score and high score are displayed.
- Component:
Score.jsx.
-
Dynamic Data Fetching:
- Fetches Pokémon data from an external API.
- File:
fetchData.js.
-
Game Logic:
- Tracks clicked cards and updates scores.
- File:
App.jsx.
-
Styling:
- Responsive design using CSS Grid.
- Files:
App.css,CardContainer.css,index.css.
- Clone the repository:
git clone https://github.com/sourdoughbredd/memory-game.git
- Navigate to the project directory:
cd memory-game - Install dependencies:
npm install
- Start the dev server:
npm run dev
To play the game, open the project in your browser after starting the dev server. Click on the cards to reveal Pokémon characters. Try to click on as many unique cards as possible without clicking the same card twice. The game keeps track of your current and highest scores.
- HTML
- CSS (CSS Modules)
- JavaScript
- React
- Vite
This project is licensed under the MIT License.
For any questions or suggestions, please contact Brett Bussell at bwbussell24@gmail.com.