Mad-matchmaking Game

Mad-matchmaking Game
- Contents
Table of contents
- User Experience (UX)
Wireframes
Features left to implement
External sources Used:
External Coding Tests
- Deployment
- Acknowledgements

User Experience (UX)

As a visitor using the website for the first time, I want…

The purpose of the website to be immediately apparent, so I can quickly trust that the website will suit my needs.
To be able to navigate the site intuitively and with ease, so that my time isn’t wasted.
Instructions of how to use the platform to be clearly presented, so I can start using the platform as quickly as possible.
Clear visual feedback when I submit either a correct or incorrect answer, so I know clearly the areas on which I need to improve.
The website to be visually appealing with good colour contrast, so I’m not distracted from the learning experience.
The learning experience to be engaging and challenging, so that I am stimulated by the experience.

Project Goals

The goals of this project is to create a simple card matchmaking game focused on the ability to match two cards from memory. This site should be user friendly, easily accessible and me aimed at a target audience mostly for children. It should have to primary levels with the possibility of more in the future an easy level and a hard level. Each with varying amount of cards.

User Goals

The site should be easy to access and maneouver around.
the site should have a complimentary color palette through-out for design purposes and to make it more aesthetic.
The user should be able to complete a game in a set amount of time and document the number of turns it took them to get to completion
The user should be able to identify when they match cards through an animation, or when they misMatch cards through them being turned back around.
The game should notify a success or failure, and if its a failure or success the game should reset back to its original form.
the Game should access an array of animals each time its loaded so every game will always have different animals for the users to experience.
The user should easily be able to progress from the beginner to the advanced level from any point with-in the game.
There should be music that creates a sense of being in the jungle when they play the game to hieghten the experience provided

User Stories

User 1 asked for a more responsive layout for the game so that it could be played anywhere on any device. The user also like the style of the game and responded to the fact it was based for children.
User 2 like the color scheme and found the game easy and fun to play around. They also enjoyed the animations and the feel of the website
User 3 wanted more of a challenge and asked for a highscores board and and wanted to see the results of there previous games.

Site Owner Goals

My goal was to create a fun jungle styled game where the user can match various cards of animals. The game should have varying levels of difficulty so that the user can progress forward through the game and get more of an experience. I want to implement sound in the form of ambient sound to create a more realistic in-depth experience for the user when they play the game. There should be notifications of success and failure and something that identifys how your doing through-out the game process.

User requirements and expectations

The user should be able to match cards from different visual images
The user should be able to identify and memorize locations of multiple images
the user should be able to move around a basic website
the user should be able to progress through different difficulties of the game
The user is expected to complete the game in a set amount of time

Colours

Font and styling

I decided to style this game with the mindset that the target audience would be aimed at more children than adults even though, adults are welcome to play the game. The game as a simple cartoonish style with an aim on cartoon animals as the main things to match with-in the game. Thus the game was given a more jungle atmosphere and jungle music to create a more immersive experience through-out. I decided to stick with a more earthy colour scheme and thus its based off of a lot of greens and browns in accordance to the nature of the game. The font that was used is a more Cursive styled font to keep the game in the more childish and fun nature than structured and orderly. Its meant ot be more of an experience for the users than information being provided.

Wireframes

Beginners

this is the Beginners game with 12 cards:

Differences in deployed version:

There were not many differences in my deployed version in the beginners game as it was styled quite effectively. Added in a sticker into the heading for style purposes and adjusted some spacing and layout issues

Advanced

This is the advanced game with 20 cards:

Differences in deployed version:

This was more of a mission to take on due to the size of the cards present so I , moved the layout around quite abit and then adjusted sizing and spacing for the cards and font to make it more visually appealling across all platforms.

Features

Instructions

There is a pop up instructions that can be toggled on and off so that there is an easy understanding of how the game works and its functionality

Navbar

The navbar is highlighted at the top of the page for easy manouverability and access around the game.

DropDown Menu

