back to b-side projects
Interactive Storytelling Three Little Pigs
A childrens story told in a more meaningful and visual way allowing users to get engaged in a classic fairytale.
This web page was made in an effort to make childrens stories more engaging and interactive to the user. This is the story of the three little pigs and features a game like experience. It was created mostly with vanilla javascript and anime.js.
The app was made entirely in javascript and used a little of the anime.js framework to aid in animation. The intial designs used figma to create composition, block out story, and for asset exporting.
Making this was a lot of fun because it was almost all custom code that was like solving a bunch of little puzzles to get the giant puzzle completed. The story includes each pig and thei battle with the big bad wolf. Users can put together each pigs home while also getting the chance to be the wolf by knocking down their homes.
When working on this I really could not find any good way to implement drag and drop that would snap to certain targets both while it is being dragged and after it has been dropped. This required that things could be removed from what they have been snapped to, snapping would happen only on the right object and that they would snap only when they are in range of a target. This required me to make my own drag and drop method that accomplished this. It works pretty much on if statements that determine wether certain coordinates line up and updating the coordinates of the dragged item to update when is taken off the target.