This page has been created for the needs of my second milestone project as a Full Stack software developer student of the Code Institute.
This game is meant to be fun, but also develop your memory skills at the same time. Mostly intended for children, but people of all ages can play it. More advanced players can start at more difficult levels, and enjoy themselves while giving their memory a little bit of a workout.
The following user stories have been identified:
- As a user, I want the home screen to be visually appealing, making me want to try the game.
- As a user, I want to be able to start the game easily.
- As a user, I want to be able to choose a difficulty level.
- As a user, I want to be provided with instructions on how to play the game.
- As a user, I want to be able to restart the game without going back to the home page.
- As a user, I want to know if I lose or win the game.
- As a user, I want to have fun.
Back to Top
-
Section "CHOOSE GAME LEVEL" where you can pick a level of difficulty. There are three levels: "EASY", "MEDIUM" and "HARD". All of them will take you to a different page where you can start the game after clicking on "CLICK TO PLAY" or "BACK TO CHOOSE GAME LEVEL" to go back and pick a different level.
-
Section "How To Play" will toggle after clicking on the instructions.
After clicking "CLICK TO PLAY" the game starts. You have the option to go back to "CHOOSE GAME LEVEL"by clicking the button "BACK" or "RESET" to start from the beginning. Every page has two music buttons: "ON" and "OFF".
Back to Top
The wireframes were made using Moqups
Back to Top
- HTML - standard language used to create this page.
- CSS - standard language that describes the style of HTML.
- Javascript - standard language for game functions.
- Bootstrap CDN - used as the core structuring layout for the application, ensuring mobile-first design and screen size fluidity.
- Github - used to host the repository.
- JQuery - used to simplify DOM manipulation.
- Google Fonts - to style the website fonts.
The project was tested on development tools in Google Chrome and the responsiveness of mobile devices and Ipads was also tested.
- Moto G4
- Galaxy S5
- Pixel 2
- Pixel 2XL
- Iphone 5/SE
- Iphone 6/7/8
- Iphone 6/7/8Plus
- IphoneX
- Ipad
- Ipad Pro
- Surface Duo
- Galaxy Fold
The first of the testing steps was on W3C Markup Validation and W3C CSS validation with no errors found.
The second testing step was http://ami.responsivedesign.is/, which has been used to see how the site performs on different devices and their viewports. All pages, links, icons performed as expected on all devices. I also used it to create the all-devices.jpg at the top of this Readme file.
The third step was testing by the Slack community, my mentor from the Code Institute and my friends and family.
Testing consists of finding any errors that could reveal incorrect operation of the website during its use. The website was also tested on private mobile devices like Iphone 7, Samsung A20 and Ipad 7.
All problems related to the functioning of the site have been resolved.
Back to Top
My website is hosted on GitHub Pages, follow the instructions:
GitHub Pages Navigate to my Github repository - https://github.com/Maras00/MP2 Click on the settings tab at the top of the page. Scroll down to the GitHub Pages section. Change the source to master branch. After selecting master branch the page will refresh. Scroll down to the GitHub Pages section and a green box saying "your site is published at" will appear. Click the link to go to the published website.
You can view the deployed website here - https://maras00.github.io/MP2/
Git Clone Navigate to my Github repository - https://github.com/Maras00/MP2 Click the green drop down that says clone or download. To clone with HTTPS copy the URL in the box. https://github.com/Maras00/MP2.git Open up your preferred IDE (Integrated Development Environment) Change the directory to the location you want the clone to be made. Type git clone and then paste the copied URL from step 3. Press Enter and your local clone will be created.
Back to Top
- The game uses the Fisher-Yates shuffle to shuffle the cards.
- The images for game cards were copied from Google Gallery
- The image on Home Page is from my own gallery.
- The sounds were download from Sound1,Sound2
- Music was downloaded from Music
- I received inspiration and help for this project from my mentor and Slack community.
- I received inspiration for this project from Mix-Or-Match tutorial and Memory Card Game tutorial