In order to view the live site, click here.

Galaxy Raiders is a personal remake of the classic game "Space invaders". The intent of the project is to provide users with a representation of the game, along with some information about the game and the person who developed the page. It was intended to keep the game as close to the original as possible in terms of gameplay, yet there might be some key differences. Even so, the website strives to provide the user with a pleasant and fun way to pass time and maybe relive some childhood memories.

1. User Stories
2. Goals
3. Features
4. Design
   1. Colours
   2. Fonts
   3. Structure
   4. Wireframes
5. Technologies used
6. Testing
   1. Validation
   2. Device and browser testing
   3. User stories testing
7. Bugs
8. Deployment
9. Credits
10. Acknowledgements

1. Understand how to play the game.
2. Have easy to use controls for the game.
3. Learn more about the game's origins.
4. Play the game!

5. Be able to provide feedback.
6. See my score, so I can compare it to previous runs.
7. See how to get in touch with the creator.
8. Be able to navigate the website easily.

9. Be able to receive feedback emails.
10. Provide information about myself and how to contact me.

• Have a fully responsive and accessible website.
• Provide a consistent experience throughout the pages.
• Provide easy navigation.
• Have a design that fits the game.
• Develop the website with as much interactiveness as possible.
• Be able to get feedback that has passed through validation.

• Provide a theme that fits the era and game style.
• Have more than one ways for people to contact the owner.
• Have easy to use and understand navigation.
• Provide feedback to each user.

We have a total of 3 pages, along with a 404 page. They include the below features.

• Provides easy to use navigation across all pages.
• Is static on screen, to reduce scrolling.
• Provides visual cues on hover and for active page.
• Is responsive and becomes smaller on mobile screens.

• Provides game score, which is updated live.
• Provides visual cue every time the score increases with animation.
• Resets every time the game starts.

• Main game area, where the game is displayed.
• Is responsive and becomes as small as possible for mobile devices.
• Style matches rest of the page.

• They provide functionality to the game.
• They are responsive and are on the bottom to fit a horizontal mobile position.
• They provide visual cues on click.

• Provides the name of the creator and social media links.
• Provides a link to jump to top of page.
• Also provides a link to the contact page, to send a message.
• Text disappears on small screens.

• Provides information on the original game and why this one exists.
• Provides statement about non-affiliation.

• Provides information on how to play the game.
• Has both mobile and keyboard controls.
• Explains what happens when the board is cleared.

• Form that requests basic user information.
• Sends them to my email through EmailJS.
• Validates all fields and provides visual feedback if they are not completed correctly.

• Basic information about creator.
• Basic information about relation to project.
• Provides links to creator's GitHub and LinkedIn.

• Provides information that there has been an error.
• Keeps the page styling and provides the option of either going home, or using the navigation bar.

The website was designed with the word "retro" in mind. The artwork is pixelated and even the fonts try to keep the oldschool arcade games style. Even though the design is mostly simple, functionality was the priority here.

The colours and the page's background were mostly created by the Pixel Space Background Generator. All credits go to the creator of the tool.

The rest of the page's colours were drawn from the image the tool created.

The artwork for the spaceship and aliens was taken from this kit here. All credits go to the creator of the kit.

Anton was used for the page's logo, as it is simple yet fits the space style.

Space Mono was chosen because it looks like a retro "computer" font.

The website's structure is simple, with a main page and two additional. We have a navbar on the top of the page that is fixed, to eliminate scrolling up. Most users are used to this layout from most pages online. The logo is also the main page's link. The other two pages are "About" and "Contact". The content of the pages is self explanatory. The user can always understand which page they are on by the red "aura" on the page name. A smaller red aura appears on hover.

• GALAXY RAIDERS (Home): The game area is decorated with a scoreboard on top and the game buttons on the bottom.
• About: Two sections here. The first has information about the game with a bit of a backstory. The second contains the instructions.
• Contact: Two more sections. First, we have a feedback form. It validates the data and, if successfully validated, sends an email. The second section contains some very basic information about the creator and links to GitHub and LinkedIn.

The website also contains a footer that has the same social links, along with a link to the feedback form and a "back to top" button.

• HTML
• CSS
• JavaScript

• GitHub
• VSCode
• Balsamiq
• EmailJS
• Adobe Illustrator
• Google Fonts
• Favicon.io
• Font Awesome
• Pixel Space Background Generator

Testing was performed with the following steps on all devices:

1. Open page.
2. Press Play button.
3. Play the game until all aliens have been defeated at least once, so it will start again.
4. Get a Game Over screen after aliens got to the bottom.
5. Navigate to Contact page.
6. Complete feedback form and submit it.

The website was tested on the following devices:

The webpage works great on all devices and browsers that it was tested on.
Functionality between desktop and mobile remains the same, with the look of the page changing slightly.
As the website was designed mobile-first, it fits mobile browsers perfectly while also changing to fit a larger screen and occupy more space.

1. Understand how to play the game.

2. Have easy to use controls for the game.

3. Learn more about the game's origins.

4. Play the game!

5. Be able to provide feedback.

6. See my score, so I can compare it to previous runs.

7. See how to get in touch with the creator.

8. Be able to navigate the website easily.

9. Be able to receive feedback emails.

10. Provide information about myself and how to contact me.

All bugs have been fixed. The only ones remaining are not bugs, but browser limitations mainly on iOS devices. They do not limit the functionality, yet they have two differences that I have found:

• The game buttons do not cast the red aura when pressed.
• The submit button is blue. There are workarounds with "webkit", yet I have not managed to use it.

The following are fixed bugs:

1. The aliens would move out of borders.
   • This bug was fixed mainly by applying a function that calculates how many times aliens need to move each time they move down and switch direction.
2. Rockets would hit aliens that were behind other aliens.
   • The fix for this bug was to make the rocket also detect if an alien moved on top of it, instead of only detecting next cell.
3. When the play button was pressed, the game buttons would move a few pixels up. The rest of the page would stay as is.
   • This was fixed by adding a wrapper around the game area. The buttons would move because of the JS functions that manipulated the area.

• 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 Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://alexgcbn.github.io/CI_PP2_GALAXY_RAIDERS/index.html

To run this project locally, you will need to clone the repository

1. Login to GitHub (https://wwww.github.com)
2. Select the repository AlexGCbn/CI_PP2_GALAXY_RAIDERS
3. Click the Code button and copy the HTTPS url, for example: https://github.com/AlexGCbn/CI_PP2_GALAXY_RAIDERS.git
4. In your IDE, open a terminal and run the git clone command, for example

git clone https://github.com/AlexGCbn/CI_PP2_GALAXY_RAIDERS.git

5. The repository will now be cloned in your workspace

Please note that, to use the code you need to change the EmailJS user_ID, service_ID and template_ID. To get yours, do the following:

1. Go to https://www.emailjs.com/
2. Create an account or sign in with your account.
3. If you do not have one already, create a Service with your email.
4. If you do not have one already, create a template.
5. Copy your User ID, Service ID and Template ID and add them to the email.js file, where the previous ones are. Lines 13 and 23.

• All background images were created with the Pixel Space Background Generator
• All game pixel artwork was taken from this creator kit
• Icons were taken from Font Awesome.
• Email API is from EmailJS
• Steps on how to link the 404 page were found in this GitHub post
• Code that needed credit has been credited in comment form.