Memória Autoglass - JavaScript Memory Card Game

This project is a memory card game developed using HTML, CSS, and JavaScript, where the user has to find pairs of matching cards within a time limit. The theme of the game is centered around Autoglass products, making it both an engaging challenge and a brand promotional tool.

Table of Contents

• Features

• How to Play

• Screens

• Technologies Used

• Setup and Installation

• Contributing

• License

Features

This memory game comes with several interactive features:

• Home Screen: The user is greeted with a visually appealing home screen containing game instructions and a "Start the Game" button.

• Card Flipping and Timer: Upon starting the game, the cards are briefly shown face-up before flipping over, with a 1-minute countdown timer beginning simultaneously.

• Dynamic Feedback: The game provides feedback based on the user's performance:

• A Timeout Screen if the player fails to complete the game in time.

• A Win Screen if the player successfully matches all 4 pairs within the time limit.

• Restart and Home Buttons: Options to restart the game or return to the home screen are available on both win and timeout screens.

How to Play

1. Press the Start the Game button on the home screen.

2. The game will display a grid of cards, face-up, for 5 seconds.

3. The cards will flip face-down, and a 1-minute timer will begin.

4. Click on any two cards to flip them over:

• If they match, the cards will remain face-up.

• If they don't match, they will flip back face-down.

5. The objective is to find 4 pairs of matching cards before the time runs out.

6. If you win, you will see the Win Screen, and if time runs out, the Timeout Screen will be displayed.

Screens

1. Home Screen:

• Welcome message, basic game instructions, and a "Start the Game" button.

2. Game Screen:

• The grid of cards is displayed along with a countdown timer.

3. Timeout Screen:

• Displays when the time runs out, encouraging the user to try again.

4. Win Screen:

• Displays when the user successfully matches all pairs, congratulating them on their win.

Technologies Used

• HTML5: Markup structure for the game interface.

• CSS3: For styling and responsive design. Includes custom fonts like Poppins and animation effects.

• JavaScript: Core game logic, including card flipping, win/lose conditions, and timer functionality.

Setup and Installation

To run the game locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/mmonari/memory-game.git

2. Open the project:

• Navigate to the project folder and open the index.html file in your preferred browser.
• Enjoy the game: Test your memory skills and try to beat the countdown timer!