Survive the Night
Your classmate is running away from something while locked inside the uni. Will you be able to get her out? Do you want to?
Made during a college course with HTML, CSS and JavaScript.
Overview
For a web development course, my team had to create a website that used video. To make it more engaging, we created a choose your own adventure game where you’re calling one of your classmates and trying to help them escape a creature that is stalking them through the campus.
The Process
Visuals/Style
I wanted to immerse the player and make them feel like they were a college student doing some late-night studying. You’ll see that the background is a paper, which is in all honestly scarier than being chased around the uni. Because I was studying at NYU Shanghai, I also used the WeChat interface to make it more recognizable. If you take a look at the other tabs you might find a different story than the one being told during the game. I put the choices for the player to make in the area where people would normally type and send messages. While I think it is intuitive that the player needed to click on one of two options, I think a tutorial or instructions would have been useful to remove any doubt.
If I were to try this again I might have the website open up new tabs instead of having the other tabs as the background. I feel as though this would make it more immersive as now you can actually see the tabs where they are supposed to be. In addition, the player might want to check out the tabs and would uncover the actual story that the player lured the classmate to their doom.
Code
With different dialogue choices that resulted in branching paths, there was a lot of code to get through even if you didn’t see all of it in one playthrough. One thing that I discovered while making this was the ability to change the onclick function of buttons, which made it so that I wouldn’t need to create an entirely new button but instead modify the already existing ones. Given the complexity of the project (for me at least), it was a good lesson on how to simplify certain processes so that it was easier for me to code.
Overall, the complexity of the website came from the sheer number of choices that arose from having 4 checkpoints where the player would make a decision scattered throughout the game. The CSS was not very difficult either as I just used screenshots for the background. I did use px to arrange the chat boxes, however, I think in the future it would be better to use something else, for example a table or flex box.
Result
While the website design was simplistic, it did lend itself to the story. However, the functionality of the website was deceptively complex (at least for me) in that I had to keep track of many branching storylines which made the user journey not as linear as it might be for other websites. I think there is room to make this a more complete experience with minor and easy changes, for example having the website open tabs for you. Overall, my team received a 98% for this project.