Play the game

• About
• Demo
• UX
  • User Stories
  • Research
  • Wireframes
  • Design
• Features
  • Functionality
  • Existing features
  • Future features
• Technologies used
• Testing
  • Manual testing
  • Errors
• Code Notes
• Deployment
• Credits
  • Code
  • Images
  • Audio
• Acknowledgements
• Disclaimer

The purpose of this project was to create and build a single page application - classical card matching game that that increases in complexity over the course of the game. It requires observation, concentration and a good memory to win. The game is also known as Concentration, Pelmanism, Shinkei-suijaku, Pexeso and Pairs. You can read more about Concentration game visiting Wikipedia page and the rules of a classic table card game here.

I could choose between 3 different projects and chose to create a memory game because my goal is to learn more about animation and logic. I learned a lot during this project e.g. how to use classes and constructors. Also, I realised my weak areas that require improvement e.g. understanding scope and algorithms.

I was initally tempted to create a Snakes and Ladders game. I had downloaded one version of it on my Ipad and found it to be poorly made. As it would be too difficult for me to create at this point and found a great tutorial by Web Dev Simplified for memory game and decided to go with it.

Game name idea simply comes from the images I used for the project.

I would improve a lot of things if I had more time. For example - count the score throughout the game and create a high score board, animate everything in a more appealing way, refine the design, make the game beautifully responsive on all devices.

Demo video backup

• I want to play a game to improve my memory with simple and straightforward use.
• I want to game to be presented in visually appealing and non-disctracting way.
• I want to be presented with an game start window to be able to start the game on-click.
• I want to hear a sound when clicking on a card to indicate card flipping around.
• I want the background sound to be muted before I start the game.
• I want to be able to turn the background sound on and off.
• I want to play through levels increasing in difficulty.
• I want to be able to play the game on different devices.
• I want to hear a sound that indicates that I have found a card match.
• I want to hear and see that I have completed a level.
• I want to be able to click on the screen to start playing the next level, in case I want to take a break.
• I want to be notified of when I win the game after completing a set number of levels.
• I want the ability to restart the game after winning or failing.

To understand the game, I researched existing versions of the game. This gave me a clear idea what functionality and design my version of the game will have.

Most versions had square or rectangular cards. Many versions of the game had extremely colorful clashing patterns that distract the player from memorizing the cards. This is my reasoning why I chose the particular design.

• Starting with a desktop first approach I created a very basic wireframe. Wireframe and notes from first mentor call.

• Interactive Adobe XD prototype

• Screenshot - page and overlays in same file for simplicity

• Start game

• Level 1

• Level Up

• Level 2

• Victory / Game over

There are differences between my original wireframe and the actual page because changes happened during development process. I did not find the need to create any more detailed mockups because the design is so simple and I already had seen how my cards look together.

The design of this page is clean and fresh. I used neutral colors for the background and the back of the cards so the user can concentrate on the front of the cards which have different pastel backgrounds and the fruits are in rich colors.

To create the cards I created a Photoshop file with numerous artboards and imported the back of the card and the individual fruit vectors. Then added pastel backgrounds in different tones. The screenshot of initial card design can be found here.

I adjusted the brightness of back of the cards and created game title with fruit and transparent background later on in the project using AI and PS.

During the development process I tweaked colors and card brightness, fonts, font colors and sizes to be more visually pleasing. With time I would tweak more small details, like colors and mute button location in relation to overlays.

I got rather lucky finding the perfect free fruit vectors. It took only a few minutes of googling. I'm always very picky about the images I choose so finding them so fast was surprising.

• Game starts with a "Click to start" overlay.
• The cards sligthy increase in size when hovered over.
• Pointer changes to hand when hovered over the cards and overlays.
• Cards have different images on front and the same pattern on the back.
• Cards flip with the according sound for realism.
• Upbeat sound for moving on to the next level.
• "Woop! Level Up!" and "Click to play next" overlay appears between levels.
• Time countdown - user has 60 seconds to pass each level.
• Flips are counted throughout the game.
• Several levels.
• "Victory" overlay appears when the game is finished with an option to click to restart.
• "Game Over" overlay appears when time runs out.
• The page refreshes when clicked on Game Over or Victory overlay.
• It is not possible to see all the cards at the same time. If player clicks on one card, it stays flipped. When clicking on a second card it flips and both cards then turn back if it is not a match.

• Start Game overlay with Juicy Fruit logo
• On and off button for background music
• Cards
• Timer
• Flip Counter
• Level Up overlay
• Victory overlay
• Game Over overlay
• Backdrop blur behind overlays for aesthetic purposes

• More mobile friendly (cards strething accordingly across different screens)
• Pause game button.
• Pause audio when page is inactive.
• Popup "Are you sure you want to give up?" if trying to close the page mid game.
• Leaderboard This would require entering a name before starting a game and then storing the game score in a database.

Below are a list of the programming languages, technologies, frameworks and resources used for this website.

• HTML5
• CSS3
• Vanilla JS
• Visual Studio Code development environment
  • Live Server Extension
  • Color Picker Extension
  • Markdown Preview Extension
