Scratch Saturday: Pong

One of the first video games ever made was called Pong. The game was based on table tennis, a two player game, where each side controlled a “bat.” Both sides tried to bounce the “ball” past the opponent’s bat to score a point.

It was a very simple game but was it simple to program?

Only 3 sprites are required – two bats and a ball – at first glance. As we design the game, we’ll see that we need a few more sprites than that. We’re going to make this into a one-player game, which means we’re going to have to program the computer to control the second bat and we’re going to try and make him to be a decent player!

We’ll end the game when one of the two players gets 7 points. This means we’ll have to create variables for both players’ scores.

The main other thing we need to consider is how to program the ball to bounce off the sides of the arena and off the bats.

Just for fun, I’m going to add a few “power-ups”, which will make changes to our ball and bats.

While all the above doesn’t sound like a lot of work, we’ll see over the next few weeks that there are a few tricky bits of coding to get through. In our first lesson, we’re going to create the sprites and get them moving.

Lesson 2

We’re going to go as retro as possible with the game being played on a black background and the sprites in a bright green colour, similar to those used in the old Acorn computers. However, we’re going to mix this up with some more modern coloured power-ups.

The bats are going to be thick straight lines and the ball is going to be a small circle. I’m going to create a few power-ups: one that slows down the ball, one that speeds it up, one that extends the size of the bat, another that shrinks it and one that makes the ball bigger. I’m only going to use one sprite for all five power ups and I’ll be using colour to decide what happens.

Two other sprites that we’re going to be created are the “goals.” They are going to be invisible lines that go across the length of the screen. You can download all the sprites here.

In order to move our sprite, we do our usual code. Thankfully, the sprite only moves in 2 directions: left and right. You can see the code below but you should be able to figure this out.

How about inventing your own power ups? What kinds of ideas could you come up with? How about splitting the ball in three? How about giving you a bonus point if you hit the power up? In the next section, we’re going to get the ball moving around the screen. We won’t bother scoring points yet but I do want the ball to bounce off the walls (easy!) and the bats (not so easy!)

Lesson 3

In this lesson, we’re going to get the ball moving around the screen. We’re going to add some variables that might not make it into the final game, for example, a variable that shows the angle the ball is moving.

To start off with, we’re going to get the ball starting in the middle of the screen, which is at co-ordinates, (0, 0). Next, we’re going to choose a random angle to start the ball moving. I’m creating a broadcast called <goBall>, which essentially moves the ball until it hits off a bat. We’ll start off by doing this with just the player’s bat before we go with the opponent’s bat.

Basically, the ball keeps moving at a variable speed, which we’ll set at the start to 5 and call it <ballSpeed>. We’ll keep this going, for the moment, with the command <repeat until touches <player>>.  We also add a command <if on edge, bounce>, which is a very useful command that does exactly what it says it does. If we didn’t have this command in Scratch, we’d be using complicated trigonometry that even secondary school students would struggle with! (atan anyone?)

Once the ball touches off our bat, (<player>), it sets off the commands below.

We set the angle to be any angle between -60 and 60 degrees. The reason for this is so that the ball now moves upwards on the screen but at a reasonable angle – not too wide! If you fancy being very clever, you might set the angle to be dependent on where on the bat the ball hits but this would involve very complex programming! If you’ve done it, let me know and I’ll share the code. When it changes the direction of the bat, it’s time to <goBall> again.

In the next session, we’ll add to the code so the computer bat starts moving and we’ll get the ball to bounce off that!

Lesson 4

We’ve already made a good start to our game with the controls in place for the player and we’ve also got the ball moving around the screen. We got the ball bouncing off our bat so we’d better do the same with the computer’s bat.

Our bat was easy to do as we chose an angle between -60 and 60 degrees, which moved the ball upwards. What angles will we need for the ball to go downwards? The ball goes straight downwards at 180 degrees so perhaps 60 degrees either side will work so that’s 120 to 240 degrees.  We’ll also need to change the code that sets this off. So far, the ball bounces until it touches the player’s bat. Now we’ll add what happens when we touch the computer’s bat.

Now we have the bats behaving the way we want them, we need to get the computer’s bat to move. Now we could get it to move from left to right and right to left but this isn’t much of a challenge so I’m going to try and get the bat to move towards where the ball is going to be.

We’re going to create a variable called <ballPosx>, which constantly track the position of the ball on the x-axis. We need our computer to move the bat towards where the ball is going. It’s very easy to make the computer completely infallible by making it glide to the correct position instantly. In order to make it imperfect, we need to give it a fraction of a second to respond to our shot.

As you can see, there’s very little code. The variable, <reaction>,  is the reaction time the computer will have and we’ll set it to 0.4, (0.1 makes the computer almost infallible.) You can set this when the user clicks the green flag. You can adjust the figures to suit yourself but I find 0.4 provides a challenge but isn’t completely impossible. You don’t want the game to be too easy!

In the next game, we’ll add scores, which means adding a couple of new sprites and a couple of new variables.

Lesson 5

I guess it’s about time we started adding scores to the game. In Pong, a point is scored when the ball moves past the bat. To emulate this in our example, I’m creating two new sprites, <computerGoal> and <playerGoal>. These sprites are going to be the same colour as the stage so appear to be invisible. When the ball touches off one of these, a point is scored depending on the sprite it touches. We need to create two variables: <computerScore> and <playerScore>.

The next bits are easy enough. If the ball touches these sprites, a number of actions will take place: the ball will stop, the computer or player will score a point and the game will restart, (see below.)

We now have a functioning game and we just need to end it when somebody scores 7 points. This requires two more sprites. The first is a sprite, which tells you that you have won and the other will tell you that you’ve lost.

Initially, both these sprites need to be hidden and they will wait until somebody gets to 7 points. One sprite will show itself and the game will end.

In the next game, we’re going to add the power ups. See what ideas you can come up with for power ups.

Lesson 6

It’s time to add some power ups. I’m going to create different coloured balls that will cause different things to happen. They will show up on screen every so often and disappear when touched or after a number of seconds. Rather than creating a load of different sprites for this, I’m going to make the bold move of creating one sprite with 5 different costumes and make one of these appear at random, somewhere random on the screen for a random number of seconds!

Now, we need to make something happen when the ball hits off one of these Power Ups.

The five Power Ups that I chose are:

1. Make the Bat bigger
2. Make the Bat smaller
3. Make the ball bigger
4. Make the ball faster
5. Make the ball slower

Each of these power ups will last 10 seconds and we’ll have to create a broadcast for each one. We set up our blocks of code like below.

For each time the ball hits a power up, the power up must disappear straight away so we can set this up fairly easily.

We now have all we need for the game to work properly. The last thing to do is to add sound. I’ll leave this last part of the game to you but I’d love to hear of your ideas! You can click on the image below to try the game out for yourself. Have a great summer of coding!