TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

Graphics - The Pong Game

In other pages in this section we have already used a picture box to display an image file.
We can also use images somewhat more dynamically by making them move around in a
form. We can change the location of a picture box (or any other kind of visible control for
that matter) by changing its Location property at run time (programmatically, rather than
in the form design window) . The top left corner of the form has the x, y coordinates 0, 0.
A control is positioned on the form programmatically by setting its x and x coordinates to
appropriate values. The x coordinate determines the horizontal distance between the
left-hand side of the form and the left-hand side of the control, while the y coordinate
similarly determines the vertical distance between the top of the form and the top of the
control. These coordinates are specified as pixel values in the control's Location property,
separated by a comma. We can use this ability to dynamically move objects around on
the screen to create animations and games. To demonstrate this, we will create a Visual
Basic version of a very old arcade game - one of the earliest arcade games ever, in fact!

Open a new project called "Pong" and create an interface like the one illustrated
below (note that the program icon and playing area background image are provided
for you and should be copied into your project directory - they can be downloaded
here) . Note that you will also need to create three Timer controls (see the table
below for details) .

The Pong program interface

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

1 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

Set the control names and other properties as shown in the table below.

Pong Form Controls

Control

Name

Additional Properties

Form

frmPong

BackColor: Black
Icon: pong.ico
Size: 680, 580
Text: "Pong"

PictureBox picPongTable

Image: pong_table.bmp
Location: 12, 12
Sze: 640, 480

Label

lblBall

BackColor: White
Location: 324, 244
Size: 16, 16
Text: None
Visible: False

Label

lblPaddleLeft

BackColor: White
Location: 23, 212
Size: 16, 80
Text: None

Label

lblPaddleRight BackColor: White

Location: 625, 212
Size: 16, 80
Text: None

Label

lblLeftScore

BackColor: Black
ForeColor: White
Font: Microsoft Sans Serif 24pt Regular
Location: 210, 40
Text: "0"

Label

lblRightScore

BackColor: Black
ForeColor: White
Font: Microsoft Sans Serif 24pt Regular
Location: 420, 40
Text: "0"

Button

cmdPlay

Location: 334, 507

Size: 75, 23
Text: "Play"

Button

cmdPause

Location: 415, 507

Size: 75, 23
Text: "Pause"

Button

cmdReset

Location: 496, 507

Size: 75, 23
Text: "Reset"

Button

cmdExit

ForeColor: Red
Location: 577, 507
Size: 75, 23
Text: "Exit"

Timer

tmrBall

Enabled: False
Interval: 10

Timer

tmrPaddle

Enabled: False
Interval: 10

Timer

tmrBreak

Enabled: False
Interval: 3000

The program code in its entirety is presented at the bottom of this page. Note that we are
not going to go into lengthy explanations of how the code works. Hopefully, it is

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

2 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

sufficiently-well commented to enable the reader to figure out how the program works.
The code is also designed to be relatively generic, so that changes to the interface
dimensions can be made with relatively few changes to the code being necessary. Game
play is simple, and the game parameters are summarised below. The computer operates
its paddle using the logic provided (essentially, it attempts to vertically align itself with the
ball when the ball is within the left-hand half of the court and travelling from right to left) .
The computer is actually quite difficult to beat, although it is possible. The player always
serves first, with service thereafter being made by whoever won the last point. The angle
of serve is randomly selected by selecting a random value for the ball's y vector each
time play restarts. A similar technique is used to randomise the angle at which the ball
leaves the computer's paddle. The player can exercise some control over the angle at
which they return the ball, depending on which part of the paddle makes contact with the
ball. Contact with the top of the paddle will cause the ball to rise steeply away from the
right-hand paddle, while contact with the bottom of the paddle will have cause it to leave
the paddle in a steep downwards direction. Contact with the mid-section of the paddle
plays the ball back down the court horizontally, and there are intermediate angles for
other sections of the paddle.

Using the program

Click on the Start button to begin the game.
Click on the Pause button to pause the game (or Resume to continue) .
Click on the Reset button to reset the game to its initial state.
Click on the Exit button to close the program immediately.
The left-hand paddle is operated by the computer, the right-hand paddle is operated
by the player (there is only a single-player game mode) .
The player operates the right-hand paddle by holding down the left mouse button to
make the paddle to move down, and the right-hand mouse button to make it move
up.
If the ball gets past either paddle, the other player scores one point (scores are
displayed at the top of the playing area) .
The first player to score eleven points is the winner.

The code
Public Class frmPong
Dim vx, vy As Single 'x and y vectors for ball
Dim paddleZone As Integer 'section of paddle making contact with ball
Dim winScore As Integer = 11 'score that must be attained to win game
Dim scoreLeft, scoreRight, lastPoint As Integer 'game scores and last

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

