[VB.Net] Pong

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. :)

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

Enjoy,
Qu.

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

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

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. :)