Milestone Project 2

Gness Memory Game

This project is a summary of study from the fourth and fifth module of the Full Stack Developer Course - JavaScript Fundamentals & Interactive Frontend Development, to build a custom, mobile-first, fully responsive Vanilla JavaScript memory game.

The purpose of the game is to improve memory skills. Players can race against the countdown timer and keep track of their scores to see how well their memory skills are improving.

Table of contents

• ABOUT
• PURPOSE
• STAGES OF DEVELOPMENT
  • INITIAL STAGE

1️⃣ ABOUT

This project is a summary of knowledge gained during course module on JavaScript Fundamental and Interactive Front-End Development, to build a simple single memory game and to comply to all four phases of software development which are

• 1.Initial phase
• 2. Planning phase
• 3. Execution phase
• 4. Deployment phase

In this this documentation,
I will provide a. Reader with full justification and inspiration behind my choice of this special and unique game b. User with full explanation on how to benefit from the game c. User with scoring counter to allow the participant to build up points of progression.

2️⃣ PURPOSE

The purpose of this game is to provide an inclusive educational memory game for users i. with Hearing-loss ii. without Hearing-loss in improving their literacy, communication and cognitive skills in an interactive environment.

3️⃣ STAGES OF DEVELOPMENT

AS A USER

1. As a user, I want to interact with the game that will allow me to learn amd memorise English words with British Sign Language [BSL] to improve my literacy, communication and cognitive skills.

• The main purpose of the game is to : a. improve communication skill of children and young adult who have hearing-loss b. influence in reducing the impact of mental health among this minority due to social magilisation. The user can click the mouse to initialise the arrow to the centre of the dart board which consist of random BSL video and English words.

2. As a user, I want to know how playing memory games can improve cognitive, communication and literacy skills.

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

3. As a user, I want a laptop/PC game to play whilst in quite environment without distraction and I will be able to practice my communication skill.

4. As a user, 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. In addition player can find how to play info in purpose.

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. Also if they misses the targer in centre they will be able to see how many chances they have not be a losser but a winner too.

6. As a player, I want a fun game that will attract both hearin and hearing-loss children and young adult to play and help with their cognitive, communication and literacy skills.

Developer:

1. As a developer, I want to develop a memory game software using JavaScript.

• JavaScript is the main language that was used to create the game.

2. As a developer, I want to create fully responsive app to showcase my skills to a potential employer.

• Application is fully responsive thanks to P5Js framework and mobile first design ap.

3. As a developer, I wanted to create a game that will be inclusive and meet the need of people that are living in isolation as a result of their disability. It had been a dream working in special school and to find resource of interest to meet individual need compare to children and young people of the same age with no disability

Design:

Colour Scheme:

3 primary colours are used which are the main colours:

• #663F74
• #000000
• #ffffff

All colours were used to style various elements in application.

Content Structure:

The main game geometry of the game is square, it refers in this way to Lego bricks. The game base on two sections and modals. All modals are square and have blue backgrounds. It is very easy solution to make sure all will be good visible on mobile devices.

Images:

The main image in main menu section is Emmet which is well know character from Lego movie. It will focus attention around younger and also older players.

Wireframes:

• Memory Game wireframe

3️⃣ Technologies Used 🔨

Languages Used:

• HTML - Standard mark-up language for documents designed to be displayed in a web browser.
• CSS - Describes how HTML elements are to be displayed on screen, paper, or in other media.
• JavaScript - Is a programming language that conforms to the ECMAScript specification.

Frameworks, Libraries & Programs Used:

• P5JS - Javascript framework used to create games OOp language.

• Git - Free and open source distributed version control system.

• GitHub - A Git repository hosting service.

• Font Awesome - A web font containing all the icons from the Twitter Bootstrap framework, and now many more.

• wireframepro - Wireframing tool.

4️⃣ Features List 😲

Existing features:

Main Menu:

This is the first screen presented to the player. There are four main buttons:

• Play - After clicking on the mouse, Arrow will change position . After choosing level the game will start..

• About - After clicking mouse and arrow hit the centre scoring system start countin

• Highscores - After clicking mouse, meter starts reading on hitting the right tarhet in the centre. Scores are stored in local memory and in 3 chance thay can have high scores

  "Yes" will clear local memory and delete previous counter with scores for each target when "No" will close confirmation modal.

  • Game will dismiss modal.

• Arrow - After clicking the mouse the arrow start appears coming from left directionn with main target is the centre of the dart board. User can check who developed game and find contact information. There is also an evalution section and details of the devloper with special thanks to my mentor.

  • Close button will dismiss modal.

