Parvus’ Potions🧪 Browser Game | Creative Code Lab — Semester 1 Final Project Built using JavaScript (p5.js), HTML5, and CSS3

OVERVIEW

Parvus’ Potions is a browser-based treasure-hunting and memory game developed as a two-week final project for Creative Code Lab during my first semester of studying Creative Computing at the University of Applied Sciences St. Pölten. The goal of this project was to integrate all core skills learned throughout the semester — from coding logic, interaction design to digital art and creative storytelling.

STORY

A young Dragon called Parvus (latin for little) wants to become the greatest Wizard of all time, but right now he's only a young student and needs to train his skills. Although he’s already on top of his class, Parvus still seeks to improve his magical skills. One day, he discovers a mysterious recipe in a forgotten corner of the school library: a rare potion called “Nana’s Novel Nitrate.” To impress his master, he wants to brew it. The problem? He doesn’t know all the ingredients yet! Now Parvus needs our help to gather them and brew the potion. But beware: if you drop the wrong ingredient into the cauldron, things might get... explosive. 💥

GAME CONCEPT

The player helps Parvus, a young dragon apprentice, gather ingredients for a mysterious potion recipe he discovered in his school’s library. Each round, a random recipe is generated, and the player must collect the correct ingredients. Adding the wrong one will cause the cauldron to explode — testing both memory and attention.

Gameplay Mechanics

• Move: Arrow keys Navigate and collect items on the map
• Open Inventory: I View collected ingredients
• Add to Cauldron: Space Drop items into the cauldron to brew

Objective: Collect all correct ingredients without adding any incorrect ones

FEATURES

• Randomized recipes for replayability
• Inventory system for tracking collected items
• Collision detection and item pickup mechanics
• Cauldron logic with success/failure states
• Custom art and music for a cohesive visual and audio theme

TECHNICAL DETAILS

• JavaScript (p5.js): for rendering, collision logic, and game loop control
• HTML5 Canvas: for dynamic game visuals
• CSS3: for layout and simple interface styling

Programming Focus Areas:

• Object-oriented approach to manage game entities (player, ingredients, cauldron)
• Random generation for ingredient selection and placement
• Conditional logic for recipe validation and explosion feedback
• Efficient state management (menu, play, result)

DESIGN & DEVELOPMENT PROCESS

This project was part of a two-week sprint designed to demonstrate cumulative learning in:

• Creative coding and procedural generation
• Interactive design and player feedback
• Debugging and iteration under time constraints
• Story-driven experience through code

I combined technical structure with a narrative-driven approach, balancing functionality with an accessible and visually charming design.