Final Project

So here we are, the final stretch for now! For my final project I will be attempting to create a single player pong experience using P5. Our professor gave me a good idea about how to go ahead with starting this project. First get it to work with maybe some hard coded values, then keep working on making it modular and reusable. I’m taking that and running with it so let’s see how it works out.

So first things first. Lets start by making a ball that will bounce around the screen. I started by just declaring some global variables to represent the x and y position and size. My line of thinking is that these will eventually become keys/properties of an eventual constructor I will make later on.

Next is making the ball move. This will possibly become a method for our ball object. To make it move we will increment the value of x and y in the draw function (which loops) and use some edge-detection to make sure it doesn’t go off screen.

So here we have the variables we need. x, y, size, speedX and speedY. So we have to remember that the X value is calculated from the center of the ball so we want to account for that by offsetting the value by half the size. So when the ball is created the space around the ball and the edge will be accounted for.

In the draw function we see the circle drawn with the ellipse function and moving the x and y positions with the incrementation by the speed variables. And to make sure the ball doesn’t leave the edges of the screen we have the edge detection checking if the balls x position is more than the width or less than 15, make the speed negative so it reverses. Similarly we also check the y with the height. I realized though that I didn’t need the ball to bounce back when it reached the bottom of the screen so I only reversed it with speed *= -1 if (y<15). Now to move on.

• 

Now we will create the paddle that will bounce the ball back if it hits it. To start I made the variables I would need and then I started to think of how the collision detection would work on the paddle. So if we think of where the ball will be when we want the ball’s y speed to be reversed we can come up with the logic we need for the if statement conditions. So we check if the ball’s y position is greater than the y position of the paddle. If thats true and the x position of the ball is less than the right side edge of the paddle (rectX + 100) and the x position of the ball is greater the left corner of the paddle( that being rectX because in p5, rectangles drawn with rect() start from the corner by default) then we can reverse the y speed of the ball with speedY *= -1.

Some of the code can be picked out as a function such as checking for a game over. Once the ball is out of sight then stop it from moving. line 66 to 69.

To make the paddle move I will have the paddle’s x position be the mouse’s x position. To do this, in draw we will update the paddle’s position to be the x position to be the system variable mouseX.

Now the time has come to start making things modular. So I will start off by making the paddle into an object instead of just variables. The project calls for one object so here I converted the variables into a paddle object as shown below.

Next I will make the ball from a constructor function.

I had the idea mid-way to make the balls a different size every time. To account for this in the hit detection we will use (this.size / 2), which is the radius, in the constructor so we know that for this particular ball instance, we account for it. Writing out the code before with hard coded values helped a lot to understand what was happening with the surroundings of the ball.

So now that I have my constructor function done, the draw function is a lot neater. I made the check for loss it’s own function and I was thinking that I will display a game over image on the screen in a bit.

Now that we have all this modularized we can easily add an array of objects and create new (from the constructor) balls there. This is actually pretty cool using all the requirements of the project in a meaningful way.

After cleaning up some things and adding comments I’m starting to think of other things I want to add to this project. I want to add a start screen with text that says click to start. So I decided to write some text to the screen and set up a boolean variable that will check for a screen click.

Then I decided to add some images for the background of the screen and for a game over. I found these images and loaded them in using the preload function built into p5.

Lastly I wanted to add a score, to do that I added a key value into the paddle object and I updated it increment by one every time the ball hit the paddle. That method was in the ball Constructor so I went there and made the necessary change.

One last thing as a bonus, was I added a sound effect when the ball hits the paddle or when you lose. I loaded the sound file in the same way as the image. Once I had it in a variable, I passed it to the method paddleDetection() because I needed that clip in that method to play when it hit the paddle.

I did have some issues with figuring out how to get the hit detection on the paddle and how to improve it. It still causes some inconsistencies and glitches. If I had more time I would like to figure that out and maybe add in images for the balls as asteroids instead of them just being circles. Over all I had a lot of fun making the project and…

this is what I got it to look like…