Pong

This tutorial will show you how to make a simple pong game or breakout without the bricks. It has basic collision detection techniques to tell when the ball hits the pad or a wall.

Graphical

Create a new standard exe.

Draw a shape 2 by 2 blocks or 255 by 255 twips and name it 'Ball'. Set the shape property to 3 - Circle. Set the backstyle to opaque and choose a backcolor and bordercolor.

select the shape tool again and draw a rectangular pad at the bottom of the screen. I recommend setting it to about 200 by 1500 twips. Name the shape Pad. You can now make it look nice by changing it to a rounded rectangle and setting its backcolor and bordercolor.

Make a Label called 'ScoreCard' with a reasonable font. I have made the backstyle transparent on mine. Place it in a good place like the top right hand corner. set its caption to 'Score: 0'.

Make a nice large command button in the middle of the form called 'Reset'. Set the caption to 'Reset' and the visible to false.
Finally create a timer called 'Timer1' with an interval of 1.

Now your project will be looking something similar to this, although the colours may be a bit more tasteful.

The graphical interface

Initialisation

Double click the form the get to its load event. Before we can set any variable we will need to declare some.

In the general declarations (at the very top outside of a sub) we need to declare some variables.

Dim X As Integer, Y As Integer, Score As Integer

X and Y keep the velocity of the ball in the X and Y axes (the direction is whether it is negative or not). Score is how many time the ball has hit the bat.

Now in the Form_Load sub we need to set the starting X and Y.

Private Sub Form_Load()
Ball.Left = 2500
Ball.Top = 1300
X = -50
Y = -50
End Sub

Here we set the starting position of the ball which you can change to whatever you prefer and the starting speed which you can also change. I have set the starting direction to go up and left with the two negative values.

Coding the ball

Double click the timer to get to its event. Now in the sub we are going to program in the movement of the ball.

Private Sub Timer1_Timer()
Ball.Move Ball.Left + X, Ball.Top + Y
End Sub

Here we are using ball.move instead of setting its top and left values because it is faster. We just add the X and Y values to the X and Y (or left aand top) values of the ball. Run the program and you should see the ball fly off the screen.

Now we need to do the collision detection. First we will just get it to bounce off the walls and will ignore where the pad is. Add this code just below the balls movement.

If Ball.Top <= 0 Then 'If the balls top is less than 0 i.e. above the top of the form then reverse
                      'the Y movement.
    Y = Y * -1
End If
If Ball.Left <= 0 Then 'If the balls left is below 0  then reverse the X movement
    X = X * -1
End If
If Ball.Left + Ball.Width >= Me.ScaleWidth Then 'Add the balls width to its left to get the right
                            'hand side of it.  If its more than the forms width then its gone off
                            'to the right so the direction should be reversed.
    X = X * -1
End If
If Ball.Top + Ball.Height >= Pad.Top Then 'same as with the one above except we take to top of the pad
                                          'to be where the bounce line is.
    Y = Y * -1
End If

I have commented this code quite a lot so you should read the comments to understand it. By now if you run the program the ball should bounce around nicely.

The pad

We use the mouse to move the pad so we use the forms mousemove event. the forms mousemove event returns the X coordinate of the mouse, along with other things, so we can just set the centre of the pad to this value.

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Pad.Left = X - Pad.Width / 2
End Sub

Detecting whether the ball hits the pad

This is where the main bulk of the code is. This code goes inside the If which detects th ball hitting the bottom (the last one).

If (Ball.Left + Ball.Width < Pad.Left) Or (Ball.Left > Pad.Left + Pad.Width) Then 'If the ball
                                                      'is to the left or right of the pad then
    Me.Caption = "Game Over"    'set the forms captino to read 'Game Over'
    Reset.Visible = True        'make the reset buttone visible
    Timer1.Enabled = False      'pause the program
Else
    Y = Y * -1.05   'speed up the ball
    X = X * 1.05
    Score = Score + 1   'add 1 more hit to the score
    ScoreCard.Caption = "Score: " & Score   'show the score on our label
    Me.Caption = "Score: " & Score          'show the score as our forms caption
    If (Ball.Left + Ball.Width / 2) < (Pad.Left + Pad.Width / 2) Then 'if the ball is to the left
                                                                      'of the pads centre then
        If X > 0 Then 'if it is going right
            X = X * -1 'make it go left
        End If
    Else                                                  'the ball must be on the right of the pad
        If X < 0 Then  'if it is going left
            X = X * -1 'make it go right
        End If
    End If
End If

This code is quite heavily commented so you can easily check the details so I'll just give an overview of what it does.

The first If checks to see if the ball has missed the pad. If the ball has missed the timer is stopped so the ball stops, the reset button is shown and the form displays game over.

Otherwise both velocities are increased slightly so that the game will gradually become harder. This is also the point where the Y directino is switched so that the ball goes back up. Another point is added to the score which is displayed

