Idea and Inspiration
The idea I had for my game for this midterm assignment was the classic breakout game. From a young age I had played this game and I really wanted to code this game out and re-create my childhood experience. As simple as this game looks, this 2D game isn’t as easy as it appears to be. I wanted to speed up the game and decreased the paddle width as the user loses its lives.
Game Implementation
I want to start by coding how the game would work and by coding out the main object in the game which is the ball, bricks, paddle. After any shading all my global variables I created a bricks array which would hold each brick as an instance just like the object oriented assignment. I also populated and array with the brick colors in order to create a fading effect by using colors close to one another. I then created a function for paddle which was responsible for moving its position left and right depending on the key pressed which would raise a Boolean flag that triggered the movement.
Then I went on to create the ball which was essentially a circle but this was the most time consuming function. After carefully figuring out the math I was able to get the moving and bouncing effect. I used several if conditions to restrict the circles X and Y coordinate in between the canvas and the interaction with the paddle. The hardest part of all this was the collision detection. For this, I created a different function which checked for the collision at the bottom of the brick by looking at the coordinate range where the ball’s radius would overlap with the bricks dimension which would mean there was a collision and it will return true.
In order to make the brick disappear after the collision I iterated through the bricks array and checked for collision between the ball and the particle brick and if so I used the splice() function in p5.js to remove the brick from the array. I would also increment the score at this point. For the loss of life it was fairly easy since I would just check if the circles y-coordinate was greater than the height of the canvas which meant that the player had failed you make contact with the paddle and has lost a life.
For creating the bricks on the board are used functions in a way that allowed the bricks to be populated across the canvas using nested for loops. The growing of brick would just fill each brick with its corresponding color and simply create a rectangle with respected coordinates.
Furthermore, for the paddle I wanted to make it as realistic as possible. Of course there wasn’t much physics but i used a simply inverted the x direction when the ball hit the paddle. In order to get this to work correctly, I tried several different approaches like reflecting the angle if it hit ton either half of the paddle but it didn’t work logically and kept bouncing on the same side. So i resorted to using the negative and positive direction (+dx/-dx) for the switching the side and bouncing it to its respective opposite side. However, an additional effect that I implemented was the ball bouncing off the edge of the paddle to the same side.
I tried to increase the difficulty for the user by slowing increasing the speed of the ball as the game progressed and to make it more challenging the player had to move the paddle faster, which also decreased in width as the score went up. I also added sound when the user got a point (which was one brick was destroyed). Sound effects were also played when the user lost a life, game was over or won the game.