Skip to content

Responsive memory card game using HTML, CSS, Bootstrap 4, JavaScript and jQuery with GitHub Pages. (CI Software Development diploma - Milestone 2)

Notifications You must be signed in to change notification settings

sctlcd/match-the-memory-latest-version

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

91 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Match the memory

A nice blast from the past!

I was playing memory card games with my sister when I was a little girl and I kept pretty fun memories of theses times

Let's play!


Table of Contents

  1. About

  2. UX

  3. Features

  4. Technologies Used

  5. Testing

  6. Deployment

  7. Credits


About

The general purpose of this website is to give the opportunity to people to improve their concentration and challenging their visual memory while having fun. And this anytime, anywhere as this game is available on various devices as desktops, tablets and mobile.

Match the memory is a card game in which all of the cards are laid face down on the screen and two cards are flipped face up over each turn. If the cards match they fade if not they flip back. The object of the game is to turn over pairs of matching cards. Once all cards are matched, a popup message appears and congratulates the player for winning the game round. The popup gives the result, how much time and how many moves it took to end the game round. The game ends when the player complete the 3 levels.

Back to top


How to play?

The goal is to match all the cards together and win the game round.

  1. Click on the Match the memory button. Enter your username and start playing.

  2. Click on two cards, if they match, look for another pair of cards. If cards don't pair, try again.

  3. Keep matching up pairs until all cards are matched and faded.

  4. If there is an issue during the game, just hit the restart button on the right corner of the game. If you want to start over, hit the exit button on the right corner of the game.

  5. Once you matched all cards together. Congrats you win! An popup window appears showing your result, time and moves to complete the game round.

  6. In the result popup, you can hit 'Level up!' to have another go at the level up game, keep playing for the minimum of moves in the minimum of time.

  7. When the player complete the 3 levels, a popup invite him to start the game over by hitting 'Play again!'.

  8. Good luck and may the best fan win!

Levels description:

  • Level 1: 3 paired of cards, trigger the animation of flipping back the pair of card after 0,9s
  • Level 2: 4 paired of cards, trigger the animation of flipping back the pair of card after 0,7s
  • Level 3: 6 paired of cards, trigger the animation of flipping back the pair of card after 0,7s

Back to top


Why this project?

This project is part of my Code Institute Full Stack Software Development studies, the Interactive Front-End Development module. The objective of this milestone project is the presentation of interactive data. "In this project, you'll build an interactive front-end site. The site should respond to the users' actions, allowing users to actively engage with data, alter the way the site displays the information to achieve their preferred goals."

For this project we could choose from one of the following ideas:

  • Bring your own idea(s) to life, based on providing value to users to address a specific real or imagined need.
  • Create a site that calls on the Google Maps API and/or the Google Places API (or similar) to allow users to search for their next holiday destination.
  • Build a memory game (for inspiration Simon and Bop It)

I have decided to create a game using HTML, CSS, Bootstrap 4, JavaScript and jQuery based on visual memory.

Back to top


UX

User Stories

✔️ successfully implemented
❌ not yet implemented

"As a user, I want to _____"

  • ✔️ view the site from any devices (mobile, tablet, desktop).
  • ✔️ Enter my player name
  • ✔️ Player name is required prior to start the game
  • ✔️ Start the game by myself (by clicking on a button)
  • ✔️ Reset the game round (scope: current level)
  • ✔️ Exit the game (start the game over and enter your player name again)
  • ✔️ View information of my current game round in progress (level, moves, timer)
  • ✔️ View game round results (player name, level, moves and time it took to finish the current game round)
  • ✔️ Play again with level up by default.
  • ✔️ Start the game over after 3 levels completed

Back to top


Design

When it comes about digital memory games it means potentially spending a long time on the screen playing so the design has to be eye-catching, user-friendly, peaceful and relaxing with vibrant but harmonious colors, straightforward and simple to boost concentration and memory. This is why I have designed my entire project around the Urban art and Abstract art.

I choose an abstract peaceful multicolored illustration as background combined to a colorful work of art visible in Los Angeles streets as card illustration covers.

