Memory Cards Game is a fun and interactive web-based game designed for anyone looking to improve their memory skills. By matching pairs of cards, players can challange themselves and enhance their concentration while enjoying an engaging experience. The game consists of 18 cards (9 pairs). Before starting, players can read the rules by clicking the "How to Play" button.
Players have the option to start the game by clicking the "Start" button or simply flipping any card. Once the first pair of cards is clicked, a timer begins, and moves are tracked. Players can pause the game or restart it at any time, making it easy to take breaks and try again.
-
- As a player, I want to read the game rules.
- As a player, I want to start a new game and pause at any time.
- As a player, I want to click on card to easily flip it, to see what image is on the other side.
- As a player, I want to match two cards, to remove them from the board.
- As a player, I want to restart the game at any time, so I can try again with a fresh start.
- As a player I want to see a congratulatory message when I match all the cards, so I know I have completed the game, with tracked moves and time.
- As a player, I want to see a game over message when I exceed the time limit, so that I know the game has ended.
-
Title with logo and How To Play button
- By clicking this button user can open and read the game rules.
- Icon with Instructions can be easily closed by clicking anywhere on the screen or on the close button.
-
Home Page
- The landing page features a clean and simple design including a logo, the game title, and 18 unflipped cards arranged in a grid. Player can interact with the game using four buttons: "How To Play", "Start", "Pause" and "Reset".
-
Control Panel
- The game includes a control panel with three buttons:"Start", "Pause" and "Reset". Additionally, the panel displays the recorded number of moves and elapsed time during gameplay.
-
Winner Icon
- When the player wins, the winner icon appears, displaying the tracked time and number of moves along with a celebratory confetti animation.
-
Game Over Icon
- If the player exceeds the time limit of 100 seconds, a game over icon appears, signaling the end of the game.
- Sound effect.
- Introduce background music to make the experience more immersive.
- Multiple difficulty levels.
- Add different difficulty modes with varying grid size.
- Themes.
- Allow players to choose from different card themes (sports, fruits).
- Progressive gameplay.
- Add levels, where the number of cards grows.
-
Layout:
- The game features are simple, grid-based with 18 cards, unflipped at the start of the game.
-
Color:
- The game uses a pink, purple, and blue shades promoting positive atmosphere.
-
Title:
- "Yeseva" font family from Google Fonts, is chosen to create the title, and rules for this game.
-
Logo and cards images:
- Icons from Flaticon are used to create both, the game logo, and the images on the cards.
- Git:
- GitHub:
- Flaticon Images for cards, logo and favicon.
- Pattern Monstera Crads background.
- Figma:
- Favicon:
- Confetti
- Google Fonts:
- Chrome dev tools to troubleshoot, test and check responsiveness of features.
- Testing completed on the below browser:
- Chrome
- DuckDuckGo
- Edge
- FireFox
| Test | Steps | Expected Results | Actual Results | Pass/Fail | Comments | |
|---|---|---|---|---|---|---|
| 1 | Check 'How to play' button | Click 'How to play' button | Game instructions should be displayed | Instructions displayed correctly | Pass | |
| 2 | Check if game starts correctly | Click the 'Start' button | Game starts and timer begins | Game started, timer began correctly | Pass | |
| 3 | Verify image load on cards | Click the card to flip | Images should appear on the flipped cards | Images failed to load due to json incorrect folder and path | Fail | Fixed by moving data folder with cards.json file into assets folder and correcting the path in cards.json file. |
| 4 | Test card flipping | Flip any two cards | The two cards should flip and show their images | Cards flipped and showed the images | Pass | |
| 5 | Test 'Pause' button | Click the 'Pause' button | Game should pause, and timer should stop | Game paused, timer stopped | Pass | |
| 6 | Exceed time limit | Start the game. Let the timer exceed 100s | Game Over' icon should appear | Game Over' icon appeared after 100 seconds | Pass | |
| 7 | Winning conditions | Match all the pairs | A winner icon should appear along with confetti | Winner icon and confetti displayed correctly | Pass | |
| 8 | 'Restart' button | Click the 'Restart' button | Game should restart, all cards unflipped, timer and moves restart | Game restarted and cards returned to original state | Pass |
-
Images not loading with URL.
- In earlier versions of the project, images for the cards were loaded from the a json file. However, after deploying my project, I have noticed, that cards appear blank when flipped. The images failed to load.
-
Solution.
- To fix this bug, I verified the path in json file and ensure was correct.
- I have moved data folder with json file into assets folder and changed the path in json file.
- No unfixed bugs.
- The site was developed using Gitpod editor and pushed to GitHub, to the remote repository memory-card-game.
- Git commands were utilized to push the code to the repository.
- This website was deployed to GitHub Pages with the following steps:
- Navigate to the repository on GitHub
- Go to the settings tab in repository
- Scroll down to the "Pages" section
- Select the branch
- Under "Source" select the branch to deploy ('main')
- Save the settings
- Link to the website: Memory Cards Game
- Go to the https://magda-r-bit.github.io/memory-card-game/ repository on GitHub
- Click on the Code button located above the project file
- Click on HTTPS and copy the repository link
- Open the IDE and paste the copied git url into the IDE terminal
- Project is created as a local clone
- Special Thanks:
- Spencer Barriball- For your mentorship. Your insights and advices were crucial to the success of this project.
- JavaScript Academy
- CodeCreative
- CodingNepal
- PortEXE
- w3schools Modal Box for rules icon.
- stackoverflow Used to fix the bug.
- Louibens Used to create README file structure.