Welcome to the Memory Game! This is a fun and interactive game where your memory skills are tested as you match pairs of images.
This memory game consists of 12 boxes, each hiding an image. Your objective is to click on the boxes to reveal the images and match identical pairs. Each time you successfully match two images, you score a point. The game continues until all pairs have been matched.
-
Game Layout:
- The game board consists of 12 hidden boxes.
- Each box contains one of the 6 identical image pairs.
-
Objective:
- Your goal is to find all the matching pairs of images.
- Click two boxes at a time to reveal the images inside.
-
Matching Pairs:
- If the two images match, you score a point and the background of the selected boxes will turn green.
- If the two images do not match, the background turns red and the boxes reset.
-
Winning the Game:
- The game ends when all 6 pairs have been successfully matched.
- Keep track of the images and their positions to improve your chances!
-
Difficulty Level:
- This is the Beginner level, perfect for those just starting to practice memory games.
- HTML5 – Structuring the game content.
- CSS3 – Styling and animations to enhance the user experience.
- JavaScript – For the interactive gameplay, managing the game logic, and modal functionality.
To run the game on your local machine:
- Clone the Repository:
git clone https://github.com/0daysleft/Memory-Game.git
- Navigate to the Project Folder:
cd memory-game
Open index.html in your browser to start playing the game.-
Feel free to modify or enhance the game! You can:
-
Change the images by replacing the current images in the /images folder.
-
Adjust difficulty by modifying the number of boxes or pairs of images.
-
Style the game by customizing the CSS to change colors, fonts, or animations.
-
To develop or modify this project, ensure you have the following tools installed:
-
Text Editor (e.g., VSCode)
-
Web Browser (Chrome, Firefox, etc.)
- Open Source Community
-
Thanks to everyone who contributed to open-source projects that me helped build this game.
-
Special thanks to Ania Kubow for helpful resource and for the Wonderfull YouTube Video Tutorial.
HTML - index.html
Contains the structure of the memory game, including the game board and rules modal.
CSS - styles.css
Handles the layout, styling, and animations for the game interface.
JavaScript - scripts.js
Includes the logic for interacting with the game (such as selecting boxes, checking for matches, and updating the background colors based on correct/incorrect guesses).