Inspiration
We were inspired by a love for classic "Choose Your Own Adventure" books and the desire to create a project that truly felt magical and unique for a hackathon. The goal was to demonstrate that sophisticated, interactive experiences could be built with a minimalist approach, using only vanilla HTML, CSS, and JavaScript. We wanted to move beyond static web pages and build something that felt alive, dynamic, and different with every single play.
What it does
Inspiration We were inspired by a love for classic "Choose Your Own Adventure" books and the desire to create a project that truly felt magical and unique for a hackathon. The goal was to demonstrate that sophisticated, interactive experiences could be built with a minimalist approach, using only vanilla HTML, CSS, and JavaScript. We wanted to move beyond static web pages and build something that felt alive, dynamic, and different with every single play.
What it does Our project is a procedural, AI-powered interactive story generator. It creates a new, captivating narrative each time a player begins. The game dynamically selects a plot, characters, and a setting, and then presents the player with choices. Based on the player's decisions, it generates new story twists, changes the on-screen visuals, and adapts the narrative's emotional tone. It provides a unique, replayable adventure without any pre-written branching storylines, making it a truly "endless" game.
How we built it
We constructed the project using a simple and elegant stack: a single HTML file for the game's structure, a CSS stylesheet for its vibrant, circus-themed design, and a JavaScript file containing all the game's logic. The core of the project lies in the JavaScript, where we used arrays and objects to store story fragments (plots, characters, outcomes). We then wrote functions to randomly combine these fragments and dynamically update the text and images on the page, giving the illusion of an intelligent, procedurally generated story.
Challenges we ran into
The biggest challenge was creating a system that felt like it had a coherent plot, rather than just a random jumble of words. We initially struggled to make the story flow logically, but we solved this by carefully structuring our data. Another major hurdle was integrating the images correctly; getting the local file paths to work reliably across different browser setups and environments required a lot of trial and error.
Accomplishments that we're proud of
We're incredibly proud of building a fully functional, browser-based game without a single external library or framework. The procedural generation system is a huge accomplishment, as it successfully creates a new and engaging narrative every time. The dynamic visuals that change based on the story's progress are also something we're very proud of, as they significantly enhance the user's immersion and the overall kinetic feel of the experience.
What we learned
This project reinforced the immense power and capability of vanilla JavaScript. We learned that with a solid understanding of core web technologies, you can build complex, impressive applications that are fast, lightweight, and accessible. It was a great lesson in problem-solving and in structuring data to create complex and seemingly intelligent outputs from simple, foundational components.
What's next for Untitled
Looking ahead, we'd love to add a customizable soundtrack using the Web Audio API to match the story's tension. We also plan to implement a more sophisticated personality detection system that could branch the story into entirely new genres (e.g., a mystery plot could become a comedy if the player's choices are humorous). Adding on-the-fly achievements using localStorage for persistence would also be a fun feature to implement.
Log in or sign up for Devpost to join the conversation.