View the repository in GitHub here
View the live project here
Fruit Match Game is an implementation of popular game Concentration, also known as Memory, Shinkei-suijaku (Japanese meaning "nervous breakdown") is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.
Landing page
This page welcomes any potential player. Upon opening the page the user is presented with a modal(overlay) with instructions on how to play the game. Once the user has read the instructions, he/she can press the start game button in order to start the game. The start game button has an animation of expanding circle around it which intuitively lets the user know where to press next.
- Desktop
- Tablet
- Mobile
Game page
Game page is very intuitive to the user. The top section of the page contains countdown timer, flips counter and music toggle button. Main content on the page is occupied by the cards. In the bottom part of the page the user can see game stats and link to the game music author.
- Desktop
- Tablet
- Mobile
Game info
At the top of the page the user is presented with:
- Countdown timer: user is given 360sec (6min) to match all the cards.
- Flips counter: each time a card is clicked it counts number of flips witch is used to calculate the game score.
- Music toggle button: by default music is off, but the user can choose to turn it on to make the game-play more enjoyable.
Card game
The user is presented with 36 cards which need to be matched in pairs of 2 in order to finish the game. All back faces of images are similar so the user does not know where the matching pair is. When the user clicks the second card and there is no match, then the cards are flipped back automatically.
Game stats
The user is presented with the current score and best score. The current score is calculated the flowing way:
- For each card solved user gets 2 points
- If all the cards are solved the user gets a bonus of 50 points
- If all the cards are solved the user the user gets 5 points for every second of time left The best score is calculated by comparing previous scores and selecting the highest one
End game
At the end of the game the user is presented with the current score, best score and with ability to play the game again.
- Desktop
- Tablet
- Mobile
Favicon
A Favicon was added to the website. It is the same image as the back of the cards. It provides the user information about open tab; if user has multiple tabs opened then the user can easily find his/her way back.
404 error page
A 404 page was added to allow the user to find his/her way back to the Homepage in case that the address is typed incorrectly. It also provides the user with a way back to the Homepage if an error occurs. It helps the user know this is a legitimate website by having its own 404 error page.
Wireframes were made using Balsamiq.
Screenshots
- Game start
- Game play
- Game end
Testing was performed to ensure all buttons and cards perform as intended. This was done by clicking on the buttons and cards and completing the game.
I was able to make the website responsive by using a combination of CSS display:
- Grid
- Flexbox
The screen sizes, which I implemented, allow the site to adapt to various user screens, starting from screen width of 320px and up to 4k (3540x2160px).
Chrome Developer Tools was the tool I used to make the site responsive.
Screenshots
All pages passed official W3C Validator testing.
Screenshots
Css passed official W3C Validator testing. There were no warnings or mistakes in my CSS.
Screenshots
Code passed official JSHint JavaScript Validator.
Screenshots
All the pages were tested with Chrome Developer Tools using the Lighthouse resource.
-
Performance:
-
Images format svg was chosen to reduce data consumption and maintain good aspect ratio.
-
Due to time constrains in submitting the project i could only get the performance score up to 85
-
-
Best Practices:
- HTML doc type included in the html for all pages.
-
Search Engine Optimization:
-
Semantic HTML included in all internal pages created.
-
All links have descriptive text added.
-
Alt attributes added to all images.
-
Meta-data descriptions added to each internal page created.
-
Screenshots
- All pages were tested with Wave Chrome extension to check web accessibility.
Wave does not show any error. It shows only 1 advisory warning relating to music.
Screenshots
- Upon opening the site link incorrectly: 404 Page should load automatically - Tested, the 404 Page loads up.
- Upon opening the site link correctly: Homepage (start screen) should open - Tested, the site loads up.
- Game screen should be inactive - Tested works as intended.
- From Homepage when pressing "Start game":
- Overlay (modal) screen should disappear and game screen should become active - Tested works as intended.
- Countdown timer should start at 360(sec) and when the time runs out the game should end - Tested works as intended.
- Flips counter should be 0 and should increase incrementally on every card click - Tested works as intended.
- Music button should be off and when being pressed to toggle the music, button text and color on/off - Tested works as intended.
- When first card is being clicked it should flip and stay flipped -Tested works as intended.
- When second card is being clicked it should flip and:
- If the cards match: should stay flipped - Tested works as intended.
- If the cards do not match: both cards should unflip - Tested works as intended.
- Upon solving all cards or countdown timer getting to 0:
- All cards should unflip - Tested works as intended.
- Overlay (modal) screen should appear and game screen should become inactive - Tested works as intended.
- "Start game" button should be displayed on the overlay (modal) screen - Tested works as intended.
- If "Start game" button is pressed the game should start again - Tested works as intended.
- "Last score" should display last game score - Tested works as intended.
- "Best score" should display best score if more than one game played: - Tested works as intended.
- If only one game played "Best score" should be the same as "Last score" - Tested works as intended.
- If browser tab is refreshed all scores should reset to 0: - Tested works as intended.
-
Page behaves as expected in all browsers tested. The website was tested in Chrome, Firefox, Brave Browser, Edge and Opera.
-
On the mobile and tablet website was tested in Chrome, Firefox.
A number of errors were found and fixed during testing:
- W3C bug: fixed by adding # to form action and replacing "section" with "div"
Screenshots
- Wave bug: fixed by changing the button text color
Screenshots
- Second payed game bug: fixed by calling "solvedCardCount" function inside "finishGame" function
Screenshots
- Best score bug: fixed by modifying the sorting of "calculateBestScore" function as shown here
Screenshots
When making the page smaller using Chrome and having Pesticide Chrome extension turned on i noticed that at around 350px and lower the body container shrinks faster than the content. This does not affect the game at 320px - functionality and gameplay does not suffer. I presume is related to css grid. Due to to time constrains it was not solved.
Screenshots
I used:
- Visual Studio Code as a local repository and IDE
- GitHub as a remote repository
- GitKraken was used for git version control
-
To begin with I used Code Institute template on GitHub
-
Then I used that template to create fruit-match-game repository.
-
Once repository was created I went to GitKraken on my PC, logged in with GitHub and selected the newly created repository
-
Selected a folder on my local PC where the code to be saved
-
Press Pull - this synced the repository to my local PC
-
Opened the folder in Visual Studio Code and started adding code
-
When finished - I saved the file on VS Code and used GitKraken to commit and push the code to GitHub
GitHub pages was used to deploy the site, this allowed me to visually and functionally inspect how the website would look and perform on a cloud platform.
- To begin, I went to the repository and selected 'settings.'
- I went to the 'pages' section.
- I chose the master branch as the 'main' branch under 'source.'
- I ensured that it was deployed from the 'root' directory.
- Once completed, I got the website's URL.
Here's few steps how to clone the repository:
- Navigate to GitHub repository
- In the GitHub repository, press the "Code" drop-down button located in the top right
- From the drop-down menu choose one of the options: HTTPS, SSH, GitHub CLI
- Use this link to clone repository in your environment
- Another option is to press "Download ZIP" to download repository to your PC
- HTML5 for the contents and structure of the website.
- CSS3 for the styling and animations.
- JS functions and examples.
- Balsamiq for wireframing.
- Visual Studio Code as a local IDE & repository.
- GitHub as a remote repository.
- GitKraken was used for git version control.
- GitHub Pages to deploy the website.
- Chrome, Firefox, Brave Browser, Edge and Opera for browser testing the responsiveness.
- Chrome Developer Tools for testing screen sizes and using Lighthouse.
- Favicon.io to create a favicon.
- Markdown Monster for writing my readme.
- Grepper Chrome extension for finding code.
- Wave Chrome extension to check web accessibility.
- Pesticide Chrome extension during development.
- Unicorn Revealer Chrome extension during development.
- Multi Device Website Mockup Generator for testing and to make responsive image.
The text was taken from Wikipedia.
Pure CSS Button with Ring Indicator
How To Code A Card Game In Plain JavaScript - Spooky Halloween Edition
Memory Card Game - JavaScript Tutorial Edition
Images came from Pexels And svgrepo
My name is Petru Chelban I am a full-stack software developer student at Code Institute, where I am pursuing Diploma in Full Stack Software Development.
Please do not hesitate to contact me if you require any additional information about this project or wish to discuss work/collaboration opportunities.
A big shout out to Code Institute for providing me with the opportunity to create this project.
I'd like to thank my mentor Daisy McGirr for invaluable guidance and for reviewing my website.