Interactive Frontend Development - Code Institute project

It is a browser game designed for testing user's reflexes while keeping them entertained. The increase in speed after reaching the door provides a steady challenge and keeps the user hooked in. Let's see how fast their fingers really are!

This game is designed for anyone who doesn't wish to install anything on the PC/phone, just to have a quick relax (I use it in public transportation). There is plenty of room for future updates.

1. First Time Visitor Goals

• As a first-time visitor, I like the fact that I don't have to install anything to play.
• As a first-time visitor, I would like 'my' square to move backward and vertically.
• As a first-time visitor, I like the progressive challenge increase

2. Returning Visitors Goals

• As a returning visitor, I would like to beat my previous high score
• As a returning visitor, I would like to see a high score wall

3. Frequent Visitor Goals

• As a frequent visitor, I would like to see if there are any new updates and features

1. Colour Scheme

• The three main colors used are gray, blue, and gold.

2. Typography

• The Black Ops One font is the main font used throughout the whole project. Black Ops One is old-school gaming looking font and works well with the game's design; it is both attractive and appropriate.

3. Imagery

• The background colors work well with the rest of the design and allow for good color contrast. The background adds a modern, aesthetic look.

1. Plan #1: https://github.com/geoeskel/milestone_project-2/blob/master/Wireframes/Plan%20%231.jpg
2. Plan #2: https://github.com/geoeskel/milestone_project-2/blob/master/Wireframes/Plan%20%232.jpg
3. Logic: https://github.com/geoeskel/milestone_project-2/blob/master/Wireframes/Logic.jpg
4. End-effect: https://github.com/geoeskel/milestone_project-2/blob/master/documentation/wireframes/End%20result.PNG

1. Interactive canvas with the game
2. Alert button with instructions on page load
3. Alert box when reaching the door
4. Lives counter
5. Speed counter
6. No external code

1. Radio button for changing color set/background (nicely styled with CSS/JQuery/Boostrap)
2. Different language versions
3. Signup section for future updates

1. HTML5
2. CSS3
3. JavaScript
4. Google fonts (https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap)
5. Bootstrap (https://getbootstrap.com/docs/4.0/components/modal/)
6. Git
7. GitHub

JSHint Validator: https://github.com/geoeskel/milestone_project-2/blob/master/documentation/validators/JavaScript%20validator.PNG

W3C CSS Validator: https://github.com/geoeskel/milestone_project-2/blob/master/documentation/validators/CSS%20validator.PNG

1. As a visitor, I wasn't to easily understand the main purpose of the game and navigate without using external documentation/help.

• Upon entering, visitors are greeted with a clear design and a 'how-to-play' button which explains the purpose of the game and the mechanics
• The design is very simple and I didn't manage to find any way in which a user can brake it

2. Further testing

• I have tested the website's content on various devices and browsers (IE, Edge, Chrome, Safari, Firefox) to see how it actually looks like and making sure that all the features available on desktop are properly presented on smaller screens.

3. Known bugs

• I found only one bug (ability to highlight the game's title by repeatedly clicking with a mouse); it was fixed by implementing "-webkit-user-select: none;" into style.css.

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.
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.

1. Wallpaper was downloaded from https://www.wallpaperflare.com/blue-and-black-wallpaper-texture-hexagon-pattern-geometric-shape-wallpaper-pmzud/download/1242x2208

1. The initial inspiration was taken from 'cross the road' games like 'Jumper Frog' and 'Hi-Speed Road-Cross':

• http://www.indieretronews.com/2014/02/hi-speed-road-cross-cross-road-or-be.html
• https://www.multiplication.com/games/play/jumper-froghttps://www.multiplication.com/games/play/jumper-frog)

2. My Mentor for continuous helpful feedback.
3. My WhatsApp CodeInstitude students group for ideas about finishing touches and testing