Inspiration

The project was inspired by the desire to create an interactive "Choose Your Own Adventure" story generator using only vanilla JavaScript, HTML, and CSS, as part of a hackathon. The goal was to build a dynamic and highly replayable experience that runs entirely in the browser without any external frameworks or libraries.

What it does

This is an AI-powered, interactive story generator that provides a dynamic and unique experience with every playthrough. The game procedurally generates plots, characters, and settings, and adapts the narrative based on the player's choices and a detected "personality". It also features real-time visual updates with story-relevant images

How we built it

The project was built using HTML5 for the page structure, CSS3 for all the styling and a playful circus theme, and Vanilla JavaScript for all the core game logic, including procedural generation and DOM manipulation. No external frameworks or libraries were used

Challenges we ran into

Some potential challenges might have included building the procedural narrative and dynamic visuals from scratch using vanilla JavaScript. Handling DOM manipulation and story state without a framework could have been a difficult task. Additionally, creating the specific, playful aesthetic with CSS, including the asymmetrical design and circus-themed color palette, likely required careful attention to detail.

Accomplishments that we're proud of

We are proud of the procedural narrative which ensures that every playthrough is unique, creating a new story each time by dynamically combining different elements. The game's personality-driven choices and dynamic visuals, which use the tag to display captivating images, are also key accomplishments

What we learned

Building the project likely provided valuable experience in using core web technologies to create a full application. The project demonstrates key concepts such as separating data from logic using a JavaScript object for story elements, and dynamically updating a web page based on user interactions

What's next for Story Generator

Future developments for the Story Generator could involve expanding the narrative with more plots, characters, and settings to increase replayability. A next step could be to move beyond simple procedural generation to implement more advanced features, such as more complex branching story paths or a more dynamic system for mapping images to different plot points.

Built With

Share this project:

Updates