Welcome to the Card Matching Game, an exciting and interactive browser-based game where you test your luck and score points by matching cards based on their rank, suit, or color. This project was built using React, styled with CSS, and offers an intuitive, responsive design.
- Dynamic Gameplay: Draw cards, and score points for matching rank, suit, or color.
- Deck Shuffling: Cards automatically shuffle when the deck runs out.
- Visual Appeal: Custom card designs (from Figma, background images, and responsive layout for a smooth user experience.
- Live Feedback: Real-time updates on matches, scores, and game status.
- Cooldown Mechanism: Prevents spamming the draw button for smoother gameplay.
- Start the Game: Open the app in your browser.
- Draw Cards: Click the Draw Cards button to reveal two cards.
- Score Points:
- Match cards by their rank, suit, or color to earn points.
- Shuffle the Deck: Click the Shuffle button to reshuffle the deck if you’d like.
- Restart Anytime: Use the Restart button to reset the game and score.
- Frontend: React, TypeScript
- Styling: CSS (with Bootstrap)
- Version Control: Git and GitHub
To run the game locally on your machine:
- Clone the Repository:
git clone https://github.com/RayanBatada/card-matching-game.git cd card-matching-game
- Card designs sourced from https://www.figma.com/design/eq8xKZ6L5DdFUdyK2DtCsL/Classic-Playing-Cards-(Community)?node-id=1-49546&p=f&t=1OFXfDSI3r0axiiW-0.
- Background image inspired by casino table designs.