The Anime Memory Game by Peter Freemantle

UX

1.1 What is the Site About

'The Anime Memory Game' Is a interactive site allowing the user to play 3 different levels of anime related memory game.

1.2 What is the Purpose of the Site

The site has a practical and a theoretical purpose:

Practical:

The practical purpose of this site is to showcase my abilities as a developer and to put into practice the knowledge I have acquired over the period of my course. This site concept of this practical application is to create a site that is interactive through JavaScript and using CSS and html styling, With a view to allow further development, for back end systems and updates to functionality. As such, the site is constructed with Bootstrap as a partial base with custom CSS overlaying and JavaScript functionality to show an understanding of these elements.

Theoretical:

The goal is to create a page that allows the user access a anime related memory game, to help pass the time and have abit of fun.

1.3 Who Built the Site and Why

This site was conceived, designed and built by Peter Freemantle for his second milestone project "Interactive Frontend Development Milestone Project", as part of his Full-Stack Developer Diploma course from Code Institute, through Edinburgh Napier University. He has been a part of the hospitality industry and a chef from 2008-2020.

1.4 Concept

This will be a multiple page interactive website, allowing users to access 3 levels of a anime memory game. The home page will be a panel screen providing navigation to the users desired level choice, header with brand imaging and a footer with notable information. Each respective level page will have a navigation bar, matching banner text and footer and game elements across all pages. In desktop the links will keep across full screen, but move to a burger icon when in mobile, allowing for the content to be kept clear and visible. The new menu will have active screens set, allowing the user to know where they are on the site.

The site will be fully responsive and optimized to be viewed on different screen sizes and devices.

1.5 User Stories

As a anime fan with some time to kill why not play a memory game. Well hello theere 'Anime Memory Game' is here to the rescue. Coming off a google search i know what im expecting and want to get straight to it.

As a anime fan and developer:

I would like to present myself and my work in a way people can enjoy.
I need to demonstrate different skills.
I want for myself and children to enjoy the concept.

As a new player:

I hope to find entertainment which is associated with my interests.
I would like to be able to easly access this form of entertainment on multiple devices

As a returning player:

I hope for varying levels of difficulty to provide variaty when playing
I would like to check timetable for current days and times for a group trainings.
I want to show my friend a location of the fitness studio where we can join for a semi private personal training.

2 Site Content, Structure Concept and Development

2.1 Pages Overview

The website consists of four pages, accessible through the homepage navigation links and a navigation bar at the top of each level page.