I picked the blue color reminiscent of the same color in the abstract background for displaying the information badges and the reset and exit buttons.

I chose the combination of purple and gold reminiscent of the same colors in the abstract background for showing the start menu and the results menu.

I picked a Google Font Sedgwick Ave Display which emphasizes the Urban art concept with a graffiti style writing font.

I did not add any sound effects on purpose in this version of the game which the general purpose is memory and concentration as I believe sounds can disturb concentration. Sound effects will possibly be part of a future version with the option to mute them.

Back to top


Framework

Bootstrap 4 - Because I've already used Bootstrap and I liked it, because it meets the project requirements "Incorporate a structured layout". I've decided to build this game with Bootstrap 4.

Color Scheme

In keeping with the Urban art and Abstract art idea, I have chosen a colorful scheme. I first choose my background image, an abstract peaceful multicolored illustration and then the colorful work of art. I really liked the gold which fits harmoniously with my background. From there, I used a color calculator to get complementary colors to match my gold. I did not choose the exact complementary colors suggested here and here but some derived html colors based on the color calculator suggestions which work with my background:

  • #fafafa #fafafa
  • #0000 black
  • #1f1740 #1f1740
  • #DAA520 GoldenRod
  • #0000FF Blue
  • #d39e00 #d39e00

Back to top


Icons

  • Font Awesome 5.12
  • I like the look of the Font Awesome's icons which fit my needs for this project.

Typography

  • I have opted to use the Google Font Sedgwick Ave Display which emphasizes the Urban art concept with a graffiti style throughout the application. As a secondary font I have imported the simple and easy to read Google Font Roboto.

Wireframes

I have used Balsamiq Wireframes for my wireframes because:

  • Code Institute have provided all students a free licence until end of 2020. I got to use this software a few year ago and I am pretty happy to get the chance to use it again.
  • The simplicity, rapidity and ease of use by focusing on structure and content.

My wireframes for this project can be found here in the wireframes sub-directory.

My Balsamiq Wireframes are not updated according to the latest version. The free licence provided by Code Institute has expired.

Back to top


Features

Existing Features

Footer
  • A copyright mention is displayed with my name beside a GitHub icon which opens my Github home page in a new browser tab.
  • A button 'Let's play' opens a Start popup asking the player to enter a player name. This entry is required prior to start the game.
  • By hitting 'Let's play' from the Start popup the user trigger the timer / the beginning of the game.
  • When a card is selected it triggers a flip effect which makes the figure of the card visible.
  • Only 2 cards can be visible at the same time.
  • If the 2 visible cards match the 2 cards fade if not both cards are flipped back.
  • Each try of matching 2 pair of cards count for 1 move.
  • The current level, timer and moves in progress of the game round are displayed on the screen
  • The reset button reset the timer and the moves of the current level.
  • The exit button starts the game over. (the user name has to be enter again)
  • When all cards are matched a Result popup show the player's results : player name, level, time and moves it took to finish the game round. A 'Level up' button triggers a level up game round.
  • When the player completed 5 levels a popup informs and invites him/her to play the game over by hitting 'Play again!'

Features Left to Implement

  • Sound effects will possibly be part of a future version with the option to mute them.

Back to top


Technologies Used

  • GitHub - Used as remote storage of my code online.
  • Gitpod - Used as an online IDE.
  • Notepad++ - Used as local source code editor.
  • Compressjpeg - Used to compress images for loading faster
  • Techsini - Used to generate multi-device website mockup
Front-End Technologies
  • HTML - Used as the base for markup text.
  • CSS - Used as the base for cascading styles.
  • Bootstrap - Used for responsive, mobile first projects design
  • JavaScript: Used for user interactions.
  • jQuery: JavaScript library, used to simplify some of the DOM manipulations

Back to top


Testing

My testing coverage for this project can be found here in the testing sub-directory or below.

User story validation

