Code institute Project portfolio 2 Cars Game CI_PP2_CG Is a web page developed to be a Retro car game by using of different methods and technics, like animations in CSS and algorithms in JS to make it interactive.

• HTML "HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. [1] "

• CSS "Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]"

• JS "JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices. .[3]"

Live web page

1. Project Goals
   1. User Goals
   2. Site Owner Goals
2. User Experience
   1. Target Audience
   2. User Requirements and Expectations
   3. User Stories
3. Design
   1. Design Choices
   2. Colour
   3. Fonts
   4. Structure
4. Technologies Used
   1. Languages
   2. Frameworks Libraries Tools
5. Features
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. JS Validation
   4. Accessibility
   5. Performance
   6. Browsers support
   7. Testing user stories
7. Bugs
8. Exeptions
9. Deployment
   1. JSemail api method
   2. Share the code
   3. Fork the code
   4. Clone the code
10. Credits
11. Contributing
12. License
13. Acknowledgements

• Look for a free vintage game.
• Look for a straightforward website.
• Enjoy a straightforward game.
• Score some points.
• A brief guide explaining how to play the game.

• Create a straightforward, time-tested game to showcase some abilities.
• Offer a manual or instructions on how to play the game.
• Design a game that includes a navigation bar and feedback.

• The general public.
• People looking to play a free classic game.
• Kids.

• Responsive interactive page design.
• A page with simple and straightforward navigation.
• Instructions are provided with clear information.
• Social media and links also function.
• A responsive layout that functions on various screens.

First time user:

1. Desires simple navigation.
2. Is interested in playing.
3. Desires to play a traditional game.
4. Desires to solicit comments or opinions.
5. Is curious about social media.
6. Be familiar with the game's rules

As a returning user, We want:

7. be aware of the result and improve.
8. A website where you may unwind and play a simple game.
9. Offer feedback or file bug reports.
10. Locate the page's social media accounts.
11. Use a website with a straightforward navigation bar.

As the site owner, we want:

12. Participants who enjoy the game.
13. A responsive and interactive page that is clear.
14. Simple method for contacting us and providing feedback.
15. Give the players a sense of being in a traditional setting.

The game was created with the intention of evoking memories of vintage 16-pixel games and was heavily influenced by its vintage user interface.

Using the Visual Studio colors setting, the color tones were specifically selected to match the concept and to a straightforward and approachable style.

Was searched for a friendly font and came upon ROBOTO from GOOGLE, which has been utilized in smartphones. The most common font used on those platforms, which account for the majority of data flow, was used.

Following the principles of UXD (user experience design), the page's structure was made to be fluid and simple to read. To determine the sort of design used in contemporary food pages, research was conducted at the most well-liked Classic games. the following hues associated with the theme (Classic Car game)

The website was composed of five pages:

• The home page, which includes the primary article, contact information, and social media links.
• Game page where the interactive platform that interacts with the main page is located and where the level and vehicle are chosen.
• The game's instructions page, which enables visitors to play, sadly does not work for blind persons.
• A 404 page, which is created for every broken link, prompts the user to rewrite the page.
• The page with the active form is called "Contact Us," and it provides information to us via email so we may read reviews and make improvements to the website.

Home

PC view

Tablet view

Phone view

Contact Us

PC view

Tablet view

Phone view

Instructions

PC view

Tablet view

Phone view

Game

PC view

Tablet view

Phone view

404

PC view

Tablet view

Phone view

• HTML5
• CSS
• Java Script

• Visual Studio Code
• Git
• GitHub
• Gitpod
• Balsamiq
• Google Fonts
• W3schools Colors
• Favicon.io
• ion icons

The page was created and influenced by old-school user interface (UI) games, where colors were blended and changed periodically to try to give users a sense of being in an antiquated setting while using contemporary visuals.

Three HTML components make up the section. The first is the home page, where the user made the decision to play or read the content, the second is the contact us page, where the user can write us with their thoughts by email, and the third is the page with the instructions.

• User stories covered: 11

Four different car styles made use of the car selector.

• User stories covered: 13

Difficulty consist in: Easy is five ways of automobiles, and hard is ten. These ways were used to expand or contract the stages.

• User stories covered: 13

This function was designed to resemble older games in which you just clicked "play" to begin the game.

• User stories covered: 13

The footer is a straightforward part where social networking connections are made with the website in an easy-to-understand manner.

• User stories covered: 5

The form can be utilized by the user in a variety of ways, including sending feedback, reporting bugs, and sharing recommendations.

• User stories covered: 9

