Skip to Main Content

Pong Game

Objectives

  • We are going to recreate a version of the pong game.
  • You will be learning how to:
    1. Create paddles that move
    2. Create a ball that bounces
    3. Add scores for players 1 and 2
    4. Reset the ball between rounds using broadcasts
    5. Winning the game
    6. Add some basic physics to the ball (Extension)

We will be doing this in Scratch


1. Paddles

  1. Create a new Scratch project. Right click on the cat sprite and choose 'delete'
  2. Add a sprite for player 1's paddle using the instructions below
  3. Repeat for player 2's paddle (with appropriate name change)
  4. Now it's time to make the paddles move with some code. We are going to make it so that player 1 is controlled with the left and right arrows and player 2 is controlled with the 'a' and 'd' keys. We do this by continuously checking if the button is pressed. If it is we make it move. Here's the pieces:
  5. Now let's look at how we put them all together. First we have to understand how the scratch screen is laid out. Scratch uses a 2-dimensional grid like this:
    • The X-axis goes from a minimum of -240 to a maximum of 240
    • The Y-axis goes from a minimum of -180 to a maximum of 180
  6. To move left and right we will be moving along the X-axis. To go right we increase x by 10 and to go left we decrease x by 10.
  7. Putting all the pieces together we get:


2. Ball

  1. We are going to start off by adding in a ball sprite. For this we are going to choose the basic ball, but any round sprite of a similar size should work.
       
  2. Next we are going to add code to its script to make it move continuously and bounce if it hits the edge.
  3. When you run the script the ball should bounce around the screen, including through the paddles. Obviously this isn't how it should work. We want the ball to bounce off the paddles. We also want the ball to start back in the centre each time and fall toward one of the paddles. Let's have a look at how to do all of that.
  4. We'll start with the positioning and moving toward the paddle.

    When we put it altogether we get:
  5. For bouncing off the paddles we'll keep it basic to begin with. When it hits the paddle it'll turn around and go back the other way. The following code is for one paddle. You'll need to do the same for paddle 2. When we add physics later we will make this a bit more interesting.
  6. Put the code above between the move 10 steps and the if on edge, bounce

3. Score

  1. In a game of pong if the ball hits the top or the bottom that should be a goal for player on the other side. To code that in we are going to need to get a bit creative and really understand the grid on which scratch is based.
  2. First we need to add variables for the scores. Go into data and choose 'Make a variable'
  3. First one will be 'Player 1 Score', do it again and make 'Player 2 Score'
  4. You should now have some new blocks under the data tab. We need to set the initial score to 0 so games start with new scores. Take the new 'Set Player 1 Score to 0' block and drag it under the start block. Do the same again and use the dropdown box to change the variable to 'Player 2 Score'. If you've done everything correctly your code should look like this: 
  5. Now it's time to do something with the score. Drag the 'if on edge, bounce' block out of the code, but don't throw it away. We're going to build exactly what should happen if it hits the edge. The first part is going to be a new 'if' block with the condition 'touching edge?'
  6. Inside this we are going to put some 'if-then-else' blocks. We will need two of them, one inside the other. This is called 'nesting' as in Russian Nesting Dolls. When we put them together it should look like this:
  7. The are three possible things we want to check for. If it touches the top, if it touches the bottom and if it touches any other side. This brings us back to the grid:
    • Touching the top means the ball is at or nearly at the maximum on the Y-axis. We'll give it some leeway and call it Y: 155
    • Touching the bottom means the ball is at or nearly at the minimum on the Y-axis. We'll give it some leeway and call it Y: -155
    • Anything else means we are touching the sides.
  8. To program this we will use the comparison operators less than (<) and greater than (>). First let's do the bottom:
  9. Slot this into the first 'if-then-else' and then build the check for the top using the > and slot it into the second 'if'-then-else'. Finally add the 'if on edge, bounce' back in to the final 'else'.
  10. Now we're ready to add the score changing in. We'll say player 1 is the bottom, and player 2 is the top.
    • When the ball hits the bottom (y position < -155) player 2 gets a point and the ball should head towards player 2 (up).
    • When the ball hits the top (y position > 155) player 1 gets a point and the ball should head towards player 1 (up).
        
  11. Finally drag this entire block into the main code for the ball under 'if touching paddle 2?'. This should be the same place you took the 'if on edge, bounce' back in step 5.

