THE GAME ROOM

I have decided to create a small site that holds a game of memory or matching. The first page gives a small introduction of what is happening and when you go on to the "GAME" page, the game is there to play. The game itself was made using Javasrcipt and the rest using normal HTML and CSS styling.

UX

I designed this site for someone looking to have a little fun in a short game of memory.

Features

Existing Features

• Timer to track how long it takes to finish game

• Instant refresh through reset button

• Collapsing Home/Game menu bar

Features Left to Implement

• Having an alert pop up to refresh page when done

• Making a second version that is bigger/more challenging

• Adding a new game page with new game

Technologies

• The IDE used was AWS Cloud9 to build the Website.

• BootstrapCDN for website design

• Used Google Fonts for the website fonts

• FontAwesome was used to add the icons on the nav bar

Javascript

• Used to create the memory game

• Used to create the flipping effect

HTML5

• Used to create the base of the site

• Used to put the pictures on the cards

CSS

• Used to create the styles of the site and memory game itself

Testing

Playing the game too fast:

• Go to the game page

• Try to click on the different tiles while the others are flipped over

• If they do not turn over it is correct and must wait till the others are flipped back over

• If you match correctly, you should instantly be able to move to the next attempt to match

Refreshing the page:

• Go to the game page

• Once you refresh, the game should restart no matter where you are at the game

Timer Reset:

• When pressed to reset, timer reset

• Cards are also shuffled/page refreshed

• Timer starts over and starts instantly

Deployment

This project was developed using the AWS Cloud9 IDE, commited and pushed to Github using the function within Cloud9.

• Push work to Github

• Run code in Cloud9

• Open Link at bottom of page

Credits

• For the javascript used used for the card flipping animation:

  • freeCodeCamp.org youtube: https://www.youtube.com/watch?v=ZniVgo8U7ek&list=LLX47phgrGqhYWSuoxWb2bvA&index=3&t=796s

• For Timer:

  • codepad.co site: https://codepad.co/snippet/javascript-stopwatch-using-javascript-and-css