Pong
In this lesson we will learn to make our own version of the classic video game Pong!
We will have two sections in our user interface (UI); one section is the scoreboard and the other is the area where the game is played which we call the "field". For those unfamiliar with Pong, Pong is essentially ping-pong (hence the name "Pong").
The scoreboard will contain a few components. We will want two areas to display the score of each played and then two buttons: one to reset the position of the ball in case it gets stuck for unexpected reasons and one to reset the score of the game. These our components will rest in a HorizontalArrangement component.
The field will contain a few components as well. We will want two paddles, one for each player, as well as a ball which will all be represented as moving sprites. These will all reside within a Canvas that fills up the screen below the scoreboard. The screen should be oriented in landscape mode to allow more horizontal movement for the game.
The field and paddles are represented as images. The assets for them are included at the bottom of the page.
Be sure to modify the properties for the ball and paddles as in the images below:
Now we will program the components to actually move. The first thing we want to do is to have the program setup the game properly. We need to set up a few global variables first that we will use (these will all be numerical values).
One issue that we will face is scaling the game to different types of screens. We could use fixed positions on the screen for the paddles but this wouldn't translate the same to all different sized screens. To work around this we will scale the game up or down depending on the dimensions of the phone screen. This means we will need a variable for screen width that is set at 0 (we will initialize it very soon). This will be used to scale all other measurements against. We are also going to need 5 positions on screen in the horizontal direction along the screen width (remember we are in portrait view). We will need variables for player 1 & 2 spawn positions for the paddles as well as 3 different positions for the ball to spawn (neutral, player 1 serve and player 2 serve). For this example Player 1 spawn is initialized to 0.1, player 2 spawn to 0.9, neutral ball to 0 (this will be explained later), player 1 serve to 0.2, and player 2 serve to 0.8. We also need to make two variables to hold the score values for the players. These two variables should be initialized to 0.
In order to setup the game we need to scale some values around. The block to do this is shown below.
The first thing this block does is gets the dimensions of the screen's width. This value is what all other values are scaled against. After this it calls a procedure that scales all values according to the width. This procedure (which is shown below) overwrites the player spawn point values and the serving points for the ball as well from their decimal numbers to values that can be used. The serving points are offset by 4 since we have the radius of the ball at 8 and the ball is aligned to the top left corner and not the center of the sprite. Using the new spawn positions we have the procedure move the paddles to fixed distances on the screen since they will only be moving vertically and not horizontally. We also set the neutral ball position to be halfway in the screen by scaling and offsetting by 4 as we did for the serving positions.
Now that the game is set up to be played we need to define what happens when the screen is interacted with.
First thing we should do is program the buttons in the scoreboard. The "Restart" button will set the game back to the starting conditions. This means we need to reset the score values to 0 (both the global variables and the labels that are on screen) and set the ball back to its starting position with speed 0 (the y value is not a big deal for the starting position but I chose 75 for mine).
After that we need to program the "Reset Ball" button. This one does the same thing as the restart button but without resetting the scores. To be optimal you can create a procedure to do this and then have both blocks of code for the "Restart" and "Reset Ball" buttons call this procedure instead of having the same code twice.
NEED TO FINISH: -Explain how the ball is flung -Explain how the paddles are dragged -Explain how the ball interacts with the paddles -Explain how the ball reacts to the walls -Explain how the scores are updated
- Add in sounds for the ball bouncing, scoring, and other appropriate sound effects.
- Can you make an AI that will control Player 2 (bonus if you can beat the AI in a match).
- Can you modify this game to become a game of Block Breaker?
Inspired by GeorgeMITApp's PingPong app in the App Inventor 2 Gallery