# VBForums UtilityBank > UtilityBank - Tutorials >  [VB.Net] Pong

## Quasar6

Pong: one of the simplest possible games to make. If you're doing an assignment, or just want to start making games, this tutorial will get you up and running with a working game ASAP.

Assumes you know how to add controls in the designer and switch between the designer cand code views.

*1) Starting up in the designer*
Make 3 picture boxes (1 player paddle, 1 computer paddle, one ball). Name and position them accordingly: playerPaddle at the bottom, computerPaddle at the top, ball in the centre. Add a timer with an Interval value of 50, and an Enabled value of true. Double-click the timer.

*2) Moving the players Paddle*
Now add 
VB Code:
playerPaddle.Location = Me.PointToClient(New Point(MousePosition.X, Me.PointToScreen(playerPaddle.Location).Y))
This will move the bottom paddle to be in line with the mouse every update. If you run it now, you should have a controllable bottom paddle.

Me.PointToClient converts the Sceen Coordinates of MousePosition.X to Form1 Coordinates, meaning that it won't affect the gameplay if you move the form around.

*3) Declaring Ball Speed Variables*
Add 
VB Code:
Dim ballXSpeed As Single
Dim ballYSpeed As Single
Directly to your namespace (_not_ in the timer event handler). This sets aside two variables for use later on

*4) Initialising Ball Speed Variables*
Go back to the designer and double click on the form. In the Form1_Load event handler, add: 
VB Code:
ballXSpeed = 0
ballYSpeed = -5
This initialises the ball speed variables. It will immediately move in the negative Y direction (towards the computer).

*5) Applying Ball Speed Variables*
Back in the timer event handler, add 
VB Code:
ball.Location = New Point(ball.Location.X+Math.Round(ballXSpeed), ball.Location.Y+Math.Round(ballYSpeed))
This adds the balls X and Y speeds to the balls location every frame. Running the program now, you should see the ball fly off the top of the screen.

*6) Determining collision with the playerPaddle*
This is more complex. You need to check whether or not the balls position is within the paddles bounding box. To do this for the players paddle, add: 
VB Code:
'Checks that the balls X position is within the left/right edges of the paddle
If ball.Location.X < playerPaddle.Right And ball.Location.X > playerPaddle.Left Then
'Checks that the balls Y position is within the top/bottom edges of the paddle
    If ball.Location.Y < playerPaddle.Bottom And ball.Location.Y > playerPaddle.Top Then
        'A collision has occured
    End If
End If
 Read this code thoroughly to understand how it works before you continue.

*7) Acting on collision with the playerPaddle*
When the ball collides with the playerPaddle, you want it to go up, towards the computerPaddle. Hence, you modify the ballYSpeed within the collision check:
VB Code:
'A collision has occured
        ballYSpeed = -10
        ballXSpeed = New Random(DateTime.Now.Millisecond).Next(-10,10)
This also randomises the X speed of the ball, to make things more interesting. The new Random class takes DateTime.Now as a seed, to prevent it always returning the same pseudorandom number everytime it is initialised.

*8) Collisions with the computerPaddle*
This is almost identical to collisions with the player paddle, but the ballYSpeed is changed to the opposite value to send it back to the player:
VB Code:
If ball.Location.X < computerPaddle.Right And ball.Location.X > computerPaddle.Left Then
'Checks that the balls Y position is within the top/bottom edges of the paddle
    If ball.Location.Y < computerPaddle.Bottom And ball.Location.Y > computerPaddle.Top Then
        'A collision has occured
        ballYSpeed = 10
        ballXSpeed = New Random(DateTime.Now.Millisecond).Next(-10,10)
    End If
End If
If you run this now, the ball should be able to bounce off of both paddles.

*9) Computer control.*
OK, we now have a working ball, but the computer paddle doesn't put up a fight. Add: 
VB Code:
If ball.Location.X > computerPaddle.Left + 20 Then
    'Move Right
    computerPaddle.Location = New Point(computerPaddle.Location.X+4, computerPaddle.Location.Y)
End If
If ball.Location.X < computerPaddle.Right - 20 Then
    'Move Left
    computerPaddle.Location = New Point(computerPaddle.Location.X-4, computerPaddle.Location.Y)
End If
This will move the computer paddle left and right when it needs to. Run it now and you'll have a working game of Pong.

