Easthaven Apothecary

• 

  Our landing screen, which was drawn and animated by Yusi!

• 

  Brewing up a healing potion with the recipe book as a guide.

• 

  Our customer is happy with our potion! We gained some sgold out of that.

• 

  Using sgold to upgrade our weapons. We need 12 more sgold to fully upgrade our weapon to a sword, and our armor is already maxed out.

• 

  The final boss battle with the village's dragon!

Inspiration

Easthaven Apothecary is a medieval RPG with a unique arcade-like twist. Our game borrows concepts from games like Overcooked and Papa's Pizzeria for the potion brewing main story, while drawing inspiration from Pokémon battles for the final boss battle. Rush to complete orders before your customers get tired of waiting, and raise money to afford gear to help you protect your village from a villainous dragon!

What it does

In this game, you play the role of the lead potion brewer at Easthaven Apothecary. Each day, you interact with different customers, brewing them a potion from your recipe book. However, your customers tend to be impatient and very picky. By making sure that your brewing is both quick and accurate, your customers will be happier with the quality of your work, and will tip you extra for the drink.

As you serve more and more customers in the apothecary, you'll begin to rack up more and more sgold coins. Now comes the question of what to do with all of this sgold. The simple answer is to spend it in the battle shop, allowing you to wield more powerful weapons and wear more durable armor.

Although you might just be another worker at Easthaven Apothecary, a unique challenge is waiting for you once you've become a master brewer. Make sure to prepare to take on a villainous dragon terrorizing your village once your work at the Apothecary is done by upgrading your weaponry and armor as much as you can.

How we built it

Easthaven Apothecary was made entirely in HTML, CSS, and JavaScript. The majority of the functionality was achieved by using the p5.js graphics library. We also designed every single image on our website using pixilart.com. Our code was hosted on repl.it and was linked to the domain brewpotions.online from domain.com

Challenges we ran into

One of the challenges we ran to was with storing variables. Since our game uses multiple HTML and JS files, we used local storage to pass values between files. This lead to behavior that was sometimes unpredictable (i.e. refreshing the pages would maintain values that were set in storage, but reset all other variables). We were forced to step through the code multiple times to find where our code had gone awry and to reset local variables as needed.

Another challenge we ran into was expanding each level to be bigger than the last. We did this by increasing the number of customers per level until the last level had 10 customers coming to the apothecary in a day. However, we realized that this was much easier said than done because by resetting the page after each customer, we were also resetting every variable as well. Ironically, this was solved using local storage and a JSON to store level data.

Accomplishments that we're proud of

We are very proud of the design of our game. From start to finish, every background, sprite, and animation was created by a member of our team using an online pixel art drawing board. This allowed us to create our own, personal world inside Easthaven Apothecary with its own universe and storyline.

We're also super proud of our merging of different game styles. In combining the main potion brewing storyline with a final boss battle, we combined 2 very different types of game logic into one cohesive story. The potion brewing and boss battle connected seamlessly thanks to the addition of the sgold and the battle shop, and we couldn't be happier with how it turned out.

What we learned

We learned a lot about how browsers store values locally and how long these values stay declared. In order to test our game properly, we constantly had to close windows and even the entire browser in order to reset all of our variables and to ensure that we were getting a proper test run. Local storage was immensely helpful in making our game possible but caused many more problems as variables began to overwrite each other and initialize in unexpected places. It was interesting to learn how local storage treats different variables and how we could control that.

What's next for Easthaven Apothecary

Easthaven Apothecary has so much room to expand! In the future, we plan to implement new potions that unlock after certain levels and expand the shop to allow the player to buy potion ingredients (currently, they have an unlimited supply in their store). This would include designing and drawing more potions, coming up with new recipes, and expanding our levels’ JSON data and the store’s interface. In the future, we hope that Easthaven Apothecary can become an adventure of deep storylines, multifaceted decisions, and unique characters!

Built With

• css
• html
• javascript
• p5.js
• pixilart
• repl.it