The final section checks to see which side of the pad the ball hit. If it is the left hand side the ball goes left if it is the right then the ball goes right.

Now try your program. If the code has been correctly inserted then the game should be playable until you lose when it will go dead as is impossible to reset.

That concludes the timers sub so I have put the entire code for it below in case anything went wrong with the previous steps.

Private Sub Timer1_Timer()
Ball.Move Ball.Left + X, Ball.Top + Y
If Ball.Top <= 0 Then
    Y = Y * -1
End If
If Ball.Left <= 0 Then
    X = X * -1
End If
If Ball.Left + Ball.Width >= Me.ScaleWidth Then
    X = X * -1
End If
If Ball.Top + Ball.Height >= Pad.Top Then
    If (Ball.Left + Ball.Width < Pad.Left) Or (Ball.Left > Pad.Left + Pad.Width) Then 'If the ball
                                                          'is to the left or right of the pad then
        Me.Caption = "Game Over"    'set the forms captino to read 'Game Over'
        Reset.Visible = True        'make the reset buttone visible
        Timer1.Enabled = False      'pause the program
    Else
        Y = Y * -1.05   'speed up the ball
        X = X * 1.05
        Score = Score + 1   'add 1 more hit to the score
        ScoreCard.Caption = "Score: " & Score   'show the score on our label
        Me.Caption = "Score: " & Score          'show the score as our forms caption
        If (Ball.Left + Ball.Width / 2) < (Pad.Left + Pad.Width / 2) Then 'if the ball is to the left
                                                                          'of the pads centre then
            If X > 0 Then 'if it is going right
                X = X * -1 'make it go left
            End If
        Else                                                  'the ball must be on the right of the pad
            If X < 0 Then  'if it is going left
                X = X * -1 'make it go right
            End If
        End If
    End If
End If
End Sub

The Reset Button

The Reset button is probably the easiest part to do as we just have to reset everything and start the timer again. Heres the code.

Private Sub Reset_Click()
Ball.Left = 2500 'reset the balls position
Ball.Top = 1300
X = -50 'reset the speed
Y = -50 'reset the speed
Reset.Visible = False
Score = 0 'reset the score
ScoreCard.Caption = "Score: " & Score   'show the score on our label
Me.Caption = "Score: " & Score          'show the score as our forms caption
Timer1.Enabled = True 'start the timer again to get the ball moving
End Sub

Conclusion

Heres the complete code for the program along with the project I made to download. If you wanted you could expand this into a breakout type game pretty easily or add an opponent to make it more like the classic pong that people used to play on consoles.

Dim X As Integer, Y As Integer, Score As Integer

Private Sub Form_Load()
Ball.Left = 2500
Ball.Top = 1300
X = -50
Y = -50
End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Pad.Left = X - Pad.Width / 2
End Sub

Private Sub Reset_Click()
Ball.Left = 2500 'reset the balls position
Ball.Top = 1300
X = -50 'reset the speed
Y = -50 'reset the speed
Reset.Visible = False
Score = 0 'reset the score
ScoreCard.Caption = "Score: " & Score   'show the score on our label
Me.Caption = "Score: " & Score          'show the score as our forms caption
Timer1.Enabled = True 'start the timer again to get the ball moving
End Sub

Private Sub Timer1_Timer()
Ball.Move Ball.Left + X, Ball.Top + Y
If Ball.Top <= 0 Then
    Y = Y * -1
End If
If Ball.Left <= 0 Then
    X = X * -1
End If
If Ball.Left + Ball.Width >= Me.ScaleWidth Then
    X = X * -1
End If
If Ball.Top + Ball.Height >= Pad.Top Then
    If (Ball.Left + Ball.Width < Pad.Left) Or (Ball.Left > Pad.Left + Pad.Width) Then 'If the ball
                                                          'is to the left or right of the pad then
        Me.Caption = "Game Over"    'set the forms captino to read 'Game Over'
        Reset.Visible = True        'make the reset buttone visible
        Timer1.Enabled = False      'pause the program
    Else
        Y = Y * -1.05   'speed up the ball
        X = X * 1.05
        Score = Score + 1   'add 1 more hit to the score
        ScoreCard.Caption = "Score: " & Score   'show the score on our label
        Me.Caption = "Score: " & Score          'show the score as our forms caption
        If (Ball.Left + Ball.Width / 2) < (Pad.Left + Pad.Width / 2) Then 'if the ball is to the left
                                                                          'of the pads centre then
            If X > 0 Then 'if it is going right
                X = X * -1 'make it go left
            End If
        Else                                                  'the ball must be on the right of the pad
            If X < 0 Then  'if it is going left
                X = X * -1 'make it go right
            End If
        End If
    End If
End If

End Sub

Download the complete project

Other tutorials

Home