Member-only story
When I was tasked with creating an interactive story based on a children’s book that had to include some form of randomness and build on some of the things we’ve learned in the first 2 weeks of my class on p5.js — Chicka Chicka Boom Boom was the first thing that came to mind — so I ran with it.
tldr; Made a game that you or your kids should play: Chicka Chicka Boom Boom Game
The setup
Chicka Chicka Boom Boom is a children’s book that helps kids to learn the alphabet by turning the letters into characters and telling a story of how they go to a party and fall out of a tree — something like that. I only read it a handful of times when my kids were little and I was a bit too old to grow up on it (it was published in 1989).
The design of the book is bright, the typeface is bold, and the rhyming wants to make you get loud and excited when reading it.
Design Goals
My idea seems simple — Create an interactive game based on the story — letters will be piled up on each other after they’ve fallen out of the tree and the player will need to find each letter in ABC order.
The design should mimic the bold lettering and bright visuals from the book.
After placing the letters back into the tree, the player should be given the opportunity to play it again.
Development Goals
Each letter will be assigned a color and added onto the canvas in the scene so that that are spread out, skewed and in no particular order.
At the top of the screen there will be an indicator on which letter the player should be looking for and direction on how to play.
If a player selects the wrong character, it will make a sound indicating an error.
If the player selects the correct character, a sound will indicate that they were correct, it will be removed from the pile, placed on top of the tree and the indicator will change to the next letter.
After the user finds the last letter, a sound will indicate they’ve completed it and will be prompted to play it again.
The code in this morphed quite a bit as I added in features and effed up some things so I’m only going to share some chunks of code, but you can check out the working demo and the final code at the end.
