I’ve created a game where one has to click on the strings of the Jellyfish in order to correctly play “Twinkle Twinkle Little Star” and help the Jellyfish swim.
Tools: p5.js
CHALLENGES
The two things that I had to change was that I was unable to randomize the music into arrays, and had to assign each string to a specific part of the music, meaning that the pattern of the strings were the same every single time you started the game. The second thing was that I wasn’t able to animate the jellyfish due to the fact that I didn’t like how it looked very blurry when it stood still in the void draw() compared to the void setup() and I wasn’t able to animate it within the mouseClicked() without having each shape bleed into each other as it moved. As a result, I decided to add text to show the player when he or she wins by saying, “Thanks for helping me!” once the final string is clicked.
What was most challenging for me was when I was using booleans and coding for the game to restart itself every single time you pressed the wrong string. I had initially only used “setup()” within the “else” statement of each string, and although this did work, it wasn’t consistent, and at times it wouldn’t restart the way I wanted to. I had to go back and try many different methods to fix this bug until I was able to realize that I had to declare all the booleans as “false” along with “setup()”. Once I figured that out, it was pretty much smooth sailing from there.
Using new methods such as booleans and the audio player was quite a challenge for me, but I’m pretty satisfied with my results and hope to keep working on this project to animate parts of the game more, create a separate page for the instructions, and figure out how to randomize the distribution of music to the strings in order for it to be different every time one plays it.