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 wish to create different levels for this game and plan to decrease the paddle width as the user loses its lives. The progress I have made so far is purely on the coding and logic of the game itself and not the appearance or functionality in terms of importing sprites for the paddle and having sound effects along with the menu screen.
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. I am intending to replace this rectangle with a Sprite later on but as of now I wanted to see if I was able to use this to get the game up and working.
I also created messages for the user when life is lost or restart game but I have not been able to add any buttons yet. I wish to create a whole menu screen which would be used before start of game and restart along with different levels and possibly even multiplayer option.
Plan
I plan to add the following things to my game:
- Create gradient background which would change as the user score increases
- Add sound effects when there is a collision and a brick is destroyed
- Increase the game difficulty by reducing the paddle size making it harder and harder.
- Import sprites for the battle and possibly other enemies/obstacles that the Player might have to avoid.
- Create a menu screen with instructions at the start of the game and restart.
- Add multiplayer option which would’ve allowed two players to compete against one another. However I feel like this would be time consuming and difficult to implement as it might require a complete new code.