Hamzad Game

Live Demo

About The Project:

A simple and interactive Flip Card Match Game built with Nuxt 3 and Tailwind CSS. Test your memory and enjoy matching pairs while exploring clean and efficient front-end design.

Features

• Game Mechanics:
  • Flip cards to reveal their contents.
  • Match two cards to score points.
  • Win by matching all pairs within the allotted time.
• Timer and Scoring:
  • Countdown timer for an extra challenge.
  • Scoring system to keep track of performance.
• Dark Mode:
  • Seamless support for light and dark mode using Tailwind CSS.
• Boost Item:
  • Gain additional moves or time using boost items.
  • Players can earn 4 extra moves or 20 additional seconds when using a boost.
• Challenges:
  • Choose between two types of challenges: Emoji or Image themes.
• Responsive Design:
  • Built with Tailwind CSS for a mobile-first, responsive experience.
• Reusable Components:
  • Modal for welcome messages or other interactions.
  • Splash screen for a polished app startup.
• Customizations:
  • Easily adjust game configurations like grid size, themes, and timer duration.

How to Play

1. Click on any card to flip it.
2. Try to find and match pairs of cards.
3. Use the boost item strategically to earn extra moves or additional seconds.
4. Choose your preferred challenge: Emoji or Image.
5. Complete the game before the timer runs out!

Technologies Used

• Framework: Nuxt 3
• Styling: Tailwind CSS
• Language: JavaScript/TypeScript

Installation

Follow these steps to set up and run the project locally:

Prerequisites

Make sure you have the following software installed on your machine:

• Node.js (version 20 or later)
• npm (Node Package Manager) or Yarn

Step 1: Clone the Repository

git clone https://github.com/Amirmahdi-Kaheh/HamzadGame.git

Step 2: Clone the Repository

cd HamzadGame

Step 3: Install Dependencies

# If you're using npm
npm install

# If you're using Yarn (recommended)
yarn install

Step 4: Configure Environment Variables

Create a .env file in the root directory of the project and define any necessary environment variables. You can use the .env.example file as a template.

Step 5: Build and Run the Project

Development Mode
To run the project in development mode:

#If you're using npm
npm run dev

#If you're using Yarn
yarn dev

The application will be accessible at http://localhost:8080.

Production Mode
To run the project in production mode:

#If you're using npm
npm run build
npm run preview

#If you're using Yarn
yarn build
yarn preview

The application will be accessible at http://localhost:8080.

Enhancements (Future Scope)

• Dynamic Difficulty: Allow users to select difficulty levels.
• Leaderboard: Implement a leaderboard to display top scores.
• Sound Effects: Add sounds for card flips and matches.
• Ts full support: Add typescript full support.
• Vitest unit testing: Add unit test to project.

Resources

Here are some additional resources that you may find helpful:

• Nuxt.js Documentation - Official documentation for Nuxt.

• Vue.js Documentation - Official documentation for Vuejs.

• Tailwind CSS Documentation - Official documentation for Tailwind CSS.

  You can refer to these resources to gain a deeper understanding of the frameworks, libraries, and APIs used in this project.

Contact Information or Support

For any questions, feedback, or support requests, please feel free to contact me:

• Email: [email protected]
• GitHub Issues: Project Issues

I'll appreciate your feedback and will do my best to respond in a timely manner.

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this project in accordance with the terms of the license. Please see the LICENSE file for more details.