POP! POP! POP!

I originally originally wire-framed a complex game involving the random generation of builder blocks, with the goal of two players destroying blocks within a specific amount of time. The winner who destroyed the most blocks would win. Conceptually, this game idea proved super challenging, especially the generation of random building blocks populating the screen. I turned to the idea of bubbles replacing the blocks while I researched. I realized that using Canvas would help me do this. I read tutorials on how to render rectangles and ultimately circles. Rendering a random number of bubbles at any given time, however, again proved challenging. Thinking about MVP, I decided to stick to one bubble that involved the user trying to catch the moving bubble. I did all of this using Canvas and used code generated by my research on how to render circles, move them, style them, change their velocity, add listening elements, and then ultimately to catch them (the latter being the most challenging component to actualize for this game).

My process was quite different than most of my peers, I suspect, as I started with the styling of my HTML first (ie., figuring out a color palette) and delineating the spaces to which various elements would go. My comfort level with CSS and HTML is greater than my JavaScripting, a reason why I approached this project the way that I did.

My game is called POP! POP! POP!. It is a single player game, though ultimately the game can be played by more than one person, one at a time. The object of the game is simple. The user is asked to catch the moving ball. Once caught, an alert appears congratulating the user, as well as a unique graphical prize. The game works as a single player game (or a one-person-at-a-time game) well, so I left it as is. A two player approach would work as I will explain in my “Wish List” section.

Wish List

The game is an MVP version. That is, there are components yet to be created. I would like for more than one bouncing ball to appear, which would create a rectangle of bouncing balls that the user would need to pop within a finite of time. If it is a multi-player game, the player who scores the most popped bubbles would win. Also, I have a nav bar on the lower left that has numbers that, when the new version is created, would allow the user to change the velocity of the bubble(s). I would also like to make the game responsive to different types of browsers. Right now it meant only to be played on a laptop or desktop.

Technologies HTML, CSS, SASS, JAVASCRIPT, JQUERY, CANVAS, BASIC GEOMETRY, and BRAIN POWER

Last updated: November 13, 2015

A colour story game brought to you by the letters "J" "A" "N" & pink unicorns. © 2015