Hi, I'm Max Levine, and this button project was made for Dr. Bradbury's New Media 231 Introductory Interactive Media at the University of North Carolina at Asheville and utilizes HTML, CSS, and Javascript.
I was inspired to create this project by the “Don’t push the button” game for iPhone, which I remember playing on my mom’s phone for hours when I was a kid. There are hundreds of clones and copies of it, but the original one I played I think was released in 2011. All that the game is is a big red button with text under it trying to tell you to not press the button. Every time you press the button, the text changes. There must have been a book-length amount of text, because I remember pressing that button for hours, and I thought it was really funny at the time.
For my project, I created something like that, except to do it a bit differently, I made the button an inviting green, and instead of dissuading you, the text is trying to get you to continue to press the button.
I used onmousedown and onmouseup events simultaneously to make it so that you can press and hold the button and release it. I used an array of duplicate sounds that are cycled through so they could play overlapped, for when you press the button rapidly. I used getElementById to modify the page elements in JS.
I recorded the sound effects by pressing a Cherry MX-Brown spacebar. The button is really badly drawn because I didn't have access to Photoshop and basically had to use MS Paint. I spent a lot of time shifting margins around to get the elements and button in the right spots.
I wanted to make sure there was a happy conclusion for the creature. The page evolves over time, such as a score tracker being added, and then a “press intensity” tracker, which constantly decreases and you have to press fast enough to get it to 50. And then when you do so there is the funny conclusion where the button breaks and the creature that was living in the button climbs out.