Project Name:
Hazbin Hotel: Sell Your Soul Randomizer
Software & Technologies Used:
-Adobe Premiere Pro
-CSS/SASS
-HTML
-JavaScript
-OOP
-Responsive Design
-VS Code
Client:
Fanshawe College (Assignment)
Link:
Hazbin Hotel: Sell Your Soul RandomizerDescription:
A randomizer based off the hit series Hazbin Hotel, that uses Object Oriented Programming and Javascript to see who you sell your soul to; or to see who saves you.
This assignment gave us freedom to create whatever we wanted using Object Oriented Programming, as long as the objects were being used in a practical way.
My partner, Sophia Westrop, and I discussed what we wanted to do for the assignment. We both had the idea of populating it with some of our favourite characters, but how was the question. I had the initial idea of a randomizer for Hazbin Hotel while she had the idea of a character select screen for fighting games, that also demos actions. Both were perfectly viable ideas but we were a little stumped on how to combine them.
Eventually, we settled on an agreement. If we went with Hazbin Hotel, then she would decide the theme of our next assignment which felt fair.
In college, we hadn't done much with audio since Semester 2 so I wanted to take the opportunity to challenge myself with working with audio. At first, it felt easy enough, as the audio files were being appended exactly where I needed them to go, and the files were being stored as an array in the object. Where the challenge came in, however, was when a second character was being populated on the page, as part of the idea was to also have a character save your soul as well.
I realized that the way I was writing the methods, it was specifically targeting the first div that was made. So any audio that was playing came from the first character. I had to write an if/else statement to make sure it differentiated between the two objects and to ensure that the proper audio would play.
The assignment felt a little rough to get its legs going, but thanks to cooperation and good ol' trial and error, we managed to get it up and running! Don't worry about Sophia's idea; it didn't go to waste. She used the fighting game idea as inspiration for a video in another class.
Thumbnail
The initial display of the project, where users are greeted with instructions to get them started, and the promotional image of the show.
After clicking on the button, the users are given one of the characters that they sold their soul to, with information on the character, a voice clip, and a task the character has given them.
If users wish, they can have a character also save their soul after initially selling it. Instead of a task given to them by the character, however, they're given a reason why their soul was saved. Then, if the user wants to play again, the page refreshes so they can get some new results.
Thumbnail
Thumbnail
Thumbnail