- Introduction
- UX
- Structure
- Design
- Wireframes
- Features
- Potential Future Features
- Technologies Used
- Testing
- Deployment
- Credits
View the live project here
Quarantine is both a fun and easy-to-play game that takes inspiration from the very well known Breakout game! The objective of the game is to break all of the blocks by hitting them with a ball that is launched from the paddle that the user will use to maneuver the direction of the ball.
- As a user, I want to be able to know how the game works in an intuitive way
- As a user, I want to be able to find the instructions easily
- As a user, I want to have some music that would get me into the zone when gaming
The page is designed to reflect the styling of the old Atari games. This includes color palete and the pixalated look of the images and fonts.
The page consists of main game area and two additional pages, one with instructions and the other with more information. Each page has nav bar to enable the user to navigate easily. The footer has been designed so the user can familiarise themselves with the game creators.
The logo was designed to reflect retro gaming theme
To get that retro gaming look we used a very vibrant colour scheme combined with some neon styling:
For this project we used two Google Fonts: Open Sans as our main font, and Press Start 2P, a font with a pixelated look to emphasize some headings
- The paddle reflects the look of a pill
- the normal brick
- the virus brick
- the first aid brick
- The website consists of 3 pages. Each page structure is identical. The general outline of the page was designed as per this pdf document.
- the normal brick - adds + 10 points to the game score
- the virus brick - speeds up the ball and adds 0 points to the game score
- the first aid brick - slows down the ball and adds 50 points to the game score
- changing the size of the paddle depending which brick is hit
- more different bricks can be added with new properties
-
Balsamiq was used to create the project's wireframes
-
Bootstrap was used to create the layout and provide some styling
-
Bootwatch was used to change color palete provided by bootstrap
-
Google Fonts was used to provide the fonts: Open Sans and Press Start 2P
-
Canva was used to create the game's logo and icon
- HTML
- No errors were returned when passing through W3C HTML validator.
- W3C Validator
- CSS
- No errors were returned when passing through W3C CSS validator.
- W3C Validator
This project was created by using the following steps:
- Log in to GitHub.
- In the Repositories section, click the green "New" button.
- Under "Repository template", select "Code-Institute-Org/gitpod-full-template".
- Enter repository name.
- Click "Create repository".
- When re-directed, select the green "Gitpod" button.
This project was deployed to GitHub Pages using the following steps:
- Log in to GitHub.
- Select repository.
- Navigate to and click the "Settings" button.
- When re-directed, scroll down to the "GitHub Pages" section.
- Under "Source", click the dropdown named "None" and select "Master Branch".
- Click the "Save" button.
- Upon page refresh, scroll down and locate the link to the live deployed page.
Forking the GitHub repository allows us to make a copy of our original repository where changes can be made without affect the original copy. To do this, follow these steps:
- Log in to GitHub.
- Select your repository.
- Locate and click the "Fork" in the top right corner, under the nav bar.
- A copy of the original repository should have been created in your GitHub account.
- Log in to GitHub.
- Locate repository.
- Locate and click the "Code" dropdown menu.
- Under HTTPS, copy the URL.
- Open your development editor and a terminal window in your chosen directory.
- In the terminal, type "git clone " followed by the URL you copied in step 4 and press enter.
- A clone of the project should have been created.
Background music from Joel Steudler
Sound Effects from Joel Steudler and mixkit.co