This is a Memory Game that has been inspired from my daughters stuffed animals. It is a simple but yet challenging memory game with eight pairs of cards.
The game targets to be a fun and challenging way to learn to concentrate and remembering things for children. But it is also a nice way for adults to relax.
Welcome to Teddy Memory Game.
- User Experience (UX)
- Features
- Tecnologies Used
- Testing
- Bugs -Solved -Left to Solve
- Deployment
- Credits
- Acknowledgements
- As a user I want to get to the game istself quickly without to many clicks.
- As a user I want to be able to undertstand how the game works in an easy way.
- As a user I want to see the result of the game in a clear way.
- As a user I want to be able to restart the game easily without to many cklicks.
- As a user I want a clear design without too much clutter.
- As a user I want colors that are matching and is easy to read.
- As a user I want to se how I am doing while playing.
The wireframes were made before the project started to guide the design. Some changes are made to the final version of the game.
The Teddy Memory Game is a one page application. All buttons and actions are avilable from the screen without the need to scroll. The start menu is a div that will be hidden when the game starts, and the game will be hidden when you enter the menu. The structure keeps the game in focus, and other elements are planned to be minimalistic.
For the logo of the game, I choosed Courgette. I wanted a classy but yet playful look so I thought Courgette was a good font for that purpose.
For the rest of the text I choosed Varela Round. It is easy to read, stylish and still a little bit playful.
I choosed colors with my daughters favourite color in mind, pink. Colormind was used to pick a palette that I used through the application.
For the text on the buttons I had to use a darker color for readability. I used a darker color of brown (#5C483D).
- A start page with a logo for the game at the top.
- In the middle there is a picture with small cards that are in the game.
- At the bottom there is two buttons. The first for reading the rules, and the second to start the game.
- A modal that appears as a pop-up when clicking on the rules-button.
- Explains how the game works.
- A button to close the modal and return back to the menu.
- The game area where all the cards are.
- Below the cards there is a count for attempts, and how many seconds that have passed.
- Two buttons at the bottom, the first for going back to the menu, and the second for starting a new game.
- When game is finished a modal pops up showing how many seconds it took, and how many attempts that was needed.
- In the box there is two buttons, one to reset the game and try again, and one that gets you back to the menu.
- A feature that could be added is that you can chose a nickname and that the score can be saved. That could add a competitive element to the game if you can compare scores with other users.
- Adding more levels of difficulty.
- Adding sound effects to the card flipping animation that can make it come more to life.
- HTML - is setting the structure and the content of the website.
- CSS - providing the style for the pages.
- JavaScript - is making the site interactive. The engine for the game.
- Gitpod - used to develop and deploy the site.
- GitHub - is used to host the site.
- Balsamiq - was used to make the wireframes.
- Google Chrome was used during development and there is no known issues in that browser. Although Chrome on iPhone is a little slow on the first animations.
- Mozilla Firefox is tested through the development process and there is no known issues.
- Microsoft Edge is tested in different resolutions with no known issues.
- Safari is only tested on mobile devices and there is no known issues in that browser.
Tests for mobile devices was made at Googles Mobile Friendly Test.
Manual testing has also been done through the development. That has been done on mobile devices and in Google Chrome DevTools. Screens from 2560px down to 375px has been tested.
Accessibility was tested using Lighthouse.
- Performance shows how the page perform in terms of loading speed.
- Accessibility shows how accessible the page is for all users.
- Best Practices shows that the site uses industry standard practices.
- SEO shows Search Engine Optimization.
Results for Teddy Memory Game page:
Mobile:
Computer:
At first, Lighthouse warned that there was not enough contrast between text and background. So i changed a color so that it passed.
The site is tested with W3C HTML Validator for the HTML and for the CSS with W3C CSS Validator. For the JavaScript JSHint was used.
Here are the results for CSS and HTML:
The validation through JSHint showed no errors. At first it showed some warnings for missing semicolons and a variable that i forgot that was unused. But that is now solved.
There was a lot of testing done for the logic of the game. Most was made manually by myself, and by friends and family that would try the game and find things that was not working as it supposed to do.
Testing was also done by Google Chrome DevTools. It was of big help when trying to find issues, especially in the JavaScript.
-
Card animation will only work first time it is clicked. The bug was fixed by adding a remove class of the flipped cards in the function that check for pairs.
-
If you clicked more than two cards before they flipped back, it resulted in an error. The bug was fixed by adding a lock to the board while the timeout was running.
-
You could click on a card that is already facing up which will get the count for matches to count wrong. It was also turning an already matched card to the wrong side. The issue was solved by adding a "clicklock" on all cards that was not showing the back preventing this from happening.
-
The alert shown when finishing the game was not showing the time used correctly. Instead of the time it showed "[object HTMLSpanElement]". The issue was fixed by adding an element property in the JS that was forgotten.
- There are no known bugs at the moment.
This site is deployed using GitHub pages. This is the steps for deploying a site.
- When in the repository navigate to the Settings tab.
- Then navigate to the Pages link on the left side.
- Navigate to Source and select master/main branch and then click Save.
- When page is refreshed and the site is published successfully, a green box will show that it's finished.
Here is the link to the repository: https://github.com/spangen87/memory-game
A copy of the repository can be made. This copy can be viewed and changed on another account without affecting the original repository.
The steps for doing this:
- Make sure you are logged in on GitHub and then find the repository.
- On the top right there is a button called Fork.
- Press the Fork button to make a copy to your account.
This is how you make a clone of the repository:
- Click on the code tab under the repository name.
- Then click on "Code" button to the right above the files listed.
- Click on the clipboard icon to copy the URL.
- Open Git Bash in the IDE of your choice.
- Change the working directory to where you want your cloned directory.
- Type
git cloneand then paste the URL that you copied. - Press enter and clone has been finished.
- The font is picked from Google Fonts.
- Solution for randomizing the cards and setting up the array of cards Fakorede Damilola.
- All photos are taken by me, the author.
- Photos were compressed using TinyPNG.
- Photos are edited in Adobe Photoshop.
This game was made as Portfolio Project 2 for the Full Stack Software Developer education at Code Institute. I want to thank my mentor Precious Ijege for the support and for pushing me to do better and aim higher. A credit to my four year old daughter Bianca who choosed which teddy bears that should be in the cards, and for helping me with the photography. I would also like to thank my colleagus Daniel and Järker at Best Las for giving me the opportunity and time neccessary to be able to do this education. And lastly I would like to give a big thanks to Ludde Hedlund for helping me find bugs and for helping me figure out the solutions to them.
I hope this game can bring some joy to the children and adults who will take the time to play it.
Rikard Spångmyr, 2022