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.
- User Stories
- Goals
- Features
- Design
- Technologies used
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
- Understand how to play the game.
- Have easy to use controls for the game.
- Learn more about the game's origins.
- Play the game!
- Be able to provide feedback.
- See my score, so I can compare it to previous runs.
- See how to get in touch with the creator.
- Be able to navigate the website easily.
- Be able to receive feedback emails.
- 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
HTML
The W3C Markup Validation Service was used to validate HTML code. All pages passed with no errors. The only warnings are related to the EmailJS script, which should be used as is.CSS
The W3C CSS Validation Service (Jigsaw) was used to validate CSS code. Both the URI and the direct code input pass with no errors. Some warnings that appear are either related to FontAwesome, or the "-webkit-" command that I have added for iOS devices.JavaScript
JavaScript was tested on JSHint.com. ES6 was enabled in Configuration. Both files pass with no errors. There is an undefined variable for the email file, yet that is related to EmailJS.Performance
Website performance was tested with Google Developer Tools Lighthouse. All pages passed the tests with perfect results.Accessibility
Website accessibility was tested with the WAVE Web Accessibility Evaluation Tool. All pages passed with no errors.Testing was performed with the following steps on all devices:
- Open page.
- Press Play button.
- Play the game until all aliens have been defeated at least once, so it will start again.
- Get a Game Over screen after aliens got to the bottom.
- Navigate to Contact page.
- Complete feedback form and submit it.
The website was tested on the following devices:
Windows desktop PC
- Open page.
- Press Play button.
- Play the game until all aliens have been defeated at least once, so it will start again.
- Get a Game Over screen after aliens got to the bottom.
- Navigate to Contact page.
- Complete feedback form and submit it.
iPhone 12 Pro
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.
- Understand how to play the game.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
How to play section | Navigate to About page | Find and read the instructions | Works as expected |
Game buttons | Start the game and try the buttons | See the game move according to buttons pressed | Works as expected |
- Have easy to use controls for the game.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Game buttons | Use them to play game | Start game / Move ship / Shoot | Works as expected |
- Learn more about the game's origins.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About game section | Navigate to About page | Find and read the About game section | Works as expected |
- Play the game!
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Game | Navigate to home page and press the Play button | Game starts and buttons work | Works as expected |
- Be able to provide feedback.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Feedback form | Navigate to Contact page, complete form and submit it | Get feedback about whether it was sent or what was wrong | Works as expected |
Feedback form | Navigate to footer and press the message bubble. Complete the form and submit it | Get feedback about whether it was sent or what was wrong | Works as expected |
- See my score, so I can compare it to previous runs.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Score section | While playing game, look at the score section on top of page | See current score and see it increasing when playing | Works as expected |
- See how to get in touch with the creator.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About me section | Navigate to contact section and find About Me information | See options of getting in touch with creator with links that open in new tab | Works as expected |
About me section | Navigate to footer and see creator contact options | Have links that open in a new tab towards the creator's pages | Works as expected |
- Be able to navigate the website easily.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation bar | Scroll to top and click on navigation links | Open the clicked page | Works as expected |
Footer | Scroll to bottom and click the back to top button | Page scrolls to top | Works as expected |
- Be able to receive feedback emails.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Feedback form / EmailJS | Receive feedback emails from completed form | Receive emails in inbox | Works as expected |
- Provide information about myself and how to contact me.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About me section | Navigate to contact section and find About Me information | See options of getting in touch with creator with links that open in new tab | Works as expected |
About me section | Navigate to footer and see creator contact options | Have links that open in a new tab towards the creator's pages | Works as expected |
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:
- 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.
- 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.
- 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
- Login to GitHub (https://wwww.github.com)
- Select the repository AlexGCbn/CI_PP2_GALAXY_RAIDERS
- Click the Code button and copy the HTTPS url, for example: https://github.com/AlexGCbn/CI_PP2_GALAXY_RAIDERS.git
- 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
- 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:
- Go to https://www.emailjs.com/
- Create an account or sign in with your account.
- If you do not have one already, create a Service with your email.
- If you do not have one already, create a template.
- 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.