World of Games

View the live project here.

This is a game website World of Games. A user can choose between Guess the Number and Memory game. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for users who want to play the games.

Design

Colour Scheme

• The main colours used are black, grey and purple/green for the buttons.

Typography

• The "Source Sans Pro" font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

Imagery

• Imagery is important. There is a video in the header and its purpose is to be striking and catch the user's attention.

Wireframes

• Wireframe - View

Features

Navigation bar and Footer

• Each page features a navigation bar that includes Home, Guess the number, Memory and High scores. On a screen size smaller than a tablet the navbar becomes a collapsible element.

• Each page features social media links at the bottom. They redirect a user to the social media platform opening it in a new window.

Home page

• Users can learn about the purpose of the site on the Home page.

Guess the number game

• Users have to guess a number from 1 to 500. They are given hints if the number they guessed is too high or low.

• When a user guesses the correct number, there is a pop-up asking their username. After the user writes it, they are informed of their result (number of guesses) and the high score table appears listing the top 5 scores for that game.

Memory game

• Users have to flip the cards and match the symbols in pairs.

• When all the pairs are matched, there is a pop-up asking a username. After the user writes it, they are informed of their result (number of tries) and the high score table appears listing the top 5 scores for that game.

High scores

• There is a High score page with the high scores for both games that can be accessed through the navigation bar or with a link under the description of each game on the Home page.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
    3. As a First Time Visitor, I want to see links to the social media platforms.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find the content and the games the site offers.

  • Frequent User Goals

    1. As a Frequent User, I want to see the high score tables.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Result
• W3C CSS Validator - Results
• JSHint - JavaScript code passed through a linter with no major issues.

Testing User Stories from User Experience (UX) Section

First Time Visitor Goals

1. As a First Time Visitor, I want to easily understand the main purpose of the site.

   Upon entering the site, users are automatically greeted with the name of the website and its purpose. Underneath there is a dropdown icon that scrolls to the section with the game descriptions and the buttons to start the games. Underneath the video there is a navigation bar.

   

2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

   At the top of each page there is a clean navigation bar.

   

3. As a First Time Visitor, I want to see links to the social media platforms.

   There are links to the social media platforms in the footer of every page. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

   

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the content and the games the site offers.
     1. At the home page there are short descriptions of the games.
     2. The navigation bar clearly highlights the pages with different games.

• Frequent User Goals

  1. As a Frequent User, I want to see the high score tables.

     1. After the user completes a game, there is a pop-up asking their username. After the user writes it, they are informed of their result and the high score table appears listing the top 5 scores for that game.

        

     2. There is a High score page with the high scores for both games that can be accessed through the navigation bar or with a link under the description of each game on the Home page.

        

Further Testing

• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone, Samsung and Motorola.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

• When testing responsiveness on Chrome DevTools some media queries weren't loading properly. There was more testing done on different browsers and the media queries were functioning properly.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used to import the 'Indie Flower' font into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used to add icons for aesthetic and UX purposes.
4. jQuery:
   • jQuery was used to create Guess the Number and Memory Game.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
6. GitHub:
   • GitHub is used to store the project's code after being pushed from Git.

Deployment

GitHub Pages

• The project was deployed to GitHub Pages using the following steps:

1. Logged in to GitHub and located the GitHub Repository
2. At the top of the Repository, located the "Settings" button on the menu.
3. Scrolled down the Settings page until I located the "GitHub Pages" Section.
4. Under "Source", clicked the dropdown called "None" and selected "Master Branch".
5. The page automatically refreshed.
6. Scrolled back down through the page to locate the now published site World of Games in the "GitHub Pages" section.

Credits

Code

• TEMPLATED: CSS, HTML5 & Responsive site template Full Motion by TEMPLATED used throughout the project: index.html basic design, buttons, footer.
• Bootstrap4: Bootstrap Library used throughout the project: Nav Bar, input field.
• Memory game: The code from the tutorial on Marina Ferreiras Github page was used and modified to create the Memory game.
• CSS rule how to make the scrollbar invisible in style.css line 9 found on Stack Overflow - link
• CSS rule for adjusting the background video in style.css line 17 and 23 found on JSFiddle - link
• Example code for scroll animation in scrollScript.js line 2 found on JSFiddle - link
• Example code for the function makeHighScoreTable in highScore.js line 25 found on Stack Overflow - link

Content

• Template for the README.md found on https://github.com/Code-Institute-Solutions/SampleREADME

Media

• All images were taken from freely-usable source Pixabay, Vecteezy and Pexels.

  1. backgroundMemory.png - Image by VintageSnipsAndClips from Pixabay.
  2. mandala1.png - Image by Gordon Johnson from Pixabay.
  3. mandala2.png - Image by Gordon Johnson from Pixabay.
  4. mandala3.jpg - Floral Vectors by Vecteezy.
  5. mandala4.png - Image by Gordon Johnson from Pixabay.
  6. mandala5.png - Image by Anne-marie Ridderhof from Pixabay.
  7. mandala6.png - Image by Anne-marie Ridderhof from Pixabay.
  8. puzzle.jpeg - Image by Pixabay.
  9. numbers.png - Image found here

• The video was taken from freely-usable source Pixabay.

  1. Space.mp4 - Video by Vimeo-Free-Videos from Pixabay.

Acknowledgements

• My Mentor for continuous helpful feedback.
• Marina Ferreira for her tutorial on how to create a Memory game with JavaScript.
• TEMPLATED for their beautiful Full Motion site template.