https://salomelamprecht.github.io/memory_matching_game/
This matching game is mainly for use by children, however can also be enjoyed by adults especially on the harder levels. The integrated Jokes API also has some really good jokes and all jokes have been filtered to ensure suitable for younger players.
It has been shown that matching games can improve and support cognitive function for elderly and those suffering with dementia, so kids can also play with their grandparents.
The game has broken up into different themes and levels and is very easy to play. The user can take as long as they want but will need to match all cards in order to complete the game, should they wish to stop they can quit the game.
Some user stories that have been identified are:
- As a user I want to be able to navigate the game easily.
- As a user I want to know how to play the game so instructions are necessary.
- As a user I want to have a choice of different themes so that I can choose the one that is most appealing to me.
- As a user I want to be able to choose the difficulty of the game and as I progress, I would want to choose a higher difficulty level.
- As a user I want to be able to quit the game and choose from a different theme or level easily.
- As a user I want to be able to contact the developer to provide feedback on the usability and be able to make suggestions.
- As a user I want to be able to see my score and improve on it and also compete against my family or friends.
- As a user I want to be able to have an alternative to just playing the game.
The game is targeted at younger players so has been kept as simple as possible with only two html pages and mainly navigated by the user selecting buttons which hide and show elements. The majority of elements are created with javascript apart from the basic structure of the page.
As the game is targeted for younger players, the background image and colours used are aimed specifically at them, though parents and grandparents may well also like to play the game, especiallly when playing against one another in a family setting.
Desktop
Mobile
Please see separate UX folder for planes.
The user is able to choose from a variety of options as well as three difficulty levels and will be able to save their score and if their score makes it onto the highscores for that level, they can view the highscore list. This will enable them to compete against others in the same household when using the same web browser and also compete against themselves to better their score and memory.
The user can select the theme they want to play.
The user can choose between easy, medium or hard difficulty levels.
The user can save their score to localStorage.
The user can see if they're on the highscores list and compete against others.
Main
HTML5
CSS3
JavaScript
Frameworks & Libraries
Bootstrap4
JQuery
SweetAlert
Version Control
Git for version control
GitHub for deployment
Fonts & Icons
FontAwesome
GoogleFonts
VS Code
Choosing themes snippet: user chooses Princesses theme.
$(function chooseTheme() {
$('.princesses').click(function () {
document.querySelector('.difficulty').style.display = 'block';
$('.theme').hide();
choosePrincesstheme();
});
})
Whilst developing the game, I frequently previewed it in order to check the layout and content as well as its responsiveness. I did this throughout the development period.
I used git version control and a two working branches to ensure that any changes were commited to the master branch only when happy with the progress. Commits added throughout as and when larger changes were made whilst using working branches.
I used console.log() throughout to ensure the game was functioning the way I needed it to.
Please see below and also in the features sections where there are some images showing how this works.
- Navigating the game is easy with the simple layout. Buttons only become available as the user makes their choices throughout therefore simplifying the whole design.
- The instructions are displayed to the user when the game starts and stays for the duration of the game so that the user can refer back to it if required.
- Themes are easily selected by the click of a button.
- Difficulty levels can be easily selected by the click of a button.
- If the user changes their mind and no longer wants to play the game they selected, they can select quit button and it will take them back to where they can make new selections.
- Users can contact the developer by emailing them through the link available in the footer.
- Users can play against family and friends and keep score using the same web browser's localStorage.
- There are jokes for the user to enjoy should they wish to take a break from playing the game. This is done by selecting the jokes button below the game's main section.
Some of the issues encountered and fixed are as follows:
- Upon the game loading it went straight to level selection rather than theme selection. This was fixed with removing the overlapping code in Jasmine testing used initally. The Jasmine test was running the code at the same time as the JS file.
- When completing the game and clicking on quit, the game would reload but the previous gameboard would not be replaced. This was fixed with reloading the page.
- Image cards were not loading correctly, different sizes depending on size of screen etc. Fixed by fixing the cards height and width to 100px.
- User was unable to select different themes and levels without having multiple different functions for the same thing but different theme and difficulty. Fixed by pushing the themed arrays into a separate empty array and then emptying the array upon game completion.
- Whenever saving the user's name against the highscores list, it saved all of easy, medium and hard levels to 1 highscores table. Changed this so that easy, medium and hard level scores are separated out with their own top 10 highscores list.
- As the user wins an alert was showing, this was changed to a modal instead for the total moves, time taken and score as well as congratulations message for the different levels.
- localStorage easy did not clear fully when running localStorage.clear() in console, this was due to duplicate code. Fixed.
- If the user clicks on the cards too fast, same card twice or keeps clicking and doesn't wait for the cards to turn over, matching no longer works as it should. Fixed by using async function and await and adding css style to stop the user from engaging with the page until matches have been checked.
- Extra move is counted at end but does not affect score. Fixed by moving moves to earlier in the function so that it does not add a move on the outer loop where it is no longer necessary as game has been completed.
- Timer currently starts before first click and does not stop on last click. User informed that the game has started in instructions.
Some outstanding issues that still need to be resolved are:
- User can click the same card twice and should not be able to do this.
I uploaded to GitHub and then also tested the website using tablets and mobiles. Most responsive testing was completed in Chrome with developer tools.
HTML Validator (https://validator.w3.org/)
Section needs a heading - fixed by changing to divs. Type attribute unnecessary for JavaScript resources - removed.
CSS Validator (https://jigsaw.w3.org/css-validator/)
No errors found.
JavaScript Validator (https://jshint.com/)
Installed jshint in the terminal. Validated code throughout.
I used git for version control. Created working branches for all added changes before committing to the master branch to ensure new additions to the game did not impact on the working game code in the master branch. Used push and pull requests to update master branch with successful additions. Working-branch has been left to show where a major change to html occurred. Working-branch2 merged with master as this is the branch where I used javascript to create the majority of HTML in the content.js file. Working-branch3 used to apply final fixes to bugs.
This project was developed using the VS Code IDE, committed to git and pushed to GitHub using git from the terminal.
- Login to GitHub and navigate to salomelamprecht/memory_matching_game
- Go to the settings tab and navigate to Pages
- Under source select the Master branch and click save to deploy to GitHub Pages.
- Login to GitHub and navigate to salomelamprecht/memory_matching_game
- Select the source you wish to clone or download and click on CODE and select Clone or Download.
Clone
- Type: git bash in your IDE terminal
- Change your working directory to where you want to save the repository to
- Type: git clone https://github.com/salomelamprecht/memory_matching_game.git
Download
- Open your IDE and open the saved repository folder
- https://michael-karen.medium.com/how-to-save-high-scores-in-local-storage-7860baca9d68
- https://developer.mozilla.org/en-US/docs/Web/JavaScript
- https://www.freecodecamp.org/news/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae/
- https://github.com/sandraisrael/Memory-Game-fend/blob/master/js/app.js
- https://www.youtube.com/watch?v=tjyDOHzKN0w
- https://www.youtube.com/watch?v=4zx5bM2OcvA
Icons made by Good Ware https://www.flaticon.com/authors/good-ware" from https://www.flaticon.com/ www.flaticon.com
Icons made by Smashicons https://www.flaticon.com/authors/smashicons from https://www.flaticon.com/
Icons made by Pixel Perfect https://www.flaticon.com/authors/pixel-perfect from https://www.flaticon.com/
Icons made by Freepik https://www.freepik.com from https://www.flaticon.com/
Icons made by Pixel Perfect https://www.flaticon.com/authors/pixel-perfect from https://www.flaticon.com/
