Title

LightSpeed

Milestone Project 2 Interactive Front-End Development

Description

• LightSpeed is a game designed to be fun, enjoyable and a light-hearted way to pass the time. Although slightly challenging the game can be beneficial to cognitive abilities and can be played anywhere, anytime and by any ages.

User Experience (UX)

First Time Visitor Goals

As a First Time Visitor - As a game player I want a game that is visually appealing and fun = The game is based on the retro arcade or early computer games and the graphics and colour choices should reflect this.

• As a First Time Visitor - As a game player I want a game that is easy to understand while still testing my cognitive abilities = The game is a very straightforward memory game with a random sequence. Levels and game progress can be seen at the top and bottom.

• As a First Time Visitor – As a game player I want to be entertained and to enjoy the experience = The game can be a personal challenge or just help pass the time.

Returning/Frequent Visitor Goals

• As a Returning Visitor – I would like the game to stay familiar = In it's current form the game, rules or design, do not change.
• As a Returning Visitor - I want to play the game whenever I wish = the game can be played on desktop, tablet or mobile.
• As a Returning Visitor – I want the game to continue to be a challenge = The random sequence of the game ensures that no two levels will be the same.

Design

General design

• The game has a space style image set as a background to invoke a retro feel to the game. the circle of the game buttons represent planets, and also correspond with the planets in the background image. When the start button is pressed the rules/steps of the game are shown as the player progresses.

Colour Scheme

• The game has a light and colourful background (#9fadb2), text colour of black (#000) and white (#fafafa), with the main game buttons in different shades of purple (#d111df, #5c036d, #efc0f2 ), green (#35df5f, #1b8019, #b4eec0), blue (#5f5de5, #a8def5, #020c5a) and orange (#dd6b1f, #f7d19c, #a32d05).

Typography

• The main font used for the game is Press Start 2P as this provides an early computer/arcade game style - [https://fonts.google.com/specimen/Press+Start+2P]

Imagery

The background image.

The tab Favicon.

Icon on the start button.

Wireframes

• The initial concept of the wireframe design was to resemble/recreate the style of the now retro arcade or early computer game. The game buttons match the squares in the background image. There is a start button below the buttons, and a progress panel below that where player progress would be shown. the intention was to have a drop-down menu on the right of the screen to state the rules of the game.

Features

• Game is responsive on most mobiles and tablets
• Game has a responsive start button and buttons required to play the game
• Game responds and resets when the player has made a correct or incorrect move
• Game has text to show game/player progression
• Game is available on most main internet browsers Microsoft Edge. Mozilla Firefox. Google Chrome.

Languages Used

• HTML5 - [https://en.wikipedia.org/wiki/HTML5]
• CSS3 - [https://en.wikipedia.org/wiki/CSS#CSS_3]
• JavaScript (ES6) - [https://en.wikipedia.org/wiki/JavaScript]

Frameworks, Libraries & Programs Used

• Google Fonts: Google Fonts was used for the main font.

• Font Awesome: Font Awesome was used for the rocket icon.

• Git: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub: GitHub is used to store the project code after being pushed from Git.

• [www.Responsivedesignchecker.com]

• Pencil: - Pencil was used to create the wireframe.

• Freepix: - Both images were obtained from this site.

Testing

• Lighthouse test report: Lighthouse test for mobile

• Lighthouse test report: Lighthouse test for desktop

• W3C Markup Validator report: One warning was issued within the HTML validation stating that 'sections lack headings' - This does not affect the game in any way.

• W3C CSS Validator report: No errors were found within the CSS code.

• Javascript Validator report: [https://beautifytools.com/javascript-validator.php] was used to test JavaScript. No syntax errors were found.

• Jest: Steps take to install Jest

• (1) To set up the new npm package type 'npm init'

• (2) To install type 'npm install --save-dev jest'

• (3) Follow the instuctions and questions in the terminal

• (4) write specific tests

• (5) Run tests by typing 'npm test'

• I fully acknowledge and understand that, in a real-world scenario, an extensive set of Jest tests would be more comprehensive.

Deployment

The site was deployed to GitHub pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the Main Branch, then click "Save".
• The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

Local Deployment

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

• git clone https://github.com/CarylThom/Light-Speed.git

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Credits

Acknowledgements

• Reviewing/revisiting lessons from the relevant sections of the course via Code Institute.

• Mentor Tim Nelson at Code Institute

• Tutors and student support at Code Institute

• Stack Overflow [http://www.stackoverflow.com]

• w3schools [http://www.w3schools.com]

Content

• Content was written by the developer.

Media

• Image(s) were found on [https://www.freepik.com/]

• The image(s) attributed to: Background image by @upklyak . Favicon image by freepik