Our team took inspiration from simulator games, in which users make decisions for characters. Games such as dating simulators incorporate an element of interaction between players and characters in the story, as well as different routes for a user to take depending on their choices. The space-theme of the game was completely random, however, for we were brainstorming topics that complemented the idea of a simulation game.
How I built it
Our team used Repl.it and focused on HTML and CSS to develop our website. To stick to the space-theme of the game, we used background properties to attach a starry gif in the background of all levels. For every level - including the homepage and "Game Over" page - we added a corresponding HTML file. Within each level, there is a div containing a hand-drawn gif, a header, a storyline paragraph in which the astronaut is communicating with the user, and two buttons that hold conflicting decisions. One button (the wrong decision) leads to the "Game Over" HTML file, while the contradicting button leads to the succeeding level (ex. the correct decision chosen in levela.html would lead to levelb.html). For the header, we incorporated a code using keyframes to create a typewriting effect. Further, for one of the handmade gifs, we manipulated the code to create a blinking effect for the border. Lastly, we embedded code from a free cursor website to change the cursor to a spaceship.
Challenges I ran into
This was our team's first hackathon, so there were a few challenges that slowed us down.
- First, it was difficult to add a star/galaxy-inspired background because we thought we should add individual elements (such as stars, lights, etc). We found a code online that allowed for a cool galaxy background, but we had trouble arranging the order of our containers so that the divs and text would show up in front of the background. In the end, we opted to add a gif instead of individual stars and lights.
- Further, we found it challenging to position buttons in the center, for they were contained in a div.
- We also initially had trouble getting our gifs to work. To create our gifs, we used pixilart.com and drew two frames to create an animating effect. However, every time we transported our gif, the background was white rather than transparent on the website. We then had to use EZGif.com to add a transparent background and, from there, we downloaded our gifs onto the Repl.it.
Accomplishments that I'm proud of
- We are proud of how true our website is to the theme of outer space. Every element in our game relates to the idea of space, whether it be a spaceship cursor or the galaxy background. Also, we are proud of our original drawings and how they add a personalized element to the game.
- We are also proud of our storyline, for we incorporated a sense of mystery and anticipation within the conversations between Devin Post and the user. The users would think that the alien is a true villain like in mundane video games, but rather it is a figment of Devin's imagination. Also, the storyline, itself, relates to our current situation of attending a hackathon. In the game, the main character is in a rush to her journey home because she is attending the NHacks Hackathon.
- We are also proud of how many levels we were able to add to our game, considering our time limit and the amount of experience we had going into the hackathon.
What I learned
- Our members learned how to add images from our personal computers into the code, as opposed to relying on images from Google and the internet in general.
- We also learned how to create an intriguing storyline that centered around a single goal. It was difficult at first to connect every element of the story back to our original idea, however, we were able to make the story flow in the end.
- We also learned that, in hackathons, creativity is a must. We had to be creative with both our storyline and our images, so our users would not get bored while playing the game.
What's next for Lost in Space
- As for future additions, we aim to add a score counter in which a user accumulates points for every correct decision they make.
- Also, we aim to extend the storyline and add more obstacles for the character amid her return home. As for now, we only have about 8 levels because of the time limit. With additional time, we could add more levels and more decisions for the user to make.
- We also hope to create our space-inspired background rather than linking the background to a gif from the internet. A personalized background would greatly complement the hand-drawn gifs we created.