The Riddler

View the live project here.

This is my Milestone Project 2. It is a Mix and Match Card Game, base and inspired by the DC Comics.

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 game which is to match 16 pair of the cards and learn more about how to play it and win the game.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the welcome screen on the game and just press any button to begin.
    3. As a First Time Visitor, I want to look how to match the cards before the time runs off.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to beat the game with less flips and more time.
    2. As a Returning Visitor, I want to find the best way to beat the game.

• Design

  • Colour Scheme

    • The two main colours used the Riddler character in the comics is green, and purple.

  • Typography

    • The Anton font is the main font used throughout the whole game with Oswald as the fallback font in case for any reason the font isn't being imported into the game correctly. Anton is a pretty strange font, so it is the best for theme game based on the riddler.

  • Imagery

    • Imagery is important. The large, background hero image is designed to be catch in the eye and also minimal. It also has a villain twist, aesthetic.

Features

• Responsive on the most devices

• Interactive cards

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

1. Google Fonts:
   • Google fonts were used to import the 'Anton' font into the style.css file which is used on all pages throughout the project.
2. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
3. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
4. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
5. Freepick: -Freepick was used to find pictures and images for the game.
6. Flaticon: -Flaticon was used to create a touch cursor for the game.

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
• W3C CSS Validator

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 game and learn how to play and win!

     1. Upon entering the game, users are automatically greeted with a clean and easily readable text and with one click or enter jump to he game. Underneath there is a Hero Image on the left is the timer and on the left the flips of the cards and below the cards to play with.
     2. The main points are made immediately with the hero image and the cards to play the game.

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

     1. The game has been designed to be one page and easily aproach the user. At the top left is the timer and on the top right is the flips.
     2. At the bottom of the game you can see the footer with the Royalties of the game.

• Frequent User Goals

  1. As a Frequent User, I want to finished the game with differnt approaches.

     1. The user would already be comfortable with the game and can easily finished the game with more time and less flips.

Further Testing

• The Website was tested on Google Chrome, Microsoft Edge, Mozzila Firefox and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone 5, iPhone 8 & iPhone11.
• 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

• On some mobile devices the Riddler logo Image pushes out the size of screen out more than any of the other content on the page.
  • Also the welcome screen, winning page and loser page on some mobile devices it is not fit very well.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Credits

Content

• All content of the game is inspired by the DC comics.

• All content of the characters, images, pictures and text lines is property of DC Comics USA.

• All content of the code is created by me and the esthetic of the game.

Media

• All Images is from DC Comics.

Acknowledgements

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.

• Pure CSS, Stackoverflow, css-tricks, w3schools, Web Dev Simplified and nikolaskotsikos.github.io