QuiRP: Quick Role-Playing

A web app to play quick role-play campaigns in 5 minutes or less.

Ever feel like you wanted to play a role-play campaign, but you just didn't have the time? Introducing QuiRP, a way to play those same campaigns on an easy-to-use web app in 5 minutes or less. Made for the person on the go, who wants to play campaigns, but can't fit them into their busy schedule.

Currently, QuiRP has 1 adventure and only 1 players capability, but more adventures and 2 player capability are on the way!

Greedy's Robots and the Code of Destiny

A dystopian, sci-fi campaign with a branching story that has 6 different endings and two possible trophies you can win! Win by fighting (or not fighting at all) and playing through the storyline by making choices you'd make.

What inspired us

We both enjoy and have wanted to play more role-play campaigns, but haven't had the time to do so. We thought that creating a platform for those times when you might want to play, but are short on time, could help others in the same predicament we were in. Even though we wanted to make shorter games, we wanted to ensure that this did not mean that games lacked in quality and didn't feel like a real role-playing campaign. For that reason, we had adventures with branching stories, multiple endings, and achievements, so that multiple play-throughs of a single adventure all felt unique.

What we learned

We learned how to create stories for games that allow the player a greater amount of choice, but also do not become too complex to actually program into the web app. We also learned how to use JS and language processing to connect user input to different intents that would allow the game to be played through a text box and simple buttons to roll dice.

We also learned how to use CSS to make button effects on click and on hover.

How we built it

We built it using HTML, CSS, and JS. HTML was used for the basic shell of the website, creating divs and buttons that indicate user choices before the game began. CSS was used to style the buttons in the HTML and the various divisions that make up the web app. Also, CSS was used to allow for smooth-scrolling for a sleek one-page design.

Most of the program was built using JS, as this was how the adventure was created and played and intents were understood through user input. This was done through functions being called through user interaction that indicated the game needed to move forward. Also, local storage was used when information about user choices needed to be saved to allow for a different ending.

Challenges we faced

One of the biggest challenges we faced was creating a game with a branching story that allowed for user choices that felt real and similar to the choices made in a real role-playing campaign. But we also didn't want the story to cause the programming to become too complex due to too many possible options compounding on one another. This was mainly fixed through the use of branching and merging storylines, as well as saving information on local storage that indicated user choice.

Another challenge we faced was ensuring that vertical alignment worked on all platforms and browsers, especially since a web app such as this one would be quite useful on various platforms such as mobile and desktop, as one doesn't know where they are when they'd want to play a short role-playing campaign. For that reason, padding and vertical alignment in CSS was important to get right, as scrolling could not be done on our web app to manually fix this.

Built With

Share this project: