- 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
-
Click on the Match the memory button. Enter your username and start playing.
-
Click on two cards, if they match, look for another pair of cards. If cards don't pair, try again.
-
Keep matching up pairs until all cards are matched and faded.
-
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.
-
Once you matched all cards together. Congrats you win! An popup window appears showing your result, time and moves to complete the game round.
-
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.
-
When the player complete the 3 levels, a popup invite him to start the game over by hitting 'Play again!'.
-
Good luck and may the best fan win!
- 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
- 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)
- ✔️ 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
#fafafablack
#1f1740GoldenRod
Blue
#d39e00- Font Awesome 5.12
- I like the look of the Font Awesome's icons which fit my needs for this project.
- 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.
- 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.
- 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!'
- Sound effects will possibly be part of a future version with the option to mute them.
- 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
- 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
- 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
-
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.
- 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.
- W3C HTML Validator
- No errors
- W3C CSS Validator
- No errors
- Javascript Validator
- No errors
- [Chrome DevTools] (https://developers.google.com/web/tools/chrome-devtools/) Console Navigating through the Website rendered no critical fails/errors in the console that were necessary to fix.
- Create repository in GitHub and give it a relevant name.
- Click on your repository to open it.
- Find the “settings” tab and click on it.
- Scroll down until the “GitHub Pages” sections.
- Under the “source” drop down menu, choose a branch. I chose “master branch” and select it.
- 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
- Again, click on the repository called Match the memory
- Along the top bar, find the “clone or download” button.
- Here you have the option to clone by HTTPS or SSH.
- Once you have chose your desired option, then click the copy icon next to the URL.
- Open Git Bash.
- Ensure you are in the correct directory which you want to copy the code into. If not, change the directory.
- In the terminal, write $ git clone https://github.com/sctlcd/match-the-memory-latest-version.git
- Press the enter button and your clone will be created.
- My inspiration comes from
- 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.
- From images sub-directory - Github
-
city-art-los-angeles-street-art-min.jpg - Pexel | copyright ᒷ⟁⨃.ᖇ.ᕮ.∥.ᕮ
-
photo-of-multicolored-illustration-min.jpg - Pexel | copyright Anni Roenkae
-
card images - LoremFlickr | copyright Flickr and the author is shown in the bottom left of the image
Back to top
-
- Sticky footer - Css-tricks
- Way to implement wrapper - Css-tricks
- Responsive background image - Webfx
- Shuffle cards details - Medium
- How To Create a Flip Card - W3schools
- Disable background after modal popup - Stackoverflow
- jQuery timer - Yogihosting
- Stop setInterval call in JavaScript - Stackoverflow
- jQuery effect - jQuery UI
- jQuery API documentation - API jQuery
- 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
- Anthony Ngene
- Thanks to my Code Institute mentor for his time, suggestions, and constructive feedback
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
The goal is to match all the cards together and win the game round.
Levels description:
Back to top
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:
I have decided to create a game using HTML, CSS, Bootstrap 4, JavaScript and jQuery based on visual memory.
Back to top
✔️ successfully implemented
❌ not yet implemented
"As a user, I want to _____"
Back to top
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
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.
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:
Back to top
I have used Balsamiq Wireframes for my wireframes because:
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
Back to top
Back to top
My testing coverage for this project can be found here in the testing sub-directory or below.
| 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
| 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
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.
| All pages | Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|---|
| Expected appearance | Good | Fair | Good | Poor | Good | Poor |
| Expected responsiveness | Good | Good | Good | Poor | Good | Poor |
Back to top
HTML
CSS
Javascript
Chrome DevTools
Back to top
Back to top
Back to top
Back to top
Back to top
Sources of the images used on this site:
Back to top
Back to top