Game Arena:

BSL Video https://www.signbsl.com/ and English Text displayed in the middle of the game arena. The times arrow meet the target depends on score and chances. When clicks on a canvas, the video and text is presented.

• Time - There is 60 sec to complete the level. Timer counts down when the game starts.

• Turn counter - Increases by 1 every time player reveal 2 cards.

• Quit - After 10sec the appear, game will restart again.

End of the game:

Lose: -User loss after missing the targer 3 chances

• No button will redirect to main menu

Win:

• Game win - If without missing the targer and have a high score

• Level highscores - the counter show the level of high score.

  • Clear scores button will clear local memory
  • Close button will redirect to main menu.

Future features:

• Live Play - I'd like to add functionality to allow users to interact and compete with friends or other players with features like a real-time scoreboard and the option to send invites and challenges to other players.
• Variation of Themes - The current theme of the site is geared more towards children than adults, so I'd like create multiple themes so that users can select a theme when they first arrive on the site and their preference would be saved for the next time they visit.

5️⃣ Testing 🔥

Manual Testing:

Only manual testing method was used to test this project due to big gap of knowledge on how to use automatic testing tools like Jasmine or Enzyme yet. All functions were tested by myself by creating different scenarios.

Testing and improving the application was carried out throughout its development. The main testing tool was Google Chrome dev tools and devices such as a phone, tablet and laptop with several versions of browsers (Google Chrome, Firefox, Edge, Opera).

Passing the HTML file content through the W3C Validator for HTML resulted in no errors but one warning "Section lacks heading" which was game arena section but this is intentional so I ignored. The Bootstrap framework was tested extensively to ensure that the Mobile first Responsive Approach was achieved with this project. The Application was tested on my Lenovo Thinkbook laptop and large Samsung TV screen, Samsung Galaxy S6 mobile and Lenovo tablet. The application worked fine on all devices. If something didn't work as it should during the test it was immediately checked and corrected in DevTools and then implemented into the code and checked again. If test passed it was committed and pushed into repository.

I used JSHint to validate JavaScript file configured to accept jQuery & ES6 features like const and let variables. There was no major warnings but this test allowed me to see where I had missing semi-colons from block of code and detect unused variables.

CSS file content was regularly checked in the W3C Validator for CSS to ensure any errors were spotted throughout the development of the style sheet. As with the HTML validation if any errors were present they were checked in DevTools and then copy and pasted over to the code before committing and pushing the updated code to my GitHub Repository.

User Stories:

Here are the steps and results from the testing carried based on the project user stories to determine that the game and functionality are fit for purpose

Result: Game works as expected.

Result: Game works as it should.

Bugs:

• Site works on only desktop/laptops devices .

6️⃣ Deployment 🚀

This project was developed in Visual Studio Code editor. All developments were pushed to the corresponding repository in GitHub account.

In order to deploy the website to GitHub pages, I:

• Selected the Repository from the GitHub Dashboard.

• Navigated to "Settings" then "GitHub Pages".

• Selected "master branch" in Source section.

• Page auto refreshed and link generated under GitHub Pages section:

  👉 Your site is published at https://graceobaellyone.github.io/Gness-Memory-Game1/

Run this project locally:

• Select the Repository from the GitHub Dashboard.

• Click the green button labelled 'Code'.

• Click 'Download ZIP'.

• Extract ZIP file on your computer.

• Open folder and open index.html in web browser.

Clone this project:

• Select the Repository from the GitHub Dashboard.

• Click the green button labelled 'Code'.

• To clone the repository using:

  • HTTPS: under "Clone with HTTPS", click checklist icon.
  • SSH: click Use SSH, then click checklist icon.

• Open Git Bash.

• Change the current working directory to the location where you want the cloned directory.

• Type 'git clone', and then paste the URL you copied earlier.

• Press Enter to create your local clone.

7️⃣ Credits 🙏

Code:

• P5js library mainly to make site interactive

• W3 Sschools referenced for code:

  • The Fisher Yates Method to sort an array.
  • How to use local storage.

Media:

• Emmet image in main menu: favpng (Licence free)
• Cards figures images: cleanPNG (Licence free)
• Icons: Font Awesome
• Audio: Zapslat (licence free)

Acknowledgments:_

-<a href=https://www.signbsl.com/"rel="noopener"target="_blank>British Sign Language BSL Dictionary

• Code Institute
• Stack Overflow
• Code Institute Slack Community.
• My mentor Guido Cecilio for guidance and support.
• My family and friends for their patience and honest critique throughout.
• My Personal Tutor