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, 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.
Now that we have finished programming the buttons we need to program the sprites on the field and the actual workings of the game. The first thing we will tackle is the movement of the paddles. The paddles are fixed in the x-direction, they don't move horizontally at all, but they do move vertically along the y-axis as they are dragged by a finger. In order to define this we need to take a paddle.Dragged block for each paddle and tell the block that when this happens the paddle will move to the current position of the finger in the vertical direction and stay stationary in the x-direction.
Now that we defined how a paddle interacts when dragged we will define a ball interacts when it is flung. To do this we will need the block for ball.Flung. This block will need to do two things: set the speed of the ball and the direction it is heading.
All of the interactions between the player and the screen are now defined. The last things we need to do are define what happens when the ball hits a wall, when the ball hits a paddle, and how the scoring works. The first thing we'll cover is how the ball and paddles interact.
In App Inventor 2 (AI2), whenever a collision happens between two sprites a CollidedWith event happens. Either sprite can handle this event by using the .CollidedWith block. In this example we will use the paddle.CollidedWith block. When a paddle and ball collide the ball should bounce backwards and the paddle remain the same. As with the ball being flung, two things are happening here. The ball changed direction and can change speed. For this we would also like to randomize the movement of the ball a little bit. In order to bounce the ball backwards we need to add 180 (degrees) to the current direction it is heading. To randomize this we will add a random number between a given range that includes 180 (this example uses 110 to 210). After that we will also modify the ball's speed as a random number between 16 and 20 (this can also be different, just make sure it is not too slow or too fast).
Aside from the paddles the only things that the ball interacts with are the walls/bounds/edges of the field. In AI2 the walls are denoted as numerical values: 1 is North, 2 is NorthEast, 3 is East, 4 is SouthEast, -1 is South, -2 is SouthWest, -3 is West, and -4 is NorthWest. In our field we have four walls: North, South, East, and West along with the corners of the walls. To define what happens we will need the ball.EdgeReached block to define what happens as well as some conditional statements. The North and South walls simply bounce the ball off of them so we will need to make a conditional stating if the edge (wall) is equal to 1 or -1 that the ball will bounce off of it. This leaves us with the two scoring zones and the corners. We are going to group the East, SouthEast, and SouthWest walls together and the Westward ones together as well. Each of these groupings will call a procedure to give a point to the scoring player.
The last things to program are the procedures that handle scoring for the players. When these procedures are called they need to update the scores on the scoreboard, update the global variables that keep track of scores, and reset the ball to the scoring player's serving position with zero speed. The end result should be similar to this.
With this done you should have a working game of Pong! Some ways to expand upon and modify the game are included at the bottom of the page.
- 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