#MemoryGame
I built this memory card game as a fun and interactive way to challenge the mind and improve memory skills. The concept of the game is simple yet engaging, making it a great pastime for people of all ages. This project allowed me to apply and showcase my skills in JavaScript, HTML, and CSS. It was a great opportunity for me to experiment with different techniques and libraries, and to learn more about Javascript and user experience design.
- Index – Table of Contents
- User Experience (UX)
- Features
- Design
- Technologies Used
- Testing
- Deployment
- Credits
- Bugs
- Unfixed bugs
- Acknowledgements
-
-
- As a first time visitor, I want to easily understand how I to play the game.
- As a first time visitor, I want to be able to easily reset the game.
- As a first time visitor, I want to be able to easily start the game.
- As a first time visitor, I want to be able to easily find how I can get in contact with the business owner.
- As a returning visitor, I want to be able to send a quick feedback to the business owner.
- As a returning visitor, I want to be able to remember how I can play the game.
-
-
As part of the the memory card game, start game button is part of the gaming interface. It helps users to start the game at any time.
-
When clicked, it instantly clears the current game progress and starts a new game. This means all the cards are shuffled and placed face down again, and the score, if applicable, is reset to its initial state.
-
The memory card game is set up on a grid of 4x4, making a total of 16 cards. Each card is a tile that the player can flip by clicking on it. The cards are arranged randomly on the grid at the start of each game. There are 8 pairs of matching cards, and each pair has a unique design. The challenge for the player is to remember the locations of each pair as they flip the cards. When a card is clicked, it flips over to reveal its design. The goal of the game is to find all 8 pairs by remembering where each card is located. When the player flips over two cards with the same design in succession, it’s a match, and those cards remain face up. If the cards don’t match, they flip back over.
-
The “How to Play” button is designed to help players understand the rules and objectives of the memory card game. When this button is clicked, a pop-up window appears on the screen with detailed instructions on how to play the game.
-
A contact form can be found on the contact page. I have included the following required fields: name, email address, message/feedback for the developer and the send button which creates a post to EmailJs.
-
Emailjs has been integrated into the contact form. After the post response is received, a message is displayed to the user to confirm that the email has been sent.
-
After the player finishes the game, an alert is shown to the user.
-
If a user is trying to access a nonexistent page, they will be redirected to the home page automatically in 10 seconds.
- As part of designing the site I decided to use orange, red and black as main colours. The pallete has been generated using coolors.co.
-
- Google Fonts were used to import Roboto into style.css
-
- Home Page
Home page desktop
Home page mobile - How To Play
How To Play Desktop
How to Play Mobile - Contact Page
Contact page desktop
Contact page mobile
- Home Page
-
- Google Fonts: was used to import the 'Roboto' font into the style.css file
- Git: was used for version control by utilising VSCode terminal to commit to Git and Push to GitHub.
- GitHub: was used as the repository for the projects code after being pushed from Git.
- Visual Studio Code was used as IDE editor.
- Balsamiq: was used to create the wireframes.
- EmailJs: was used to be able to send messages through contact form.
-
For testing please refer to the TESTING.md
-
- In the GitHub repository, navigate to the Settings tab, then choose Pages from the left hand menu
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment
- Any changes pushed to the master branch will take effect on the live project
-
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository: "git clone https://github.com/mariusmilitaru32/MemoryGame.git".
-
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
- CodeInstitute for the EmailJs code
- CodePen for the how to play pop up window and contact form
- First bug discovered in the building process was when the game was finished the timmer was not stopped. To fix this bug I had to add the global method "clearInterval(timerInterval);" to the gameFinished function.
- The second bug that was discovered involved the cards being clickable even when the game had not started. To address this issue, I created a boolean variable called 'gameStarted.' When the start button is clicked, the 'startGame()' function sets 'gameStarted' to true. The 'onCardClick()' function checks if 'gameStarted' is true before allowing the cards to flip.
- There are not any bugs left that I am aware of.
- I would like to thank Codeinstitute slack community for helping me during my studies and project creation.