The form submission modification was made to make the website more dynamic. The system changes the interface and displays a graphic to inform the user that the message has been sent.

• User stories covered: 9

The instructions that describe the game's dynamics are included in this section. with a graphic showing each interactive element in the user interface and text explaining it.

• User stories covered: 6

A canvas with a background of the way is part of the game's user interface. Using CSS animation, it is animated to give the impression that it is moving. The player's EGO car and the other opponents' cars are the small components inside, and these divisions can be manipulated by JS by shifting their locations in the area.

• User stories covered: 4,2

The controls consist of two straightforward arrows that attempt to replicate the joystick and three buttons found on older machines.

• User stories covered: 3

The Validator used was W3C Service to validate the HTML of the webpage, the entire project pass with no errors by use of some tools.

Home Validation

Game UI Validation

Contact Us Validation

Instructions Validation

404 Validation

W3C's primary activity is to develop protocols and guidelines that guarantee long-term growth for the Web. W3C's determine key parts of what makes the World Wide Web activity. W3C was used to validate the CSS style of the whole page

style.css

HintJs was used to validate the JS files, where the code was placed, the errors were rectified, and the actual unneeded variables were deleted. The software detects too many functions like unused variables.

Car and difficulty selector JS

Contactus JS

Game JS

The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.

Home accessibility

Game UI accessibility

Contact Us accessibility

Instructions accessibility

404 accessibility

Google Lighthouse's Chrome Developer Tool was used to test the website's performance.

Home performance

Game UI performance

Contact Us performance

Instructions performance

404 performance

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

1. Desires simple navigation.

Navigation Bar

2. Is interested in playing.

Home design

3. Desires to play a traditional game.

Game design

4. Desires to solicit comments or opinions.

Form JSEmail

5. Is curious about social media.

Social links

6. Be familiar with the game's rules

Instructions

7. be aware of the result and improve.

Score

8. A website where you may unwind and play a simple game.

Simple UI

9. Offer feedback or file bug reports.

Form message

10. Locate the page's social media accounts.

Footer

11. Use a website with a straightforward navigation bar.

Nav Bar

12. Participants who enjoy the game.

Game

13. A responsive and interactive page that is clear.

Responsive PC

Responsive Phone

14. Simple method for contacting us and providing feedback.

Emailjs

15. Give the players a sense of being in a traditional setting.

Environment

In Game.html was putted a script in the header for jsemail because, The mail doesn't work if the script is not in there.

1. Open a profile at emailjs.com
2. Add a new email service; the code will utilize the contact service ID
3. Include a new email template; the code will use the contact form ID.
4. In the integration dashboard, your user ID will be displayed.
5. Make sure to load the EmailJS SDK in the head of your HTML code; otherwise, it won't work.
6. In JavaScript, write a method that initializes the SDK with your ID and waits for submit events; depending on the version, this may change.

The steps for using GitHub Pages to deploy the website were as follows:

1. On the GITHUB page's repository settings.
2. On the menu under the Pages heading for code and automation.
3. Select the primary branch in the source's selector..
4. If everything that came before done so, you can see Your "link" has been published on your website..

To fork the repository:

1. On the GitHub repository.
2. Press the fork button in the top right corner.

To clone the repository:

• In the Github repository

1. Locate the button Code in the right uper corner.
2. Chose between HTTPS, SSH, Github CLI or download zip.
3. Open Git Terminal (Bash).
4. Go to the directory where you want to cloned the file.
5. Use command Git clone and paste the URL.

git clone https://github.com/jdhernandezS1/CI_PP2_CG.git

Online view link_to_page

• Google apis for fonts and maps : fonts.googleapis.com
• icons source : https://ionic.io/ionicons
• https://www.w3schools.com
• https://www.freepng.es

Images Sources:

• fabicons
• freepng
• ionicons

• Road fighter 8 bit was the inspiration.

In order how was used:

• GITHUB to create the repository.
• Visual Studio Code by develop the HTML, CSS and JS files.

The softwares language and recomended IDE used to build the project.

• HTML
• CSS
• JS
• visual studio code
• Git
• GitHub

Please read through our contributing guidelines, every pull request has been notified to be able to push code included

• directions for opening issues
• coding standards
• notes on development

• CI_PP2_CG is an open source project by CI_PP2_CG that is licensed under ops.
• CI_PP2_CG reserves the right to change the license of future releases.

Cordially thanks to:

• HashEm to bless me.
• My mentor Mo Shami for his support and Professional advices.
• My Family to support me.
• Guys of Stack overflow.