For first time visitors:

• Instructions are clearly visible.
• Engaged with game from the initial onset.
• Gameplay is intuitive.
• To play on various devices and screen sizes.

For return visitors:

• Gauge performance.
• Play game on various devices.

As the developer:

• I aim to provide a fun and interactive experience.
• I aim to encourage continued use of the game.

I designed a prototype for the memory game on paper first and then moved into Balsamiq where I created numerous wireframes to fit mobile, tablet and desktop devices which provided me with a clear visual outline of how I wanted my game to appear. Some changes were made along the development stage as I experimented with different layouts to suit the needs of the game.

• Typography

Fonts used: Courier New, monospace. It stands out well against the background and is easy to read.

• Colour Scheme

I played around a lot with different colour schemes and settled on the ones below for their fresh colour feel. while providing plenty of contrast.

• Imagery

All illustrations used for the cards are my own original designs that i created in Adobe Illustrator.

The background image is a green coloured leopard seamless pattern created in Adobe Illustrator.

The site displays properly on a wide range of screen sizes.

Mobile view

Tablet view

Desktop view

On loading, the instructions are clearly visible below the game title.(positioning is relative to screen size). This satisfies the user need to quickly understand how to play the game.

The time is tracked once the game starts and continues until all pairs are mateched. The timer is placed just below the game board. When the player completes the final pair the time taken as well as how many moves it took to get there is displayed in the modal screen display area. This satisfies the players need to be able to gauge their performancee.

When all cards are matched, a modal screen is displayed with a congratulatory message and details of the time taken and how many moves it took to complete.

Extra features I'd like to implement

1. More levels to increse difficulty.
2. Sound effects to clicked on cards.
3. More detailed instructions added to a modal with all extra features included.

• HTML5
• CSS
• Javascript

• Git Git was used for version control.
• GitHub GitHub is used to store the projects code.
• Gitpages Gitpages are used to deploy the site.
• Balsamiq was used to create wireframes for this project.
• Fontawesome icons were downloaded from Font Awesome.com.
• Chrome Developer Tools used for layout and responsive testing.
• Wave used for accessibility testing.
• favICO.com used for creating favicon.
• W3 Validator used to test html and css code.
• Jshint used to validate Javascript code.
• color.a11y.com used for testing colour contrasts.

• Code Validation

• The Jungle Memory Game has been tested and validated by the W3C HTML Validator, the W3C CSS Validator and the JShint validator. All minor errors found were fixed immediately.

• HTML Validation Image

• CSS Validation Image

• JSHint

  The Javascript file was validated using JSHint, with the following result. The New JavaScript features (ES6) option was ticked in the Configure menu.

  

• WAVE Web Accessibility Evaluation Tool

  The WAVE tool was used to test the page for accessibility. The inital result produced 8 contrast errors, these were caused by the colour of the ink used for the times (fushia as a drop shadow behid the green text). I updated the colour to black for the drop shadow and that fixed the issue.

  

• Lighthouse Testing

• The Website has been put through the Chrome Dev Tools which tests for the following:

  • Performance - page preformance on loading.
  • Accessibility - ensuring accessibility for all users and how it can be improved.
  • Best Practices - Examining whether the site conforms to industry best practices.
  • SEO - Which stands for Search Engine Optimisation. Is the site optimised for search engine result ranking.

• Chrome Desktop Lighthouse result

  

• Chrome Mobile Lighthouse Result

  

• Accessibility Testing

• Ran Website through a11y to test colour contrast and found no issues.

• Responsive Testing

  • Google Chrome DevTools and Responsive Design Checker were used to test the responsiveness of the website.

• Manual Testing

  • To ensure that everything was working properly and up to a professional startard, I conducted a number of manual tests.

  • Tests Conducted

    • Landing/game Page
      • Ensure name is clearly seen at the top of page.
      • Ensure responsiveness on all screen sizes.
      • Ensure instructions are clearly defined and obvious.
      • Ensure engagement and entertainment from initial load.
      • Ensure flexibility to be played on various different devices.
      • Ensure that when cards are clicked, they flip over.
      • Ensure that matching cards stay flipped.
      • Ensure that when all cards have been matched that the congrats modal pops up displaying the time and number of moves it took the player to complete the game.
      • Ensure that the x and play again buttons are working.
      • Ensure ability to gauge score.
      • Ensure mental stimulation.
      • Ensure hover effects are working for the buttons.
      • Ensure the exteranl link at the botton of my screen is working.
      • Ensure that link opens in a new tab.
      • Ensure the footer is fully responsive.
      • Ensure fun is to be had.

• Bug Fixes

• After testing the site on different screen sizes, i discovered some text was not aligned properly which on further investigation appeared to be due to margin and padding issues.

  I resolved with media queries and adjusted the margin and padding.

This project was built on the Gitpod IDE using the Code Institute template found here:
https://github.com/Code-Institute-Org/gitpod-full-template

The follwing steps were taken to deploy my website to GitHub pages.

1. In the GitHub repository, navigate to the Settings tab.
2. In settings, scroll down to the Pages tab.
3. Next, select the branch main under Source and click save.
4. Finally, the page should automatically refresh, making the deployed link visible.

I used stackoverflow for the shuffle function. w3schools for the timer. w3schools used to stop timer once all pairs are matched. w3school To display the modal on winning the game. The w3 schools Learned about element attributes and how best to set them.
I used the Udemy "Modern Javascript" course for information regarding Modal screens, event delegation and arrow functions.
The following youtube tutorials and code used in the development of my project: Youtube Youtube Youtube The Code Institute course material.

• Acknowledgments

A special thanks to my mentor, Daisy who always steered me in the right direction and shown great empthy as I struggled through this module. I feel more time is needed to properly devle into JS. Also, a big thanks to the girls in my group for their continued support throughout this whole process and Kasia for always checking in with least expected.