You can view live game on this link.
Visitor goals
The target audience for the Office Invaders game are:
- Home workers who do not want to go back into the Office.
- Office workers who wish they could work from home but their bosses are not letting them.
- People who are fed up commuting for work every day.
- HR and bosses who should know better.
User goals are:
- To easily understand storyline and game rules.
- To have fun.
- Understand the workers struggle is real.
- Fight angry HR and bosses.
Font choices
- Primary font used for navigation on the page is Press Start 2P. It is used in all areas as it is easy to read and complements retro game very well. Same font was used in all other sections to keep the same style. For the main heading BN Machine font was used.
Icons
- Social Media Icons (Youtube, Facebook, GitHub and LinkedIn) are added on the bottom center of the game boarder page where user will be able to find further Information and history of the game. Social Media Accounts are not created but show that the user will be able to click on the icons and find further details about the game there in the future.
- Implemented palette consits of 5 colors: #85EB40 / #F5DF7E / #B6967C / #CCDCF5 / #6C40EB. Colors that are used match retro game style from the 90's.
- Styling - Squared box with the bold line on the bottom were applied to make navigation separated. Buttons are clickable and will lead the user to each section on the page. Play button is highlighted to be visible immediately when the user lands on the page.
All wireframes are created with Balsamiq during the Scope Plane part of the design and planning process for this project. It consists of 6 pages.
-
First three pages are three prototypes of how the main page should look like. All three include navigation bar which consists of the Main Menu : Storyline / How to Play / Credits / Sound on/off.
-
CREDITS - Consist of the names of people who created this game.
-
SOUND ON/OFF - There will be an audio implemented and will be muted when the page loads. User will be able to turn on or turn off the sound. In the middle of the page we have name of the game OFFICE INVADERS.
-
PLAY button - Will be added, user will click on it and the game will start.
-
FIND US ON - Fictive part on the bottom right social platforms Icons.
-
Fourth wireframe - STORYLINE - Game story and all the Information user needs to understand the theme of the game.
-
Fifth wireframe consists of instructions on how to play the game, what arrow keys to use to move around and which key to press to shoot projectiles into the enemies.
-
Sixth wireframe includes credits to all the people who were part of this project.
-
Second Wireframe is the one team decided to go ahead with. Social Media Icons were positioned to the center. Font and further Styling has been added. Sound on/off will be implemented in future upgrades of the game
- HTML5
- CSS3
- JavaScript
- Firebase - Used to add highscores functionality to the game. It's being used in test mode which means that it does not follow authentication rules and database is vunarable to post and update requests. Database security can be implemented in future releases which may require user log in.
During the development the team did lot of testing and corrections for the game to run smoothly. Some example of the issues and testing we did:
- Link on the YouTube icon did not work.
- Home button did not lead to the main page.
- Character would not move the way we would like and it would not raise the hand to shoot.
- Change of character's facial expression when shooting.
- Whenever the game was paused one extra enemy would fall down.
- Background was too big and was not complementing the game so it had to be resized.
- Color palette scheme testing.
- Implementing sounds and adjusting the sound volume.
- Making the game responsive on smaller devices.
Game is tested on these Web browsers: Mozilla Firefox, Google Chrome, Microsoft Edge.
- HTML5 was validated with W3 Validator.
- CSS3CSS was validated with Jigsaw W3 validator and the issue with @import we were able to ignore.
- JavaScript was tested with JSHint.
- As a user I would like to see multiplayer option as well.
- End user goal: Playing the game with friends and family.
- Business goal: Implementing new features and multiplayer option to the game.
- Home Page is easy to read and includes name of the game coloured yellow to stand out and a pitch just below the title. We can see the main character and one of the 'bad guys' you need to fight against. Navigation bar is on the left handside and has easy to read font. Social media Icons can be seen in the bottom left corner. Home Page is simple and easy to navigate. There are no distractions and no scrolling.
- Storyline, How to Play and Credits - all three have the same style and are self explanatory. Each will open in its own container and have the same font style.
- Play! - when user clicks on this button board game will open.
Code used was inspired by couple of tutorial:
- How to code the snake game in JavaScript
- Space Invaders in JavaScript
- Learn JavaScript by building 7 games
- HTML5 Canvas and and JavaScript Game Tutorial
The project was stored on Github using the following steps.
-
We created an organization called Retro Logic - Our account
-
We created a public repository for the project - Office Invaders
The project was deployed to GitHub Pages using the following steps.
-
Log in to Github and located the Github Repository
-
At the top of the Repository, click the "Settings" Button on the menu.
-
Scroll down the Settings page until you locate the "GitHub Pages" Section.
-
Under "Source", click the dropdown called "None" and select "main".
-
Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
- Content and Media - Storytelling sculpter David Bowers.
- Image source:
- Shutterstock and Pngtree for characters.
- Pixilart to edit and create pixeled images.
- Videos as inspiration for the game:
- Game Souds for the game sounds.
- Retro-Logic Team