3 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

player to score
Dim upFlag As Boolean = False 'True when left mouse button held down
Dim dnFlag As Boolean = False 'True when right mouse button held down
Dim breakCount As Integer = 0 'counter for tmrBreak clock ticks
Dim intLCourt, intRcourt, intTCourt, intBCourt, intCCourt As Integer
'left, right, top and bottom boundaries of court
Dim intBallW, intBallH As Integer 'ball width and height
Dim intPadLH, intPadRH As Integer 'left and right paddle heights
Dim intPadLTop, intPadRTop As Integer 'initial y coordinate for top of
paddles
Dim intPadFaceL, intPadFaceR 'x coordinates for contact surfaces of left
and right paddles
Private Sub frmPong_Load (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles MyBase.Load
'initialise global variables
intLCourt = picPongTable.Left + 5
intRcourt = picPongTable.Left + picPongTable.Width - 5
intTCourt = picPongTable.Top + 5
intBCourt = picPongTable.Top + picPongTable.Height - 5
intCCourt = picPongTable.Left + picPongTable.Width / 2
intBallW = lblBall.Width
intBallH = lblBall.Height
intPadLH = lblPaddleLeft.Height
intPadRH = lblPaddleRight.Height
intPadLTop = picPongTable.Top + picPongTable.Height / 2 lblPaddleLeft.Height / 2
intPadRTop = picPongTable.Top + picPongTable.Height / 2 lblPaddleRight.Height / 2
intPadFaceL = lblPaddleLeft.Left + lblPaddleLeft.Width
intPadFaceR = lblPaddleRight.Left
End Sub
Private Sub tmrPaddle_Tick (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles tmrPaddle.Tick
If lblBall.Left < (intCCourt - intBallW / 2) And vx < 0 Then
'ball is in left court and moving towards left paddle
If (lblBall.Top + intBallH / 2) > (lblPaddleLeft.Top + intPadLH / 2)
Then
'ball is below centre of left paddle
If (lblPaddleLeft.Top + intPadLH) < intBCourt Then
'paddle is not yet at at bottom of court
lblPaddleLeft.Top += 4 'move left paddle down 4 pixels
End If
ElseIf (lblBall.Top + intBallH / 2) < (lblPaddleLeft.Top + intPadLH /
2) Then
'ball is above centre of left paddle
If lblPaddleLeft.Top > intTCourt Then 'paddle is not yet at top of
court
lblPaddleLeft.Top -= 4 'move left paddle up 4 pixels
End If
End If
Else 'ball is not in left court or is moving away from left paddle
If lblPaddleLeft.Top < intPadLTop Then
'left paddle is above initial start position
lblPaddleLeft.Top += 1 'move paddle down by 1 pixel
ElseIf lblPaddleLeft.Top > intPadLTop Then
'left paddle is below initial start position

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

4 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

lblPaddleLeft.Top -= 1 'move paddle up by 1 pixel

End If
End If
'make sure left paddle is between top and bottom borders of court
If lblPaddleLeft.Top < intTCourt Then
lblPaddleLeft.Top = intTCourt
ElseIf lblPaddleLeft.Top > (intBCourt - intPadLH) Then
lblPaddleLeft.Top = (intBCourt - intPadLH)
End If
If upFlag = True And lblPaddleRight.Top > intTCourt Then
'left mouse button is down and left paddle is not at top of court
lblPaddleRight.Top -= 4 'move right paddle up 4 pixels
ElseIf dnFlag = True And lblPaddleRight.Top < (intBCourt - intPadRH)
Then
'right mouse button is down and left paddle is not at bottom of court
lblPaddleRight.Top += 4 'move right paddle down 4 pixels
End If
'make sure right paddle is between top and bottom boundaries of court
If lblPaddleRight.Top < intTCourt Then
lblPaddleRight.Top = intTCourt
ElseIf lblPaddleRight.Top > (intBCourt - intPadRH) Then
lblPaddleRight.Top = (intBCourt - intPadRH)
End If
End Sub
Private Sub tmrBall_Tick (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles tmrBall.Tick
'this procedure moves the ball once per clock tick when the timer is
turned on,
'and checks the ball's position to see whether it has made contact with
the top
'or bottom boundaries of the court, made contact with a paddle, or
reached the
'left or right-hand end of the court
lblBall.Top = lblBall.Top + vy 'move ball up or down by vy pixels
lblBall.Left = lblBall.Left + vx 'move ball left or right by vx pixels
If lblBall.Top < intTCourt Then lblBall.Top = intTCourt
'keep ball below upper boundary of court
If lblBall.Top > (intBCourt - intBallH) Then lblBall.Top = (intBCourt intBallH)
'keep ball above lower boundary of court
If lblBall.Top <= intTCourt Or lblBall.Top >= (intBCourt - intBallH)
Then vy = -vy
'make ball "bounce" (change vertical direction of ball)
If vx < 0 Then 'ball is moving from right to left
If lblBall.Top > (lblPaddleLeft.Top - intBallH) And lblBall.Top _
< (lblPaddleLeft.Top + intPadLH) Then
'vertical coordinates of ball and left paddle overlap
If lblBall.Left <= intPadFaceL Then 'ball has made contact with
left paddle
'change direction of ball and generate x and y vector values
for ball
'based on randon selection of paddleZone values (+3 to -3)
Randomize ()
paddleZone = CInt ((Rnd () * 6) - 3)
Select Case paddleZone
Case 3
vy = -5

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

5 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

vx =
Case 2
vy =
vx =
Case 1
vy =
vx =
Case 0

2
-4
3
-3
4

vy = 0
vx = 5
Case -1
vy = 3
vx = 4
Case -2
vy = 4
vx = 3
Case -3
vy = 5
vx = 2
End Select
End If
Else
If lblBall.Left <= intLCourt Then
'vertical coordinates of ball and left paddle do not overlap
'and ball has reached left boundary of court
pointScored ()
End If
End If
ElseIf vx > 0 Then 'ball is moving from left to right
If lblBall.Top > (lblPaddleRight.Top - intBallH) And lblBall.Top _
< (lblPaddleRight.Top + intPadRH) Then
'vertical coordinates of ball and right paddle overlap
If (lblBall.Left + intBallW) > lblPaddleRight.Left Then
'ball has made contact with right paddle
getZoneR () 'get section of right paddle making contact with
ball
'change direction of ball and generate x and y vector values
for ball
'depending on calculated paddleZone value (+3 to -3)
Select Case paddleZone
Case 3
vy = -5
vx = -2
Case 2
vy = -4
vx = -3
Case 1
vy = -3
vx = -4
Case 0
vy = 0
vx = -5
Case -1
vy = 3
vx = -4
Case -2
vy = 4
vx = -3
Case -3
vy = 5

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

6 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

vx = -2
End Select
End If
Else
If lblBall.Left > (intRcourt - intBallW) Then
'vertical coordinates of ball and right paddle do not overlap
'and ball has reached right boundary of court
pointScored ()
End If
End If
End If
End Sub
Private Sub tmrBreak_Tick (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles tmrBreak.Tick
'this procedure executes when a point has been scored
breakCount += 1 'record number of times timer has ticked
If breakCount = 1 Then 'this is first timer tick
lblPaddleLeft.Top = intPadLTop 'reset left paddle position
lblPaddleRight.Top = intPadRTop 'reset right paddle position
If lastPoint = 1 Then 'computer won last point
lblBall.Top = lblPaddleLeft.Top + intPadLH / 2 - intBallH / 2
'position ball in line with centre of left paddle
lblBall.Left = intPadFaceL 'place ball immediately to right of
left paddle
vx = 5 'set ball's x vector value to 5
ElseIf lastPoint = 2 Then 'player won last point
lblBall.Top = lblPaddleRight.Top + intPadRH / 2 - intBallH / 2
'position ball in line with centre of right paddle
lblBall.Left = intPadFaceR - lblBall.Width
'place ball immediately to left of right paddle
vx = -5 'set ball's x vector value to -5
End If
'generate random y vector value for ball (5 to -5
Randomize ()
vy = (Rnd () * 10) - 5
ElseIf breakCount = 2 Then 'this is second timer tick
breakCount = 0 'reset timer counter
lblBall.Visible = True 'restore visibility of ball
tmrBall.Start () 'restart tmrBall
tmrPaddle.Start () 'restart tmrPaddle
tmrBreak.Stop () 'stop tmrBreak
End If
End Sub
Private Sub cmdPlay_Click (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles cmdPlay.Click
'this procedure starts game - player will server first
lblBall.Top = lblPaddleRight.Top + intPadRH / 2 - intBallH / 2
'position ball in line with centre of right paddle
lblBall.Left = intPadFaceR - lblBall.Width
'place ball immediately to left of right paddle
lblBall.Visible = True 'make ball visible
vx = -5 'set ball's x vector to -5
'generate random y vector value for ball (5 to -5)
Randomize ()
vy = (Rnd () * 10) - 5
tmrPaddle.Start () 'start tmrPaddle

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

7 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

tmrBall.Start () 'start tmrBall

cmdPlay.Enabled = False 'disable Start button
End Sub
Private Sub cmdPause_Click (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles cmdPause.Click
'this procedure allows player to pause the game
If cmdPause.Text = "Pause" Then 'game is in progress
tmrPaddle.Stop () 'stop tmrPaddle
tmrBall.Stop () 'stop tmrBall
cmdPause.Text = "Resume" 'change button caption to "Resume"
ElseIf cmdPause.Text = "Resume" Then 'game is paused
tmrPaddle.Start () 'start tmrPaddle
tmrBall.Start () 'start tmrBall
cmdPause.Text = "Pause" 'change button caption to "Pause"
End If
End Sub
Private Sub cmdReset_Click (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles cmdReset.Click
'this procedure stops game and resets game variable and display
reset ()
resetScores ()
End Sub
Private Sub cmdExit_Click (ByVal sender As System.Object, ByVal e As
System.EventArgs) _
Handles cmdExit.Click
'this procedure exits program immediately
End
End Sub
Sub getZoneR ()
'this procedure checks where ball "made contact" with
'rightPaddle and sets value of paddleZone accordingly
'numbers would need adjustment if paddle height changed
If (lblBall.Top + intBallH / 2) < (lblPaddleRight.Top + 10)
paddleZone = 3
ElseIf (lblBall.Top + intBallH / 2) < (lblPaddleRight.Top +
paddleZone = 2
ElseIf (lblBall.Top + intBallH / 2) < (lblPaddleRight.Top +
paddleZone = 1
ElseIf (lblBall.Top + intBallH / 2) < (lblPaddleRight.Top +
paddleZone = 0
ElseIf (lblBall.Top + intBallH / 2) < (lblPaddleRight.Top +
paddleZone = -1
ElseIf (lblBall.Top + intBallH / 2) < (lblPaddleRight.Top +
paddleZone = -2
Else
paddleZone = -3
End If
End Sub

Then
20) Then
30) Then
50) Then
60) Then
70) Then

Sub pointScored ()
'this procedure executes if ball reaches either end of court
tmrBall.Stop () 'stop tmrBall
tmrPaddle.Stop () 'stop tmrPaddle
If lblBall.Left < intPadFaceL Then 'ball has bypassed the left paddle

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

8 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

scoreRight = scoreRight + 1 'add 1 to player's score

lastPoint = 2 'player won last point
lblRightScore.Text = scoreRight 'display new player score
ElseIf (lblBall.Left + intBallW) > intPadFaceR Then
'ball has bypassed the right paddle
scoreLeft = scoreLeft + 1 'add 1 to computer's score
lastPoint = 1 'computer won last point
lblLeftScore.Text = scoreLeft 'display new computer score
End If
lblBall.Visible = False 'hide ball
If scoreLeft = winScore Then 'computer has won game
reset () 'call reset game variables and game display
MsgBox ("Sorry, better luck next time!") 'display consolatory message
resetScores () 'reset scores and score display
ElseIf scoreRight = winScore Then 'player has won game
reset () 'call reset game variables and game display
MsgBox ("Congratulations!") 'display congratulatory message
resetScores () 'reset scores and score display
Else
tmrBreak.Start () 'game still in progress, start tmrBreak
End If
End Sub
Sub reset ()
'reset game variables, timers and display
tmrBall.Stop ()
tmrBreak.Stop ()
tmrPaddle.Stop ()
lblBall.Visible = False
lblPaddleLeft.Top = intPadLTop
lblPaddleRight.Top = intPadRTop
cmdPlay.Enabled = True
End Sub
Sub resetScores ()
'reset scores and score display
scoreLeft = 0
scoreRight = 0
lblLeftScore.Text = "0"
lblRightScore.Text = "0"
End Sub
Private Sub frmPong_MouseDown (ByVal sender As Object, ByVal e As _
System.Windows.Forms.MouseEventArgs) _
Handles Me.MouseDown, picPongTable.MouseDown
'executes if mouseDown event occurs
If e.Button = MouseButtons.Right Then 'right mouse button is down
dnFlag = True 'set dnFlag
ElseIf e.Button = MouseButtons.Left Then 'left mouse button is down
upFlag = True 'set upFlag
End If
End Sub
Private Sub frmPong_MouseUp (ByVal sender As Object, ByVal e As _
System.Windows.Forms.MouseEventArgs) _
Handles Me.MouseUp, picPongTable.MouseUp
'executes if mouseUp event occurs
If e.Button = MouseButtons.Right Then 'right mouse button has been
released
dnFlag = False 'unset dnFlag

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

9 of 10

28/02/2016 13:18

TechnologyUK - Programming with VB.NET - Graphics - The Pong Game http://www.technologyuk.net/computing/vbnet/graphics_the_pong_game....

ElseIf e.Button = MouseButtons.Left Then 'left mouse button has been

released
upFlag = False 'unset upFlag
End If
End Sub
End Class

10 ofPrint
10 to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

28/02/2016 13:18