The +20 and -20 add 'error tolerance', causing the computer player to move closer to the ball than is necessary to intercept it. This is much more like a human player than always intercepting the ball with the very edge of the paddle.

*10) Bouncing off of walls*
If you tried to play the game, you might have noticed that the ball can fly off of the left and right side of the screen. Making it bounce off of walls is easy enough, and takes away this bug.

VB Code:
If ball.Location.X < 0 Then
    ballXSpeed = 5
End If
If ball.Location.X > Me.Width Then
    ballXSpeed = -5
End If
Your game logic is now finished!

*11) Restarting the game*
The game plays, but will need a method to restart. Go back to the designer, and add a button somewhere. Name it 'restart', and double-click on it. Then add some very simple restart code: 
VB Code:
ballYSpeed = -5
ballXSpeed = 0
ball.Location = new Point(Math.Round(Me.Height/2), Math.Round(Me.Width/2))
And your game is finished! Feel free to improve on it: this is probably as simple as it gets to make a working game.

Suggestions for improvement and bonus points: 
~ Add a win/lose test, for when the ball goes off the top and bottom of the screen.
~ Mess with the Timer interval value and all the speed values to increase and decrease difficulty.
~ Combine the above two suggestions: make the game more difficult everytime the player wins and less difficult everytime they lose.
~ Make the Computer Paddle more realistic: add an xSpeed variable for it and add values to that variable to make it move more smoothly.
~ Using a Win/Lose test, disable the restart button when you are playing.
~ Using a Win/Lose test, add a score tracker using two labels and two integer variables.
~ Make pretty images for the ball and paddles.  :Smilie: 

If you find any problems, let me know and I'll fix them.

Enjoy,
Qu.

----------


## VB_VULCAN

Awesome!!! Just finished adding the xSpeed variable to make the paddles more realistic, and it's just like the original!

----------


## lhogan

The playerpaddle collision does not work for me. here is my code


Public Class Form1


    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        playerPaddle.Location = Me.PointToClient(New Point(MousePosition.X, Me.PointToScreen(playerPaddle.Location).Y))
        ball.Location = New Point(ball.Location.X + Math.Round(ballXSpeed), ball.Location.Y + Math.Round(ballYSpeed))
        If ball.Location.X < playerPaddle.Right And ball.Location.X > playerPaddle.Left Then
            'Checks that the balls Y position is within the top/bottom edges of the paddle
            If ball.Location.Y < playerPaddle.Bottom And ball.Location.Y > playerPaddle.Top Then
                'A collision has occured
            End If
        End If

        If ball.Location.X < computerPaddle.Right And ball.Location.X > computerPaddle.Left Then
            'Checks that the balls Y position is within the top/bottom edges of the paddle
            If ball.Location.Y < computerPaddle.Bottom And ball.Location.Y > computerPaddle.Top Then
                'A collision has occured
                ballYSpeed = 10
                ballXSpeed = New Random(DateTime.Now.Millisecond).Next(-10, 10)
            End If
        End If

        If ball.Location.X > computerPaddle.Left + 20 Then
            'Move Right
            computerPaddle.Location = New Point(computerPaddle.Location.X + 4, computerPaddle.Location.Y)
        End If
        If ball.Location.X < computerPaddle.Right - 20 Then
            'Move Left
            computerPaddle.Location = New Point(computerPaddle.Location.X - 4, computerPaddle.Location.Y)
        End If

        If ball.Location.X < 0 Then
            ballXSpeed = 5
        End If
        If ball.Location.X > Me.Width Then
            ballXSpeed = -5
        End If













    End Sub

    Dim ballXSpeed As Single
    Dim ballYSpeed As Single

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        ballXSpeed = 0
        ballYSpeed = -5
    End Sub
End Class

----------


## Quasar6

The collision is being detected, you're just not acting on it, see:


VB Code:
If ball.Location.X < playerPaddle.Right And ball.Location.X > playerPaddle.Left Then
    'Checks that the balls Y position is within the top/bottom edges of the paddle
    If ball.Location.Y < playerPaddle.Bottom And ball.Location.Y > playerPaddle.Top Then
        'A collision has occured... but we're not doing anything here!
         'TODO: Need to add some code to run for when the playerPaddle interacts with the ball
    End If
End If

It looks like you missed step 7.  :Smilie:

----------

