1. UX
   • User Stories
   • Viability
   • Responsive
   • Frameworks
   • Typography
   • Colors
   • icons
   • Wireframes
   • Logo
2. Features
   • Existing Features
   • Features left to implement
3. Technologies Used
   • Front End Technologies
4. Testing
   • Validators
   • Testing Methods
5. Deployment
   • Local Deployment
   • Remote Deployment
6. Credits
   • Content
   • Media
   • Acknowledgements

This game has been created specifically for young children. (3-7 year olds)

• As a user, I want to have fun with a simple game

• As a user, I want to choose a different experience depending on the difficulty.

• As a user, I want to know if I lose

• As a user, I want to be rewarded with recognition for winning.

• As a user, I want some instructions so I know what to do

• As a user, I want to be told when it matches

• As a user, I want the game to run on different screen sizes.

• As a user, I want to be told in different ways whether the chosen pokemon match or not.

• As a user, I want to improve my hand eye co ordination and develop simple early ICT usage skills.

Am I Responsive? was used to test how responsive the website is on different devices.

• Bootstrap

• Bootstrap is an open source library with access to reusable bits of code for html, css and javascripts.

• jQuery

• jQuery is an open source library that makes using javascript easier and quicker. It simplifies a variety of multiple lines of javascript code by putting it into a single line of jquery code.

• jQuery UI

• jQuery UI is a user interface interactions which allows the user to control more aspects of their code, by building further upon jQuery (includes interactions, effects, widgets, and themes). This has been used in the project for the pokemon animations as they come out of the pokeballs and shake.

I used the font recursive throughout my project as it looked most similar to the font used in the Nintendo game boy games.

1 Google Font was used throughout this website:

• "Recursive", sans-serif;

Colours have been chosen that reflect the pokemon logo, and some of the themes from the popular series.

• #fbcb04 Used throughout as Pokemon's Primary colour in the logo.
• #3a6eb8 Used throughout as Pokemon's Secondary colour in the logo.
• #ff1010 used to make the win page text stand out
• #e9e799 used for the background of the win page as a soft warm colour for positivity.
• #25689d used for the lose page text as this and the background colour fit cleanly together, but colder colours help emit sadness.
• #c2cccf used for the lose page background, as its a colder colour and stands nicely behind the text and image

Font Awesome 5.13.1 The following 4 Font Awesome icons were used.

• [Sound]https://fontawesome.com/icons/volume-up?style=solid - used on page to mute website

• Click here to see the project Wireframes

• GIMP was used to resize the grass image so it was lower pixals and would load quicker

• Win/Lose conditions

  • Timer set up so when it hits zero a modal comes up to say game over
  • If all pokemon are out of the pokeballs, a modal comes up that says "you win"

• Have different difficulties

  • Players can choose a pokeball at the start to represent easy, nmormal and hard mode. Upon activating the start button, the specific pokeballs of that stage pop up, with more pokeballs as the difficulty gets harder.

• Animations

  • Pokemon bounce as they pop out of the pokeballs

• Sound effects

  • Sounds are taken from the pokemon gameboy game.
  • Sound plays when a ball is clicked and pokemon pops out.
  • Different sound plays when they dont match.
  • Another different sound plays when they do match
  • Winning sound effect plays when all pokemon are out of the pokeballs
  • a losing sound plays when the timer hits zero (only works on desktop as mobile devices don't allow for modals to play music)

• Rules and how to play screen

  • Group of pages set up which explain the rules of the game, accessible from the main menu.

• Update where clicking on anything that sends the player to the difficulty select page doesn't reset the entire game (such as mute needing to be reselected).

• HTML

  • This project uses HTML to create the main functions of the website.
  • HTML

• CSS

  • This project uses CSS to override the Bootstrap elements and apply the determined styling
  • CSS

• Javascript

• This project uses Javascript to create functions, rules and effects in order to make the game work as intended.

• Javascript

• HTML

  • W3C HTML Validator "Document checking completed. No errors or warnings to show."

• CSS

  • W3C CSS Validator "Congratulations! No Error Found. This document validates as CSS level 3 + SVG !"

• JSHint

  • JSHint javascript Validator

For information on the testing, follow the link to the document here

*The Pokematch repository was developed using GitHub Workspaces, and all commits were pushed to GitHub using Git.

*Commits were pushed every time important sections were completed in order to create useful ongoing checkpoints.

• *In order to locally deploy the website, the following was actioned (using Windows 10):

1. Navigate to GitHub repository:
   • adam181189 repository
2. Open the Pokematch repository:
   • Pokematch repository
3. Click on the code dropdown option and select download zip
4. Create a new folder called Pokematch and unzip the files in that new folder
5. Now iis is required, this can be done by going to run and typing in appwiz.cpl
6. Now click on turn windows features on or off
7. scroll down to internet information services
8. Open folder and open Web Management tools and tick IIS Management Console
9. Go to This PC and click on the local disk that houses the operating system.
10. Open folder called inetpub
11. inside here find wwwroot
12. Move your pokematch folder into this folder.
13. Go to the following link http://localhost/pokematch/index.html

• Deployed Site:

  • https://adam181189.github.io/Pokematch/

*In order to deploy the website, the following was actioned:

1. Navigate to GitHub repository:
   • adam181189 repository
2. Open the Pokematch repository:
   • Pokematch repository
3. Click on the Settings tab at the top:
   • Settings
4. Scroll down to the GitHub Pages section.
5. The first drop-down field should be Source with None pre-selected.
6. Select master branch from the list.
7. The page should refresh.
8. Scroll down to the GitHub Pages section.
9. There will now be a deployed link:
   • The site is published at https://adam181189.github.io/Pokematch/

• Most written content was my own.
• "Welcome to the world of Pokemon, I am the Pokemon professor" is a phrase used at the start of the pokemon games by Professor Oak so was included to introduce him as part of the "how to play" section.

• Pixabay - Grass background image
• Bulbapedia All other images came from this website. All images are copyrighted property of Nintendo.
• Sounds All used sounds were found and downlaoded from this page.
• Hourglass image Used as part of the timer.

Inspiration for this project was drawn from a video game series I have enjoyed since I was a child, and the need for a simple ICT programme that the children can use in my job. We can use this to assess how well the children in our group can complete a program from start to finish, and also help to build up memory function skills.

I also want to thank some of the members on slack May-2020 group as they looked at my project and suggested some changes, and bugs that were in my project. I also want to the thank the children at the pre school i work at for playing the game and telling me what they enjoyed about it.