DAIJYA ROBINSON
Game Design and Development For The Future
The Witch's Brew
Click To Play!
The Witch's Brew is a drag-and-drop, web-based video game where players step into the shoes of Aurora, a student eager to follow in her parent's footsteps and become a skilled potion maker. However, Aurora faces the challenge of not being particularly adept at potion making. Undeterred by this, she embarks on a mission to achieve greatness in the art, just like her parents.
The Game's Development
I. Core Problem & Initial Thinking
The Witch's Brew was a solo project created in the span of 12 weeks. The core problem I wanted to solve was: How do I get the game to compare each potion the player drags into the cauldron? I knew I wanted a Little Alchemy-style puzzle game, but I didn't know how to detect which potions were combined. As the player progresses through the game, the difficulty increases, requiring them to create even more combinations. This became the central technical challenge of the project due to time constraints.
The development timeline was as followed. As you see, the hardest part was weeks of figuring out how to compare potion combinations.
-
10/11/22: Created page layout
-
10/18/22: Built navigation system
-
10/19/22: Made page responsive
-
11/24/22: Centered game box (with help from Andy)
-
11/27/22: Loaded all assets, set up game scenes
-
12/1/22: Built drag-and-drop and potion shelf
-
12/6/22: Solved the array comparison problem - game finished!
-
12/7/22: Final polish (text refresh bug remains)
My initial div layout designs from October 18, 2022. I planned the potion shelf and cauldron area before writing any code.
II. My Contributions
I built The Witch's Brew entirely on my own. My contributions include:
-
Full game design and concept
-
All JavaScript/PIXIJS programming
-
Drag-and-drop potion system
-
Array-based combination checking logic
-
Sound effect integration (pop bubbles, Aurora sighs and laughs)
-
UI layout and responsive web design
-
Instruction page and game over screen
The Witch's Brew Gameplay
III: Tools & Technologies
Game Engine: PIXIJS
-
I chose PIXIJS because it handles drag-and-drop and sprite rendering efficiently for web-based games without requiring a full game engine like Unity.
Code Editor: VS Code
-
VS Code was the stander for our class and I decided to use continue using it. It was also is helpful to build my Visual Studio skills.
Version Control: GitHub
-
Git handles version control locally which is something I needed. GitHub also added backup solutions on top of it.
Art Source: Picsart, Retro Gamer, Sutori (credited)
-
I used a lot of free assets in my projects. This was help when it came to development since I could spend more time focusing on programing the game.
IV. Mechanics: Code & Systems
Mechanics
Players will have the ability to click and drag potions together in order to create new ones. The primary gameplay mechanics revolve around the drag-and-drop interaction with potions. I built this entirely using JavaScript with PIXIJS, applying back-end web development principles to support the game's logic.
Instruction Page
Control
To play the game, the player will use their mouse. I implemented these controls to ensure intuitive, responsive feedback. I built drag-and-drop using PIXIJS's pointer events. On pointer down, the potion follows the mouse. On pointer up, the potion drops. If dropped in the cauldron collision area, the potion name is added to an array.
Onboarding
Before beginning the game, players will have the opportunity to explore the instruction page. There, they can learn about our character and all the possible potion combinations that can be brewed. I built this instruction page to reduce friction for new players. During the game, I programmed prompts about what to combine, as these combinations pop up randomly. The ultimate objective I set is to achieve the highest possible score.
The Witch's Brew Gameplay
System Built
The hardest part was trying to figure out how to get the game to compare each potion. With some Googling, I learned you can name the images before you load them in. With this, I created a collision area that takes in the potions and adds them to an array. Once that is done and the player hits 'mix,' the code compares the array to the solution array. It's really cool and it has sound effects
Drag Logic For A Potion
Loading In Assets
Drag Function
Combination Checker
I documented this bug at the end of development. I didn't have time to fix it, but identifying and tracking it was a learning moment. Next time, I would test text rendering earlier in the cycle.
IV. Mechanics: Code & Systems
Mechanics
Players will have the ability to click and drag potions together in order to create new ones. The primary gameplay mechanics revolve around the drag-and-drop interaction with potions. I built this entirely using JavaScript with PIXIJS, applying back-end web development principles to support the game's logic.
Control
To play the game, the player will use their mouse. I implemented these controls to ensure intuitive, responsive feedback. I built drag-and-drop using PIXIJS's pointer events. On pointer down, the potion follows the mouse. On pointer up, the potion drops. If dropped in the cauldron collision area, the potion name is added to an array.
Instruction Page
Onboarding
Before beginning the game, players will have the opportunity to explore the instruction page. There, they can learn about our character and all the possible potion combinations that can be brewed. I built this instruction page to reduce friction for new players. During the game, I programmed prompts about what to combine, as these combinations pop up randomly. The ultimate objective I set is to achieve the highest possible score.
The Witch's Brew Gameplay
V: Design: Art, UI & Audio
The Witch's Brew is designed with a charming cartoonish art style, accompanied by whimsical background music that enriches the fantasy aesthetic of the game. I implemented three sound effects: bubble pop for combining, a sigh for wrong combinations, and a laugh for correct combinations. I chose these to give Aurora personality and give players immediate audio feedback. Sound effects were critical for feedback. The sigh vs. laugh tells the player instantly whether their combination worked without looking at a text prompt.
UI Mockup
I restarted my UI design multiple times and rebuilt it from scratch. The new final version had working navigation, responsive design, and structured divs that made the drag-and-drop system possible. The instruction page also shows all possible potion combinations. I built this to reduce player frustration and encourage mastery learning.
Protoype
Final Version
VI: What I Learned & Post Mortem
-
You can name images before loading them in JavaScript. You can ben use those names to compare player choices against a solution array. This was my biggest breakthrough.
-
Drag-and-drop in PIXIJS requires careful collision detection. The cauldron needed its own collision area to detect when a potion was dropped inside.
-
Text rendering bugs can appear late. My text doesn't load on the first screen without a refresh. Next time I'll test text earlier.
This project was a perfect introduction to wed design/development and I'm proud of what I was able to accomplish.
Game Over Page
Credit Page