Emoji Flipper

Project Overview

Emoji Flipper is an engaging React-based game that tests your memory and speed. Players aim to select unique cards across multiple rounds while avoiding repeats. The game leverages React hooks for state management and external APIs for fetching emojis to create a dynamic and interactive experience.

Table of Contents

• Emoji Flipper
  • Project Overview
  • Table of Contents
  • Features
  • How to Play
  • Scoring System
  • Levels
  • Technologies Used
  • Setup Instructions
  • Live Demo
  • Credits
  • License

Features

• Interactive gameplay with three difficulty levels (Easy, Medium, Hard).
• Dynamic card shuffling and randomization using an external API.
• Scoreboard to track the current score and "Best Performance" (points per second).
• Bonus points for speed-based gameplay.
• Fully responsive design for mobile and desktop users.

How to Play

Emoji Flipper is a game that tests your ability to select unique cards while avoiding repeats. Here's how to play:

1. Select a difficulty level to start the game.
2. In each round, pick one card from the options presented. Ensure it hasn’t been selected earlier in the game.
3. Complete the required number of unique selections to win the game.
4. Avoid selecting the same card twice, or the game will end!
5. Play quickly and strategically to maximize your score.

Speed and focus are your keys to success—good luck!

Scoring System

Your score is calculated based on two main components:

• Base Points: Earned for every unique card selected during a round. The number of points depends on the difficulty level.
• Bonus Points: Awarded based on the speed of your selection. The faster you choose, the higher your bonus points.

Your ultimate goal is to maximize your performance, measured as Points per Second. Keep your selections fast and unique to achieve the best score!

Levels

Choose from three difficulty levels, each offering a unique challenge:

• Easy:

  • Each round presents 4 cards to choose from.
  • Complete 5 unique selections to win the game.
  • Earn 500 base points per unique card.
  • Bonus points can reach up to 1,500 per card, depending on speed.

• Medium:

  • Each round presents 9 cards to choose from.
  • Complete 10 unique selections to win the game.
  • Earn 750 base points per unique card.
  • Bonus points can reach up to 2,000 per card, depending on speed.

• Hard:

  • Each round presents 16 cards to choose from.
  • Complete 15 unique selections to win the game.
  • Earn 1,000 base points per unique card.
  • Bonus points can reach up to 2,500 per card, depending on speed.

Be careful not to repeat any card during the game—doing so ends the game!

Technologies Used

• React: For building the user interface.
• Vite: For fast development and build processes.
• React Hooks: For state and effect management.
• API Ninja Emoji: For fetching emojis dynamically.
• Fisher-Yates Shuffle: For shuffling card data.
• React Spinners: For loading animations.
• ESLint: For code linting.
• Prettier: For consistent code formatting.

Setup Instructions

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/TonyFred-code/project-memory-card.git

2. Navigate to the project directory:

   cd emoji-flipper

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Build the project for production:

   npm run build

6. Preview the production build:

   npm run preview

Live Demo

You can view the deployed application live on Vercel: Emoji Flipper on Vercel

Credits

This project was developed as part of a course project to implement React concepts. Special thanks to the following resources:

• API Ninja Emoji: For providing emoji data for the game.

• The Odin Project: For the curriculum that guided the development of this project.

• Material Design Icons: For the icon library used in the application. Icons can be found at Material Design Icons.

• Vercel: For hosting the application.

• Sound Effects: All from Pixabay

  • Tab Change
  • Button Click
  • Settings Switcher
  • Game Over - loss
  • Game Over - win
  • Card Flip
  • Unique Card Pick

• Favicon:

  • App favicon was generated using the following graphics from Twitter Twemoji:
    • Graphics Title: 1f9e0.svg
    • Graphics Author: Copyright 2020 Twitter, Inc and other contributors (GitHub)
    • Graphics Source: Twemoji GitHub
    • Graphics License: CC-BY 4.0

License

This project is licensed under the MIT License. See the LICENSE file for more details. Let me know if you'd like further modifications! 🚀