Madagascar Memory Game
Interactive Frontend - Milestone Project 2
Welcome to my live website here.
Link to my github pages.
This project is only for educational purpose.
This game is not mobile-friendly. It is optimised for , laptop, desktop and tablets screen only. The value of the image on the game changes belongs to the screen size.
Project Descritpion
This site is about a single-player memory game to test a user’s memory based on Madagascar the famous cartoon movie. The goal is to find and match a pair of cards images. It is a cool game to train user memory brain capacity. Memory games are good for training memory and are usually played by children but are also suitable for adults. Based on my own proven experience, I have seen that introducing games gives children the conditions to practice their abilities for empathy and mathematical thinking. In the game memory, there is a basic structure based on turn-taking and consideration, which develops the empathic ability. Being able to see similarities and differences and talk about patterns and pairing, gives children the opportunity to develop their mathematical thinking. This Javascript version of the memory game, using a 20 card deck for a single player. The language used to build this project is HTML, CSS, Jquery and Javascript.
Table of contents
- UX
- Features
- Technolgies used
- [Testing]
- Deployment
- Credits
UX
According to Nielsen Norman Group, user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want or providing checklist features. Total user experience is an even broader concept.
Project goals:
- User can see that the website is more appealing and well designed.
- Player can understand the simple game instructions.
- Player can have fun playing the game.
- User can play anytime.
User stories:
- I want that it is easy to navigate and the website looks nice.
- As a game player, I want to test my brain memory with this game.
- As a game player, I want to read a simple explanation about how to play this game.
- As a game player, I hope that this game is funny to play and entertaining.
- As a game player, I want to be able to play this game on a large screen.
- As a game player, I want to play this game anytime.
Wireframes
- I used Balsamiq as an aid to visualize and design the website structure before starting the project development.
Strategy
- I set out to make this friendly. It remembers me of my childhood as Madagascar is my homeland. And I wanted to share the happiness of being raised in a beautiful country rich in incredible nature and species. The game is just some fun for the user whether they are young or old. The idea of using Madagascar is quite fascinating. I made this game just for having fun by matching the pair of cards.
Scope
- The scope for me was that I want to create the feeling and sensation of watching the Madagascar movie again and let the user remember the movie and recognize again the animals in the game. That is the reason why I choose the lemur picture as the front face of the cards. Background music can be playing in the background to make this game more interesting not boring.
Design and inspiration
- I had a problem choosing a theme this time because my knowledge of Javascript is very limited and found it quite difficult. I read a lot of information and watched severals tutorial lessons on youtube. I learned a lot but still need more reading and improvement. Finally, I decided to modify a memory game. The idea behind the Madagascar cartoon come from me that this cartoon is very popular among children and even adults.
- I was also inspired by reading some of Code Institutes students Github repositories on the pree-code-preview in slack.
Colors
Landing page:
-
page-title: #ff3300;
-
background-color for headings: rosybrown;
Game page:
-
Html background-color: hsl(180, 100%, 90%);
-
Game container background-color: transparent;
-
Memory card background-color: rgb(255, 204, 255);
-
Border color for card back: #32a1ce;
-
Text-color in the border: #ffffff;
-
Audio button color: rgb(184, 28, 150);
-
Border color: #0000ff;
-
Exit button color: #6666ff;
-
Heading color on the game page: #ff0066;
Features
Landing page
- This website contains 2 pages. The landing page contains a tropical background image, an image of lemurs in the centre of the page. Title of the game on the top. Instruction about how to play and a play button that leads to the game page with text inside an image on it.
How to play
- By clicking on the text How to play, modal when clicked pops up and give the user a simple instruction on how the game is meant to play. The instruction is easy to read understand for every user.
- The game ends when all cards are matched. User can see their speed on the panel score.
Game page
- Is the second page on the website. It is where the user plays the game. At top of the page, a score panel with a timer appear.
- An mp3 music will be played in the background during the game if wishes. There are play sound and -pause sound_ buttons for the audio.
- In the centre of the page is the game container.
- User can leave the game y clicking the bottom exit
Timer
- A timer measures the speed of the player. (It does not work correctly, the timer do not stop after matched cards).
Score
- This showing the number of matched pairs of cards.
Features left to implement
Adding difficulty levels:
- To make the game fairer, I will add difficulty levels for the player.
- The player will have a game customize option such as:
- Create an account and choose an avatar.
- Choose a username.
- Multiple player games.
- Challenge another player
- Compare score with others.
- Track game statistic.
- New images will be available.
Technologies used
- HTML 5
- The language used to create pages and add content to the website.
- CSS
- The language used to style all HTML files.
- Javascript
- The language that makes the webpage alive.
- Bootstrap
- For responsiveness
- Github
- Repository hosting service and a location where all the files for a particular project are stored. I can access my unique URL in Github.
- Gitpod
- Code source developper plattform.
- GIT
- Version control to record changes and updates files.
- Font awesome
- Where I can search for icon and toolkit.
- JQuery
- A javascript library.
Testing
Project goals stories
- User can see that the website is more appealing and well designed.
Simple design, easy to understand with colourful images.
- Player can understand the simple game instructions.
Easy and short explanation for the user to understand on the landing page.
- Player can have fun playing the game.
Nice cartoon images are available on the landing and game pages. User can listen to music too.
- User can play anytime.
No need to make a registration. User can simply click on the play button and enjoy the game.
User stories tests
- I want that it is easy to navigate and the website to look nice.
User can play by clicking on the Let's play button.
User can see that there are images and colourful contents.
- As a game player, I want to test my brain memory with this game.
User can try to remember cards position by flipping and matching pair of cards around the cards board on the game page.
- As a game player, I want to read a simple explanation about how to play this game.
The user needs to understand the main goal of the game. The instructions are very easy and simple to understand.
- As a game player, I hope that this game is funny to play and entertaining.
User can find funny cartoon images. There are images both on the front and back of the cards.
- As a game player, I want to be able to play this game on a large screen.
User can play this game on any desktop and IpadPro screen.
- As a game player, I want to play this game anytime.
User can come back and play this game again and again without login in. No need for registration, just click the button and start playing.
Bugs
- Problem with cards shuffling. The math Random is not working.
Solved it by using a code snippet from css tricks
Link to the code
- Warnings from jshint about ES6.
Solved it by adding a **/jshint esversion: 6 / comment in the top of my javscript file.
I was not able to fix the warnings. Unsolved.
- HTML validating error.
I removed and fixed all errors.
Code validation
- I used W3C to validate HTML code.
Final result: No warning to show.
- I used Jigsaw to validate CSS code.
Final result: No warning to show.
- I used Jshint to validate Javscript.
4 warnings, not solved.
- I used Ami Responsive to controll responsiveness of the website.
Performance testing
- I used lighthouse to generate report peformance
Final result:
- Desktop testing:
The site was tested in MSI and Lenovo laptop.
The website was tested on Firefox, Microsoft Edge and google chrome.
Deployment
- Log into GitHub.
- Make sure you use VScode at your Gitpod account.
- To deploy this page to GitHub Pages from your Code Institute template
- Create a repository.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Make sure to click the save button.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
How to run this project locally
- To clone this project from GitHub:
- At the top of this repository, click the green button Clone or download.
- In the Clone with HTTP section, copy the clone URL for the repository.
- Open your favourite terminal (cmd, Powershell, bash, git bash, etc.)
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 2.
git clone https://github.com/Eventyret/vscode-bcdn.git- Press Enter. Your local clone will be created.
Credits
Images
-
Free downloading of those images was taken from wallpaperaccess
Link to the image: Cartoon :
- floodhest.jpg
- fosa.jpg
- giraf.jpg
- lion.jpg
- make.jpg
- pinguin.jpg
-
Background image for the landing page was taken from 123rf
Link to the image: jungle1
-
Free downloading of modal background image was taken from pixabay . I added text content by using Paint 3D on my computer.
link to the image: greenery-.jpg
-
Background from the game page was taken for free from pixabay
-
Those images were taken from [shutterstock]
Audio
- The background music from Youtube converted to mp3.
Font
- Font used for the page title was borrowed from fontspace
- Horn font.
Cursor
- Free cursor from rw-designer
Source of code
-
Modal on the index.html was taken from w3 schools
-
Modified code for this project from codeTonight yotube
-
Javascript code for the audio was taken from w3 schools :
- Shuffle code was taken from code
Acknowledgements
-
I would like to thank my mentor Adegbenga Adeye for his patient and understanding.
-
I wanna thanks codeTonight
-
I would like to thank some student from Code Institute for tips and advice.
-
I I wanna thanks my family for their support during the last tough weeks for their encouragement.
License
- License agreement for the background image on the landing page.
- I signed up for 30 days free trial on this site.
- License agreement for some of the cards images.
- I signed up for 30 days free trial on this site.
Sojasmine Gjerstad: Student at Code intsitute.
Maj © 2021
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