Home Page: Header, footer and a navigation panel consisting of picture links and text for the varying game levels. Page link: (https://sdmusic.github.io/Ms2-Project/index.html)

* Level 1: Header, nav and game panel made of 12 cards showing blank backs and allowing the play of the memory game. Page link: (https://sdmusic.github.io/Ms2-Project/level1.html)

* Level 2: Header, nav and game panel made of 18 cards showing blank backs and allowing the play of the memory game. Page link: (https://sdmusic.github.io/Ms2-Project/level2.html)

* Level 3: Header, nav and game panel made of 24 cards showing blank backs and allowing the play of the memory game. Page link: (https://sdmusic.github.io/Ms2-Project/level3.html)

WireFrames from concept

Are all located in a pdf Anime Memory WireFrames

3 Technologies Used

3.1 HTML or Hyper Text Markup Language

Used to construct all the pages of this web site. For further info on this language; https://developer.mozilla.org/en-US/docs/Web/HTML

3.2 CSS or Cascading Style Sheets

Is used to style various elements on a web page via colouring, fonts, spacing, etc. For further info, see this link; https://www.w3.org/Style/CSS/Overview.en.html

3.3 Bootstrap

Bootstrap is a potent front-end framework used to create modern websites and web apps. It's open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.For ease of development, Bootstrap [v4.4.1] (https://getbootstrap.com/docs/4.4/getting-started/introduction/) is employed in several areas of the site including:

3.4 Chrome DevTools

Web developer tools built directly into the Google Chrome browser. I used these tools at every step to test the functionality of my code. https://developers.google.com/web/tools/chrome-devtools

3.5 Javascript

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions

3.6 Gitpod

An online IDE which streamlines developer workflows by providing prebuilt, collaborative development environments in your browser - powered by VS Code. It does not have to be installed on your PC. This website has been constructed using Gitpod IDE

3.7 GitHub Repository

This website is hosted on GitHub GitHub Repository:https://github.com/SdMusic/Ms2-Project Deployed Link: https://sdmusic.github.io/Ms2-Project/index.html

3.8 W3C Markup Validation Service

Used to run all html and CSS code through a validation to identify if the code meets current standards and whether or not it is showing errors. https://validator.w3.org/ https://jigsaw.w3.org/css-validator/validator

3.9 JShint service

Used to run all Javascript through a validation to identify any code not confoming to current standards. https://jshint.com/

4.0 Screenshot - Full Page Screen Capture

This is a chrome extension used to capture full screen images https://chrome.google.com/webstore/detail/screenshot-full-page-scre/ejkbkgbliokmbblkklofdehalgbplkfg?hl=en

Deployment

The site is built on Gitpod, with all source code and assets hosted on GitHub. This is done through the following procedure

All files and code once saved is added to a temporary git directory using the [git add .] command.

"Added" files can then be committed to the git repository using the [git commit -m""] command. This requires commenting for each commit allowing you to see the changes that have been made and provide backup points.

The code is uploaded to the GitHub repository through the [git push] command.

Deployment to GitHub pages is done through the GitHub site; through settings, then GitHub pages and setting the live pages URL.

All versions are held on the master branch.

Prior to deployment, the site could be viewed in real time by adding the following command to the terminal window, and selecting "Open Browser" from the modal that displays: python3 -m http.server

To run localy:

Log in to GitHub and click on repository to download select Code and click Download the ZIP file. after download you can extract the file and use it in your local environment Alternatively you can Clone or Fork this repository into your github account.

Code Validation

At the and of the project I used two websites to validate a code

W3C CSS Validator to validate CSS
Nu Html Checker to test HTML

Css and html is validated warnings remain on css due to webkits (these have been left to remain as they purely browser intigration)

Testing

Testing has been carried out using the following devices/browsers:

Desktop
Chrome
Firefox
Chrome Responsive emulator
Huawei P30 Pro
Samsung Galaxy 7

Page Layouts

I used http://ami.responsivedesign.is/ (source for top picture) to see how the site displays on ranging devices and their viewports, all pages, links, icons performed as expected on all devices.

Target audience Testing

Target audience testing was maintained through out the development of this project. It was used for design feedback wants of the audience and to uncover any bugs in the application. I had 3 children and 6 adults participate in this testing with the instructions of try to break this.

Navigation Bar

Test 1: Click each navigation link
Result: Verify page navigates to correct page
Test 2: Move through responsive sizing
Result: All elements respond to test 1
Test 3: Hamburger icon activates at right point and links respond
Result: Hamburger activates at correct point and links respond to test 1

Navigation HomePage

Test 1: Click each navigation link
Result: Verify page navigates to correct page
Test 2: Move through responsive sizing
Result: All elements are responsive and fufill test 1

Gameboard (.grid)

Test 1: Images display in correct place and are responsive
Result: All images correct and grid responds in intended manor.
Test 2: noselect and click and drag abilities removed
Result: noselect and click and drag abilities removed so unable to select or drag cards in grid
Test 3:

JavaScript linked buttons

Test 1: Stopmusic, stops the music on onclick function
Result: Stops the music on onclick function
Test 2: Playmusic, starts the intend music on onclick function
Result: Starts the intend music on onclick function
Test 3: Restart, reloads the current page to restart the game on onclick function
Result: Current page is reloaded on onclick function

Moves counter

Test 1: Clicked card displays count for each card clicked in moves div
Result: Displays each card clicked
Test 2: CLicking outside cards to test only cards move counter
Result: Only cards being clicked moves counter
Test 4: Moves position displays correctly
Result: Moves shows in correct positioning on responsive design

Timer

Test 1: Timer Displays correctly
Result: Displays minutes and seconds
Test 2: Timer starts at set times
Result: Only starts when overlay start game is clicked
Test 3: Timer stops at correct point
Result: Timer stops when game is over
Test 4: Timer position displays correctly
Result: Timer shows in correct positioning on responsive design

Js functions

Test 1: Functions display intend result and do not contradict any other function
Result: All functions display intended results
Test 2: Game used in different ways
Result: Functions complete intended function correctly

Preformance Testing

I used Lighthouse (https://developers.google.com/web/tools/lighthouse/), prefomance checker to assess the performance of my site. screenshot below:

Bugs & Fixes

Timer starts when page loaded - added empty global var and assigned start function to fill
Game able to be played before timer start - overlay added with pointer null to a start game fuction
When clicked in quick succesion 3 card can remain displayed. Fixed with global var counting cards flipped and not allowing more than 2 with var being reset when check match is called.
Score displayed to decimal point, fixed by putting sum through new var and Math.round().
Stop timer function not working - Scope changed to correct error.

Credits and Acknowledgements

Code snippets

Snippets of code that I edited and used as examples are listed below:

Button styling: https://fdossena.com/?p=html5cool/buttons/i.frag
Navs from: (https://getbootstrap.com/docs/4.0/components/navs/)
Columns from: (https://getbootstrap.com/docs/4.0/layout/grid/)
Contact Form from: (https://getbootstrap.com/docs/4.0/components/forms/)
Spacing Utilities - (https://getbootstrap.com/docs/4.0/utilities/spacing/)
Elements from my previous project including readme format.
Fireworks css - (https://codepen.io/yshlin/pen/ylDEk)

code-institute-submissions / ms2-project-4 Goto Github PK

ms2-project-4's Introduction