Heather Bjoin
Heather helped design the overall style for the website. With the help of Megan, she also implemented the ideas and wrote the story. Heather contributed to the javascript by adding in the storyline and additional cases where need be.
My GitHub: HeatMarie
Justin Hoch
Justin worked mostly on the javascript and trying to compact the js as much as possible. He got it to work and implemented it to cave.js just as a proof of concept. He also worked a lot with the APIs and answered any questions about them that his teammates asked.
My GitHub: Justinean
Megan Steblay
Megan spent much of her time with this project working on the JavaScript code and experimenting with how to cascade from function to function and storyline to storyline so that it not only split into different choices, but could also come back together... and then refactoring all of that code to be more efficient. She also helped the others brainstorm the story itself and assisted Heather in writing some sections of the script.
My GitHub: msteblu
Mike Steinmetz
Mike worked a lot with the styling aspects (CSS) of each page, He also spent most of his time working on the mountains page. He worked on implementing media queries to ensure that the story used a responsive layout. He also implemented a preloading screen for the very first time...which he created using HTML, CSS, and JavaScript.
My GitHub: mgsteinmetz
The Project
Concept
Elevator Pitch
An interactive story where the main character - YOU, the user - will embark on a mission to save the world from a DRAGON! I mean, it’s a dragon, so how will this happen? Right? The user will read a story and make decisions, which will determine the final outcome. In the end, you will either find a way to save everyone (including yourself) or be forced to watch everything burn in an unstoppable, fiery apocalypse. The choice is yours. Choose wisely, my friend.
User Story
GIVEN THE TEXT-BASED STORY, I want to be able to make choices and interact with a fictional storyline. I want to change the story’s outcome by “traveling” (using different pages as different locations) and choosing between different paths. My choices will have consequences, altering the storyline and changing the ending. At the end, based on my saved choices, I will either win (by defeating the dragon) or lose.
Motivation for Development
We wanted to let users experience being the protagonist in a story (in a type of text-based game), allowing them to have agency over the direction the story takes and letting them experience how their individual choices affect the outcome of a fictional world.
The Process
TECHNOLOGIES
- Bulma
- Pexels
- Art Institute of Chicago
- Freesound
- jQuery
Styling: We used Bulma as a CSS styling framework.
APIs: We utilized the Freesound.org API for background music, and the Pexels and Art Institute of Chicago APIs for background images.
Other Technologies: Some jQuery was also used in this project.
BREAKING DOWN THE TASKS
Functionality: Much of the functionality of the application (the JavaScript and jQuery) was written by Megan Steblay and Justin Hoch.
Styling: Much of the layout and styling of the application (CSS, HTML, and use of Bulma) was written by Heather Bjoin and Mike Steinmetz.
Story: The story text itself was written by Heather Bjoin with assistance from Megan Steblay.
CHALLENGES
In any project, there are of course challenges. We had to work out how to utilize APIs that we had never encountered before, and we had to figure out how to implement Bulma and make our application responsive. There were also ideas that we had to work out that were complicated using just JavaScript or jQuery... how do we make a story that isn't quite linear, that shifts around itself and cascades down, splitting and then rejoining, like a type of graph? We also had to work on communication: with four of us building the same project, we had to try to figure out a system of listening, contributing, and distributing tasks.
SUCCESSES
We knew we were attempting something somewhat complicated for the four of us to complete in the span of two weeks. However, we experienced many successes with our project. We figured out not only how to write a cascading storyline in JavaScript, but also how to refactor it: making it more consolidated and efficient. We successfully utilized multiple APIs whose use greatly improves the immersiveness of our project. And, we wrote an entire choose-your-own-adventure script unique to our project!
The Story
The idea for the story came from deciding we wanted to do something interactive. We had big ideas, and had to compact them. So here we are, with a story about one person sent out on quest to save the world from a dragon named Fraener. The decisions the reader makes can have a massive impact on the final outcome. The only thing is, they won't know until the end. Every choice has a consequence, some good, some not so much, and others will automatically lead to devastating outcomes.
Background Image Acknowledgements:
Header: Francesco Ungaro. "Red Fire Illustration," Pexels API.
Tavern: Francis Hopkinson Smith. "The Cock Tavern, from In Thackeray’s London," 1913. The Art Institute of Chicago API.
Village: Maurice de Vlaminck. "Village," 1912. The Art Institute of Chicago API.
Forest: All rights reserved to Heather Bjoin.
Cave: Skitterphoto. "Nature France Rocks Cave," Pexels API.
Mountain:Marlon Martinez. "Mountain Scenery," Pexels API.
Background Sound Acknowledgements:
Tavern: "My Tavern 1.wav" by ralexpdx of Freesound API.
Village: "Medieval market" by Metzik of Freesound API.
Forest: "2020 park NL » park Cromvoirt May NL 210523_0284.ogg" by klankbeeld of Freesound API.
Cave: "ambiences cave 02" by rucisko of Freesound API.
Mountain: "Wind, Synthesized, A.wav" by InspectorJ (www.jshaw.co.uk) of Freesound API.
Future Advancements
There are many ways that this project could be expanded on. Initially, we had dreamed big about a game that was more open-world. The story would be less linear so that the player could move around to different locations as they desired, even returning to locations they had already visited. In future developments, more functionality could be added. Perhaps our player would have stats, perhaps the game would keep track of time and days would pass as you played. Perhaps the player would have an inventory where they could collect items along the way and use them in parts of the story. The story could change depending on which locations you visited in what order. There could be multiple stories that could be unlocked and played.
We had only two weeks to build this project, and ended up with a compact, interactive game — but we see many possibilities for the further advancement of Blitz and Chaos.