Galaxy S5 Pixel Pixel 2 XL iPhone 6/7/8 iPhone 6/7/8 Plus iPhone X iPad iPad Pro Desktop 1024px Desktop >1200px
View the site from any devices Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Enter my player name Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Player name is required prior to start the game Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Start the game by myself (by clicking on a button) Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Reset the game round (scope: current level) Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Exit the game (start the game over and enter your player name again) Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
View information of my current game round in progress (level, moves, timer) Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
View game round results (player name, level, moves and time it took to finish the current game round) Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Play again with level up by default Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Start the game over after 5 levels completed Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass

Back to top


Layout responsiveness

Galaxy S5 Pixel Pixel 2 XL iPhone 6/7/8 iPhone 6/7/8 Plus iPhone X iPad iPad Pro Desktop 1024px Desktop >1200px
website is responsive < 767 px Good Good Good Good Good Good n/a n/a n/a n/a
website is responsive > 768 px n/a n/a n/a n/a n/a n/a Good Good Good Good
index.html
modals Good Good Good Good Good Good Good Good Good Good
overlay of the background modal Poor Poor Poor Poor Poor Poor Good Good Good Good
images work Good Good Good Good Good Good Good Good Good Good
links/buttons Good Good Good Good Good Good Good Good Good Good
render as expected Good Good Good Good Good Good Good Good Good Good

Back to top


Compatibility

I tested the website across the 6 main browsers in both desktop and mobile configuration to ensure a large number of users can use it successfully.

  • Chrome v.89.0
  • Edge v.89.0
  • Firefox v.86.0
  • Safari v.5.1.7 for Windows 10
  • Opera v.74.0
  • Internet Explorer v.11
All pages Chrome Edge Firefox Safari Opera IE
Expected appearance Good Fair Good Poor Good Poor
Expected responsiveness Good Good Good Poor Good Poor
  • IE: Some CSS3 properties and HTML5 elements are not fully supported

  • Safari v.5.1.7: It’s an outdated version and lacks many of the features present in the latest version of Safari. The last version of Safari for Windows was released on May 9, 2012.

Back to top


Testing left

  • There is no way to install the latest version of the Safari browser on Windows 10 as Apple stopped developing Safari for Windows operating system long ago. For testing this website on the latest version of Safari, I will have to install the newest version of macOS on Windows 10 in a virtual machine.

Validators

HTML

CSS

Javascript

Chrome DevTools

Back to top


Known Issues

Deployment

Deployment – Live Website

  1. Create repository in GitHub and give it a relevant name.
  2. Click on your repository to open it.
  3. Find the “settings” tab and click on it.
  4. Scroll down until the “GitHub Pages” sections.
  5. Under the “source” drop down menu, choose a branch. I chose “master branch” and select it.
  6. You will then see a URL to your live webpage. In my case the URL is https://github.com/sctlcd/match-the-memory-latest-version

Back to top


Deployment – Run Locally

  1. Again, click on the repository called Match the memory
  2. Along the top bar, find the “clone or download” button.
  3. Here you have the option to clone by HTTPS or SSH.
  4. Once you have chose your desired option, then click the copy icon next to the URL.
  5. Open Git Bash.
  6. Ensure you are in the correct directory which you want to copy the code into. If not, change the directory.
  7. In the terminal, write $ git clone https://github.com/sctlcd/match-the-memory-latest-version.git
  8. Press the enter button and your clone will be created.

Back to top


Credits

  • My inspiration comes from
    • Memozor, a free memory games online platform.
    • Memory Game built with jQuery Medium
    • Memory Game Programming JavaScript Tutorial YouTube
    • Part 1 - HTML / CSS - 4×4 Memory Game In JavaScript YouTube
    • Memory Card Game - JavaScript Tutorial YouTube

Back to top


Content

  • All images visible on the cards come from PlaceIMG, a random image generator website. It offers the possibility to customise images (width, height, category) before their random generation.

Back to top


Media

Sources of the images used on this site:

Code

Back to top


Acknowledgements

  • Anthony Ngene
    • Thanks to my Code Institute mentor for his time, suggestions, and constructive feedback

Back to top


About

Responsive memory card game using HTML, CSS, Bootstrap 4, JavaScript and jQuery with GitHub Pages. (CI Software Development diploma - Milestone 2)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published