4. Resetting the Ball

  1. The second to last step is to reset the game state after each goal. We will be accomplishing this using broadcasts.
    • Sprites have their own way of talking to each other to know when something has happened. These are called broadcasts. They are messages passed between sprites that do not appear on screen.
    • We will be broadcasting a message called 'score' that will be picked up by different parts of the game and each will respond to it in their own way.
    • We will also alter the code to create a 'Game Start' message so we can pause the ball after each score.
  2. Under the 'Event's tab there are 3 broadcast related blocks found at the bottom.
    • 'When I receive...' allows us to do something when the sprite receives the message
    • 'broadcast ...' allows us to send out a message to all sprites (including ourselves)
    • 'broadcast ... and wait' does the same as a regular broadcast but pauses the script until all 'When I receive' scripts from this broadcast are finished
  3. Click the dropdown box that says 'message1' and choose 'new message...' Name the new message 'goal'
  4. Inside the ball script, go to where we change Player 1 Score by 1 and add a broadcast goal in underneath:
  5. Go to the bottom paddle and add this code then do the same but change the y value to positive for the top paddle.
  6. Next go to the backdrop. In here we are going to work out who, if anyone has won, and then what to do. We have 3 different options. Either:
    • Player 1 has won
    • Player 2 has won
    • No one has won.
  7. To figure this out we are going to have two nested 'if-then-else' here. The first just checks if either player won, the second determines who won. The reason we do it like this is that we have some code that is universal to either player winning - stopping the ball and paddles from moving. Here's our structure:
    • We could choose a larger score than 10 (remember > will trigger only if it's over the number so we want to be one less than the goal) and if we choose to be really fancy we could make a variable called 'Max Score' so that we can choose what score to go up to.
  8. We will fill in the gaps with more broadcasts:
    • Game Over will contain our universal rules for game over
    • Player 1 wins and Player 2 wins will make the appropriate message show up
    • Game Start will reset the ball for another round if there isn't a winner yet.
  9. Then we need to change our ball from starting on the green flag to sending a 'game start' on the green flag. Do this by detaching the code below 'point in direction 180' and reattach it to a 'When I receive game start'
      

5. Winning the Game

  1. The final step is to set up a 'Player X wins' message.
  2. We will create a new sprite for the message and use the text tool to write out what we want:

  3. Inside this sprite we are going to add the script for receiving the broadcast that player 1 has won:
  4. Repeat steps 2 and 3 for the 'Player 2 Wins' broadcast
  5. Back in the two paddles and the ball we need to add code for receiving the Game Over broadcast:
  6. If we run the game now though, our paddles will hide when the game is over and won't appear again. To fix this we need to make sure when the game starts that they reappear again. Create this code in each of the paddles to make them appear.
  7. Congratulations the game is complete

Extension: Physics

  1. If we want to go beyond the basics we can add some more realistic physics into the game. At the moment the ball just bounces back in the same direction.
  2. This is a fairly complicated script . It's not long but it isn't easy to understand.
  3. When the ball touches the paddle we want it to do one of three things
    • If it hits on the left we want it to bounce back on the left (the arc: -80 to -1 degrees)
    • If it hits on the right we want it to bounce back on the right (the arc 1 to 80 degrees)
    • If it hits in the centre we want it to bounce straight (0 degrees or 180 degrees)
  4. Inside the ball sprite's code we are going to revist the 'if touching paddle? then' section for the bottom paddle. Inside it we are going to create two nested if-then-else blocks.
  5. The condition uses the pieces below to determine if the ball is hitting the paddle from the left.
  6. Putting them together we get our if-then-else structure:
  7. Inside we want to point the ball in the direction it came from, but with a bit of random spin to it. We are going to use the point in direction block and the pick random block. For pick random we want the ball to bounce off in the arc of -80 degrees to -1 degree.
  8. Putting it altogether we get:
  9. For the top paddle the code is almost identical. However the directions need to be inverted as the ball is coming from the other way. If we don't the ball will bounce right through the paddle! We do this by taking the result away from 180.
  10. The finished code for paddle 2 should look like:

On Your Own:

  • See if you can create the following:
    • A variable max score
    • A button for new game
    • A countdown