Description: Pop! is a game where users use their mouse to pop bubbles on their screen. There are 3 levels: easy, moderate, and hard. The bubbles get smaller and greater in quantity as the levels increase in difficulty. When your mouse comes into contact with a bubble, it disappears with a “pop” sound.* When you complete a level, there is a button that lets you play again.
Tips for user: Click on the logo to start the game. Press the button for the level you choose. Move your mouse over the bubbles to make them pop.
Finished code: Play the game here: http://alpha.editor.p5js.org/full/rkoZUPZGG
Project Proposal Presentation (prior to development of sketch):
Development of User Interface:
This was my initial plan for the user interface. I planned on having one screen with the canvas, 3 buttons for levels, a start button, and a countdown timer. I also originally planned for the levels of difficulty to be based off of the timer– meaning harder levels get less time. (Click the image to test it out)
I decided to ditch the timer once I started piecing together the whole program. When I have some free time I plan on adding it back in. I just couldn’t fix the glitches in time. (Click the image to test it out)
I realized that breaking the program down into 3 parts would benefit the user experience. First, there is an opening screen with the game’s name. Then the user chooses a level. Then the game begins. When the game is over, a button appears that says “Play again” which allows the user to choose another level.
Problems I encountered:
- Hiding and showing buttons. First I tried using the hide() and show() methods, but this only worked when I had to hide the buttons once. In this sketch, though, I had to hide and show the buttons multiple times (every time the user plays again). So instead, I decided to change the buttons’ positions to either on or off the canvas. I was able to do this as many times as needed and it still worked.
- Hiding and showing the images (“Pop! logo” and “Choose a level:”). First I tried setting the value of the variable holding each image to 0, but this didn’t work out. So instead, I uploaded a totally blank image of a transparent background. When I wanted to hide an image, I set the value of the variable to this blank image, and when I wanted the image to reappear, I set the value back to the original image.
- Making the bubbles disappear. I used the dist() function, which measures the distance between two points. I made the first point the user’s mouse and the second point the center of the circle. When the mouse is within 50 pixels of the circle’s center (because 50 is the circle’s radius) the circle is not displayed.
- Playing the sound effect. I had trouble getting the sound to only play once per pop. Originally the sound was playing over and over and it didn’t even sound like a “pop”. To fix this, I used a variable that is either true or false inside an if statement. The variable starts off as