lukeduffy84 / grinch-memory-game Goto Github PK

This project is a memory game written in JavaScript, CSS and HTML. The game tests memory skills with the user aiming to match as many cards in as few attempts as possible.

User Stories:

• Be engaged with the Dr.Seuss 'Grinch' theme, esepcially for younger audiences.

• Play the game and try to match all the cards.

• Be aware of the merits and mistakes.

Business Goals:

• Make best use of the games winter theme and characters by deploying the game during on the lead up to the festive season, with the target demographic being the 11-14 years of age range.

Wireframes I used the Mockflow Pro tool in order to map out the layout of the game and to create a focal point and goal to reference as the project progressed.

• The game is based on a popular Dr.Seuss character and theme in order to motivate young people to visit the website and play the game.

• Provide a user-friendly layout and responsive design so the game is playable on any device.

• Provide a 'Reset Button' so users can easily reset the cards and play again.

• Create a Time and Flips counter seperately above the cards to allow users to keep track of their progress in the game.

• Provide user with custom Grinch cursor on the desktop version of the game.

This project was created with the following technologies:

• JQuery
  • The project uses JQuery to simplify DOM manipulation.
• Bootstrap
  • The project uses Bootstrap 4.5.0 to streamiline the sites responsivness aswell as for embedded features such as the navbar, table etc.
• Google Fonts
  • The project uses Google Fonts for text styling.
• Font-Awesome
  • The project uses Font-Awesome 4.7.0 for logos and text styling.
• MDBootstrap
  • The project uses Bootstrap 4.5.0 to streamiline the sites responsivness aswell as for embedded features
• MockflowPro
  • The project uses MockflowPro to create wireframes and mockup designs that form the basis of the project.
• JavaScritpt
  • Java Scritp: A programming language that enables web pages to become interactive.

The testing process consists of opening the game on different devices, checking there are no errors, checking responsible design, and if all programmed functions are executed correctly. Below are all the devices used for this testing process:

1. Home Page:

   1. Click on the button 'instructions' and check to see Modal appears in centre screen.
   2. Check if a click on any part of screen away from Modal to close Modal.
   3. Check if 'Close' buttton on Modal closes Modal and returns user to Home screen.
   4. Check if 'Play' buttton brings user to 'index.html' page and activates the game.

2. index.html:

   1. Click on card, make sure flip animation takes place.
   2. Try click on same card again to make sure that JavaScript prevents from reflipping already chosen card.
   3. Try and click on three cards in rapid succession to make sure game 'freezes' board to prevent such an action.
   4. Make sure that if second card is selected is wrong, both cards re-flip themselves while 'flip' counter adds 1 to scoreboard.
   5. Makfesure that if second card is selected is correct, both cards stay flipped while both the 'flip' and 'Score' counter add 1 to their respective total amounts.
   6. Clicking on the 'Reset' button will shuffle back all the cards and reset both counters.

3. Check that the game looks and runs well on both responsive windows aswell as mobile device viewports provided by the Chrome Developer tools. The game's responsiveness has also been tested on the following devices Macbook Air -Chrome Browser -Edge Browser -Firefox Browser

Windows PC -Chrome Browser -Edge Browser

This project was validate through W3 CSS validator , W3 HTML validator and JSHint.

The website has been deployed on github pages under the following url https://lukeduffy84.github.io/memory-game-real/. The page is built from a master branch from one author.

This game is completely fictional and was created by myself.

• StackOverflow
• [FreeCodeCamp] (www.freecodecamp.org)
• [Scotch.io] (www.scotch.io/how-to-build-a-memory-match-game)

• The photos, emojis and sounds used in this site are taken from a following places :

-[CleanPNG] (www.cleanpng.com) -[PNGTree] (www.pngtree.com) -[CustomCursor] (www.custom-cursor.com) -[Dev.to] (https://dev.to/fakorededamilola/create-a-memory-game-with-js-1l9j)

• I would like to say thank you to my mentor Oluwaseun Owonikoko and the Code Institute tutors in particular for support during this project.