Do you memba is a King of the Hill themed twist on the classic card guessing game where players try to pick 12 cards without repeating the same card twice. The player has to click through all 12 cards without selecting the same card twice. Clicking on a previously selected card will reset the game. This game is built using TypeScript, React,Tailwind CSS, and Framer-Motion, making it a fun and interactive way to play the game online.
- Intuitive user interface with React components.
- Modern design with smooth animations.
- Stylish and responsive design using Tailwind CSS.
- Sleek slider for viewing cards on mobile screens.
- Adding multiple card decks for the user to select from. Ex:if the user chooses the pokemon deck, the cards will display 12 pokemons.
- Adding a backend to create a global leaderboard.
- After creating multiple decks, allowing the user to continue the game by switching decks and combining the scores to get a new high score thats more than 12. Example: By playing 3 different decks, the max possible score for a player is 36. The leaderboard will show the highscore + number of decks correctly won!
Make sure you have Node.js and npm installed on your system.
- Clone this repository:
git clone https://github.com/DustyDogCodex/do-you-memba.git - Navigate to the project directory:
cd do-you-memba - Install dependencies:
npm install - Start the development server:
npm run dev
Since this project was made with Vite, you can find your dev server on http://localhost:5173/
- Open the game in your web browser.
- Click on any card to start the game.
- Try and click 12 cards without clicking the same one twice or the game restarts
- If you reach a score of 12, you'll see a victory message.
- Start a new game by refreshing your window or by clicking restart button after you win.
You can customize this game by modifying the KingsOfTheHill array in App.tsx, allowing you to change the theme of the game by adding newer images. You can also change the design using Tailwind CSS. Check the source code and configuration files for more details on how to do this.
- This Hangman game was created with ❤️ by Varun Malaviya.
- Special thanks to the creators of TypeScript, React, Framer-Motion and Tailwind CSS for their amazing tools.