There is a dropdown menu to choose between various difficulties so that there is a sense of progression through-out the game itself.

Heading

The heading is highlighted and visually Eye catching so you get an immediate sense of where you are and that the game is taking place.

Game Info

The user is provided with a time allocation for the game and how long is left before success or failure and the number of card flips generated through-out the process.

Animations and Gameplay

There is multiple animation and visual ques indicating success or failure through-out the game for easier user experience and a heightened sense of enjoyment when playing through the game.

Cards

There is a visually dynamic card display allowing for accessibility on all devices so anyone can play at any time.

Footer

The footer is there to encourage further exploration through social links and keeping the user interated with the game in the future.

Features left to implement

A scoreboard to keep track of the users high score and other potential users who want to compete.
A larger array of animals to pick from for more diversity in game.
Another tier of difficulty for even more advancement through-out the game

Technologies Used

Languages

Libraries and frameworks Used

Tools

Testing

functionality Testing

HTML W3C validator

Ran my code through the HTML W3C validator and it came back with no errors

W3C CSS Validator

Ran my code through the W3C css validator with no errors

JS hint

Ran my code through JS hint with no errors

Info Section

Game-play tested

Tested the game across multpiple media sizes so it can be played anywhere effectively

Peer Tested

Had multiple individuals test the game for feedback and remarks about what could be better or different

Bugs

There was a sizing bug where the images would not adjust to the media queries. This was solved by creating a more defined css style to target the images and re-shape them accordingly.
There was an issue where the cards where not flipping correctly, this was due to an error in the javascript which was highlighted by my mentor.
there was an issue with the links not working effectively in the footer due to poorly typed out addresses.
There was an issue where some info was being pushed to a side, which was caused by over-lapping css styles. This was correct by further defining the CSS values.

External sources Used:

Images

Colour Palette

https://www.pinterest.com/pin/524669425340558041/ Colour palette idea

Music

https://www.zapsplat.com/?s=jungle+ambience&post_type=music&sound-effect-category-id= music

Logo

https://spark.adobe.com/express-apps/logomaker/preview LOGO

Background-Image

https://pixabay.com/illustrations/trees-forest-rainforest-jungle-5792732/ tree background image

Sticker

https://giphy.com/stickers/cute-QsKdQidXLVqPS/embed

Sites Used for inspiration and learning

Site used for responsive Image

http://ami.responsivedesign.is/#

Site used for MArkDown TOC

https://luciopaiva.com/markdown-toc/

External Coding Tests

W3C Markup Validator

W3C Html Validator

W3CSS Validator

W3C CSS Validator

JS Hint

Deployment

GitHub Pages

The project was deployed on GitHub Pages. The following steps were taken.
In the repository, go the the project main page.
Click on 'Settings' and then scroll down to the section 'GitHub Pages'.
Click on the link for the new dedicated Page settings tab.
In the new window using the drop-down menu select the main branch and then click on 'Save'.
The site is now published and a link is provided.

Forking If you wish to use this repository or to propose changes to this project, you can fork it. Follow the steps below.

Navigate to the repository, e.g. oliverdaviescodes/mad-matchmaking game
Click 'Fork' in the top-right corner.

cloning Cloning a repository creates a local copy on your computer. Follow the steps below.

Navigate to the repository, e.g. oliverdaviescodes/yoga-studio
Click 'Code' above the list of files.
In the new window, cloning using HTTPS is the default option. Copy the provided link manually or by clicking on the clipboard symbol.
Open Gitbash
Navigate to your desired directory for the cloned project.
Type 'git clone' followed by the URL copied in step 3.
Press Enter to create your local clone.

Acknowledgements

ThanKs to my Mentor Maranatha For all his support and ideas
Thanks to my family and friends for being my test subjects and trying out all my Querky features
Thanks to my Cousin Laurence who truly helped me through some of my more difficult Javascript features
Thanks to the incredible slack community for putting up with my persistent questioning

code-institute-submissions / mad-matchmaking-game Goto Github PK