Nine To Five

Tired of being exploited by the company that loves giving you unpaid overtime and could care less about you? Just quit! If you can...

Comment

Inspiration

One of our team members already had the idea of making an office simulator where the goal is to quit by having to complete various "quests". That idea was inspired by her very strong desire to quit her restaurant job. (She, unfortunately, has not)

What it does

We built the game in HTML/CSS with JavaScript without a game engine. The general idea is to have roughly 6-7 screens. Screen 1 would be the home screen with a credits and load game button. Screen 2 would be the main game screen. Screens 3-5 would be the planned mini-games. Screen 6 would be the credits page along with any other screens we come up with during the creative process. The general plot of the game would be an office worker, who is fed up with his nine-to-five, eventually punching his boss. However, to avoid the threatened lawsuit, he must first complete a series of tasks to be able to quit. The player must be mindful of the time they take to complete the game as there would be both a sanity bar and a global clock. The sanity bar would go down throughout each level and reset at the beginning of a level. The player would also be able to "recharge" by going into the breakroom. However, if they idle too long in the breakroom and are caught by their supervisor, their sanity bar would take a massive hit. If the sanity bar were to ever reach 0 before the user completes the level, the worker would become like his zombified coworkers who have bought into the cult mentality of the company. The global clock would be similar except for the fact that it continuously runs down to five p.m throughout the entire game with no way to reset it, no matter if the user completes a level or goes into the break room. If it reaches five p.m before the player manages to quit, he'd be sacrificed to the corporate gods (the shareholders). Each level would have a puzzle minigame (the minigames would be separate screens) the player will have to complete before moving on to the next.

How we built it

We debated using either Unity or HTML/CSS to make it. Majority of our group members had some experience with Unity but not a lot so we decided on making it a browser-based game through HTML. We used Tiled to create the main game map. Figma to create the loading screen. Visual Studio Code with the LiveShare extension to work on the program itself collaboratively. Piskel for general photo editing. Majority of the assets used were purchased from itch.io with a few being made by one of our team members. One team member worked on actually creating the full map until 4-5, a prototype of one of the planned minigames, and an attempt at getting the tile map to work. Another created the loading screen and got the main map to finally load after working on it the majority of the day. We both worked on the script and asset files. We planned on creating a tile map with objects the user could actually interact with in game; along with collisions, nps, and dialogue.

Challenges we ran into

The tile map. Considering it was the most integral part of the game, it took us a disheartening amount of time to get it to work. Actually creating the tile map was easy, Tiled has a pretty intuitive interface, albeit tedious. The biggest challenge was getting the tile map to load correctly in the browser, or at all. We believe the real culprits were the pngs themselves, not our actual code. We found a seven hour in-depth tutorial, so we decided to completely overhaul our existing code before remaking everything again. To get it to work we fixed miscellaneous errors in the canvas setup, changed the tile app export from a json file to a png for functionality, and used the onload function on javaScript to run the map code block only once the tilemap has loaded.

Accomplishments that we're proud of

Getting the tile map to finally work!! It was definitely the most time consuming and frustrating aspect of the day especially when it's something so "basic" to games. We finally got it to run consistently with no problems detected in the workspace. We definitely have plans to make a full game based on this. Another hour or two more redbulls and we could've gotten some sprites running around. We're also proud of the actual design itself of the map and how it turned out. For our first time ever using the Tiled software and our first hackathon, it came out looking great! Overall, we're pretty proud of the progress we made today and our game concept in general. Before you can serve and eat, you have to be chopped and cooked.

What we learned

How tile maps work. How Tiled works. How html f##king works. Jokes aside, we did learn a lot of new skills we did not have before, especially the ability to remain seated at the same desk for twelve consecutive hours (probably useful for our own future Nine To Fives).

What's next for Nine To Five

A completed game, although we hope to be able to actually take breaks and not code it all in One Piece. We have a solid foundation to start off and we have a solid team working on this (even though we went from four to three to four to two morning of). We'd definitely be adding actually levels and interactable objects along with all the game elements/mechanics we have planned like the sanity bar. We'd also love to make it so the player can customize their own character. Once we finally get it done, be sure to check it out on itch.

Built With

Share this project:

Updates