App Demo: https://nmuchiri.github.io/memory-game/
This is a memory game where the user has to match pictures of hats that are similar in as shortest time as possible. There is a timer on the game so the user can know how long they took. Every time the user matches hats, they get one point.
- HTML
- CSS
- JavaScript
I created a canvas of the images of the hats by creating a div for each image and having the images for the front and back in the div. This is the game board. The images had to be 100px by 100px to be of the same size on the board. The I used CSS to put the images on top of each other and to flip the images to reveal the backside.
The user will expect to see tiles which they will click on to reveal a picture of a hat. They will then click on other tiles to figure out where the matching hat is. The timer will start running as soon as the game loads and the user will try to match all the hats in as short time as possible.
- Development Plan ONE
The first part was to develop a game board with cards of hats. The cards have a front end and a back end.
- Development Plan Two
In this part, I figured out how to get the cards to flip so that the user can see a photo of a hat when they click on the game board.
- Development Plan Three
Part three was spent on figuring out how to randomise the photos so they appear at different places everytime the game is refreshed.
- Development Plan Four
In this part, I focused on adding a game reset button, adding a timer and having a counter to keep score.
- MVP ONE
Have a game with 6 tiles that flips cards
- MVP Two
Have a game with a counter and timer
- MVP Three
Have a countdown timer with an modal that says congratulations/
- Stretch goals ONE Find a way for two players to go against one another
It was challenging to find a way to flip the cards. I watched a CSS tutorial on how to flip images to do this.