Pexeso - Memory Game

Code Institute MS2 Project in Interactive Frontend Development

About

This is a simple Memory Game Web Application created for my second Milestone project with Code Institute. The game is designed to test a user's memory and is made up of a deck of cards, each card containing an image assigned randomly. The goal is to click on a card to reveal the image behind it, memorise the card containing that image and match cards with similar images until all pairs are matched.

What is the goal of this challenge.

The goal of this challenge is to match all the cards in as little time as possible, making the fewest selections possible.

UX

STRATEGY Who is this memory game for?

• People who wish to improve their memory skills in any age groups.
• People who wish to improve their concentration skills in any age groups.
• People who wish to take a small break.

Ideal users for this website:

• Ideal users for this website are students or young professionals seeking a small break for a short online game.

These users are looking for:

• Entertaining and short online game.

Project goals

USER STORIES

Comon user stories

1. As a player, I want to play a game that involves using my memory so that I can improve my memory skills.

• The main purpose of the game is to improve memory skills, player can play the game in the play section.

2. As a player, I want to know how playing memory games can improve memory skills.

• Information about the benefits of playing memory games can be found in the about section.

3. As a player, I want a mobile friendly game to play whilst on the go via my mobile phone/tablet.

• Application is fully responsive thanks to bootstrap framework and mobile first design approach.

4. As a player, I want a game that is intuitive and easy to use so that I can learn how to use it quickly.

• The game is very intuitive to use. As addition player can find how to play info in about section.

5. As a player, I want to see my score so that I can see if I am making progress.

• Users can keep track of their score by watching the timer, turn count and points while they're playing the game, and see their best scores in best score section in the game.

6. As a player, I want a fun game that will attract my kids to play and help with their memory skills.

• Game has a Lego theme so the kids will love to play. It also has difficulty levels so will suit all ages.

7. As a player, I want to play the game that me remind me the old fashion memory game called "pexeso".

• Game has the old fashion images of the original "pexeso" images specially designed for older generation players.

New users

1. As a new player, I want a short online game.

• Game is designed for a short online game. It can be played anytime for a small break for funn.

2. As a new player, I want to be my game attractive.

• Game is designed for all age groups who would like to improve or test their memory skill and have a fun at the same time.

DESIGN

Scope

Structure

WIREFRAMES

Sceleton

Surface

FEATURES

Existing Features

TECHNOLOGIES USED

In the construction of this project I have utilised the following languages, frameworks, libraries and tools:

• HTML, CSS and Java Script programming languages.

• Bootstrap v5.0

• The project used Bootstrap to simplify the website layout by integrating the Modals for further artist info and the Cards for event listings and company info. Also to provide overall responsive behaviour on all devices.

• GitPod

• I used GitPod as the development environment for my website. I also used Git for Version Control in the project.

• GiHub

• The project used GitHub to host my code that was created and pushed from GitPod.

• Balsamiq

• I used Balsamiq, the rapid low-fidelity UI wireframing tool during the prototyping phase to structure the website and its content following best UX practices.

• Chrome Dev Tools

• Chrome Dev Tools was used to consistently test the site and run reports from Lighthouse.

TESTING

UX STORIES TESTING

VALIDATION

I used the W3C Markup Validation Service to check the Markup and W3C CSS Validation Service to check the CSS validity of the site.

![htmlvalidator]

After fixing the errors on both testing sites, the site eventually passed the W3C Validation.

![htmlvalidatorFinal]

Fix Markup and W3C CSS Validation Service.

![cssvalidator]

• The Color Contrast Accessibility Validator was used to test for colour contrast on the project.

Add another contast.

• I constantly tested the code in Chrome Dev Tools and often ran Lighthouse audits to identify and fix issues that affected the site's performance, accessibility and user experience.

After fixing the errors in the lighthouse.

In order to have optimal user experience, the site needs to be accessible. I would continually run the URL through WAVE Web Accessibility Evaluation Tool to highlight potential issues. I continued until no further errors were given.

DEPLOYMENT

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. For the site to deploy correctly on GitHub pages, the landing page must be named index.html.

LOCAL DEPLOYMENT

CREDITS