• Git for version control
• Github to store project
• Github pages to deploy project
• Markdown (README.md file)
• Google Fonts
• Google Chrome Developer tools
• Firefox Inspector
• Safari Web Inspector
• Procreate on iPad - initial mockup drawing
• Adobe Photoshop CC to create cards
• Adobe Illustrator CC importing & editing fruit vectors
• Adobe XD to create mockup and prototype
• Cloudinary to store all images
• Favicon.io to convert favicon.ico
• Material.io Mute/unmute icons
• Adobe Premiere to edit gameplay video
• EZGIF to convert video to GIF for ReadMe file
• Fisher–Yates shuffle to shuffle the cards

• HTML validator
• CSS validator
• JsHint
• Testing checklist

I used DevTool breakpoints and watches to debug my JS errors in Safari and Chrome. I used a lot of console.log() to see if my code us running correctly.

I conducted testing on several platforms and browsers to make sure that game worked properly and looked correct everywhere. I asked friends and peers for their feedback and any errors they encountered.

Devices and platforms used for testing:

• Iphone X
  • Safari
  • Chrome
  • Brave
• Ipad Pro 12.9" 2018
  • Safari
  • Chrome
• MacBook Pro 13" MacOS Catalina
  • Safari
  • Chrome
  • Firefox
• MacBook Pro 13" Windows 10
  • Chrome
  • Firefox
  • Microsoft Edge
• OnePlus 5T
  • Firefox
  • Chrome
• Windows 7
  • Chrome
  • Firefox
• Huawei P20 Pro
  • Chrome

1. Clicking on overlay over the whole window area.
2. Turning all cards, clicking on all cards fast.
3. Turning background audio on and off by clicking mute button.
4. Letting timer run out to check if Game Over overlay appears.
5. Playing game until Victory overlay appears.
6. Clicking on mute button to see if it toggles correctly.
7. Clicking on mute button to hear if it turns the sound on and off.
8. Checking there are no grammar and spelling mistakes
9. Instructions are clear.
10. Testing if all content is visible on different size screens.

I had planned to use Jasmine for automated testing but due to time constraints I was not able to. Yet.

Current errors:

1. NOT YET FIXED Backdrop blur does appear on some devices, even though I've added vendor prefixes.
2. NOT YET FIXED There is half a second of extra cards visible after clicking Victory or Game Over overlay before the page reloads.
3. NOT YET FIXED If player matches or flips cards too fast, second Match sound does not get played, because the first signal is already "busy".

Resolved errors:

1. Deployed website on Github pages opened on Safari sometimes lets match not actually matching cards. Had missed a line of code.
2. Reaching level two, cards duplicate function called twice.
3. When failing with time running out, game moves on to the next level.
4. Too many papayas on level 2. LocalStorage issue
5. Duplicated on level 3 from level 2. LocalStorage issue
6. Levels localStorage does not increment properly on Safari. I found a possible solution on Reddit. Fixed by just storing the level in a variable.
7. On some browsers/devices the game levels do not function properly. Level Up overlay shows up, but no cards are added to the deck. I parsed the local storage items, because that was the issue with Firefox but the problem still exists on mobile Chrome. Fixed by storing the level in a variable.
8. The first error I encountered was with Safari (on all devices) while turning cards. Click here to see video. During the animation of card turning it glitches and half of the other side is visible during animation. I added -webkit- etc to transform styles but it did not solve the issue. By googling I found that many other people have run into this issue. Fixed by adding -webkit-backface-visibility: hidden;

I acknowledge that inline onclick events are not best practice, and should be handled in script file, but I found it less time consuming at the moment and might correct at a later point and will not use them in the same way in future projects.

This project is not supported on Internet Explorer because of JavaScript ES6 syntax use.

CSS validator shows some warnings about alphabetical order and non-standard vendor prefixes.

It is hard to finish the game on smaller screens due to necesarry scrolling with current styling. I might adress this issue at a later date.

I did not provide alt atributes for visually impaired, because it would unnecessarily complicate the code and I don' t think that this would be a suitable game for visually impaired with the current design and layout. It would require completely different structure.

Branch second contains the code I followed from tutorial with less of my own changes, but which I want to keep as a reference.

I chose to do the project in Vanilla JS to properly understand the basics. I learned a lot during development of this game. The most challenging was to understand JS Class, Constructor and Scope.

The project was made by creating and new repository in Github, copying web url and cloned by pasting the link in Visual Studio Code built-in Git control. Git was used for version control and pushed to a repository hosted on Github pages

1. Go to my GitHub repository

2. Click on 'Clone or download' under the repository name.

3. Copy the clone URL for the repository in the 'Clone with HTTPs section'.

4. Open terminal in your local IDE.

5. Change the current working directory to the location where you want the cloned directory to be made.

6. Type git clone and paste copied repository link.

Or paste this into your console:

git clone https://github.com/sabinemm/fruit-game.git

7. Press Enter to complete

• HTML and CSS part of the tutorial
• Javascript tutorial
• StackOverflow
• Maranatha Ilesanmi helping me with setting up local storage for levels
• My friend Rūta with helping me to put cards in the constructor
• OnClick refresh
• Several CI student ReadMe files as examples for my project writeup. (First example was no longer available. Here is the second.)

• Fruit composition
• Back of the card pattern
• Individual fruits
• Phone and laptop for gif

• Card flip
• Matched
• Level up
• Victory
• Game over
• Background audio

Appreciating my friends Rūta and Agris teaching me how to find and fix errors and giving me hints how to solve problems.

Thanks to my cat for listening to me during Rubber Duck Debugging.

A thanks to my mentor Maranatha Ilesanmi for helping and guiding me through the process of developing this game.

This project is for educational purposes only.

Back to top ↑