Whisper's World

Whisper's World is a simple, pick-up and play card matching game that is aimed at Children aged 5-10 years old. The game is built primarily in Javascript with minimal HTML and CSS styling to keep the focus on the game itself. The game has been tested throughout development to ensure functionality and appropriacy for it's intended audience. The game aims to provide an interactive tool to teach children how to use a mouse or a touch-screen in a fun and challenging way.

Features

The project includes a variety of features:

The Landing Page

The project features a simple landing page that explains the rules of the game to the user and allows them to click to start when they're ready to begin. Audio onclick features that play a cat meowing sound has been added to the start button as an extra interactive touch.

The Game Page

On the game page itself, a timer has been implemented to create an element of challenge for the player. This has been set at 2 minutes intentionally after play-testing was completed by user's within the target demographic (Age 5-10) and this was felt to be most fair for all. There is also a score meter to inform the player how many matches they have made and a reset button underneath the game board to allow the user to restart the game at any point.

In addition to this, looping audio has also been added to the game page, but the audio bar has been left in to allow the user to switch this off/on depending on their personal preference.

The functionality of the game shuffles the cards on the grid each time the game is restarted, cards will be removed from the grid when paired with their matching counterpart and an alert message is in place to congratulate the player upon winning the game. This then invokes a function to restart the game.

Features Left to Implement

Difficulty levels - Easy, Medium and Hard - Each of these will adapt the amount of time the player is given to complete the game, thus adjusting the level of challenge.
Add alternative audio tracks that can be chosen by the user upon starting the game

Testing

A number of testing methods have been used throughout the creation of Thanet Gaming Club. The navigation elements, both internal and external have been checked to ensure they lead to the right page and that all external links open in a new tab.

The Lighthouse feature of Chrome Dev tools has been used to ensure a consistently high score in all 4 areas of testing:

*Performance

*Accessibility

*Best Practices

*SEO

Site colours and features have been chosen to compliment one another and text color has been chosen to contrast against backgrounds to maximise UX and accessibility. The Site has been tested on a range of devices and on 3 different browsers to ensure a consistent performance.

-Chrome

-Firefox

-Edge

The relevant media queries have been implemented to ensure a smooth UX site-wide for all screen sizes. This has been tested using Chrome developer tools and finalised using - http://ami.responsivedesign.is/#

Alt images have been added in the script.js file using the setAttribute method to ensure accessibility was kept at 100, site-wide.

Bugs

A number of bugs were found during the construction of the project.

Fixed a bug in the script.js file that was causing an issue wherein the card array would not randomise correctly.
Fixed a bug with the audio files not loading correctly - this turned out to be an issue with file paths not being entered correctly.
Fixed a bug in the script.js that was causing issues with the game grid loading correctly.

Validator Testing

HTML
- No errors were returned when passing through the official HTML W3C Validator
CSS
- No errors were found when passing through the official CSS Jigsaw Validator
Javascript - No errors were found when passing through JS Hint

Unfixed Bugs

None to report.

Deployment

This site has been deployed to GitHub pages - Deployment steps are as follows:

From the Github repository, navigate to the settings tab
From the source section drop-down menu, select the "Master" branch
Once this has been selected, the page will refresh with a ribbon display to indicate that the site has been deployed successfully.

The Live link can be found here - https://steviemigan.github.io/whispersworld/

Credits

Content

All card images, Whisper the witch image, favicon and audio files have been credited below in the media section -
Fonts - "Rock Salt" has been sourced from https://fonts.google.com/
Code for the timer element of the game has been sourced and adapted from - https://www.geeksforgeeks.org/javascript-timer/