Small Basic for Little Kids Series – Pong

It was a beautiful sunny weekend, and wife's mandate of father-son bonding was to be obeyed...  So, after a bike ride, it's time for some coding.  Small Basic, that is.

My little boy has been bugging me about game programming.  After some convincing, he settled on Pong, not entirely sure what Pong is.

Having in mind to post the process to the blog, we saved multiple versions of the code, so to show the progress.  I think he is still too young to understand version control :)

Version 1:

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make goals, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

'make ball
GraphicsWindow.FillEllipse(345,245,10,10)

'make paddles
GraphicsWindow.FillRectangle(30,220,10,60)
GraphicsWindow.FillRectangle(664,220,10,60)

He did most of the work himself for V1.

It's pretty straightforward.  The only question I had for him was why 700x500 for the graphic window.  Personally, I'd go with 800x600, or1024x768.  You know the whole VGA/SVGA thing :)

His reply was that he always use 700x500 for the graphics window.

One thing worth noting is that BrushColor and PenColor are for difference purposes.  The former for filling an object, the latter for drawing an object.

Version 2:

In V2, we added the wall for bouncing from left to right (X coordinates).  I gave him the idea that the illusion of a ball moving is achieved by repeatedly drawing and erasing a ball in a new position.

The speed of the ball movement can be adjusted by two factors:

Timer.interval and step size in moving in X direction.

The part of making the ball bounced off the wall seemed like a magic.  In reality it is nothing but flipping the corresponding step size (StepX) to the negative.

In fact, I made him to pretend to be a ball, and count out loud the steps, walk towards the wall, and "bouncing" off the wall.  After a couple times, he got it :)

' v2
' bounces well, left to right

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make left goal, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)

' make right goal, size 100, from (674,200) to (674,300)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

' make paddles
GraphicsWindow.FillRectangle(30,220,10,60)
GraphicsWindow.FillRectangle(664,220,10,60)

' draw ball
Sub DrawBall
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
EndSub

' erase ball
Sub EraseBall
  GraphicsWindow.PenWidth = "2"
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
  GraphicsWindow.PenColor = "white"
  GraphicsWindow.DrawEllipse(BallX,BallY,10,10)
EndSub

' sleep
Timer.Interval = 1
Timer.Tick = RunGame

StepSize = 2

StepX = StepSize
StepY = 0

BallX=345
' BallY=245
BallY=100

LeftWallX = 27
RightWallX = 660

DrawBall()

Sub RunGame
  EraseBall()
  BallX = BallX + StepX
  BallY = BallY + StepY
 
  ' Hit right wall
  If BallX >= RightWallX Then
    StepX = -StepSize
  EndIf
 
  ' Hit left wall
  If BallX <= LeftWallX Then
    StepX = StepSize
  EndIf
 
  DrawBall() 
EndSub

Version 3:

 In V3, we handled bouncing the wall up and down.  This mirrors what's done in V2, except using StepX as opposed to StepY.  When put together, the ball can now bounces off all 4 walls (disregarding the goals and paddles).  It almost seemed magical.

' v3
' bounces well, left to right, and up and down.

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make left goal, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)

' make right goal, size 100, from (674,200) to (674,300)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

' make paddles
GraphicsWindow.FillRectangle(30,220,10,60)
GraphicsWindow.FillRectangle(664,220,10,60)

' draw ball
Sub DrawBall
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
EndSub

' erase ball
Sub EraseBall
  GraphicsWindow.PenWidth = "2"
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
  GraphicsWindow.PenColor = "white"
  GraphicsWindow.DrawEllipse(BallX,BallY,10,10)
EndSub

' sleep
Timer.Interval = 1
Timer.Tick = RunGame

StepSizeX = 2
StepSizeY = 2

StepX = StepSizeX
StepY = StepSizeY

BallX=345
' BallY=245
BallY=100

' Edges of the 4 walls
LeftWallX = 27
RightWallX = 660
TopWallY = 27
BottomWallY = 460

DrawBall()

Sub RunGame
  EraseBall()
 
  ' Calculate the new position for ball
  BallX = BallX + StepX
  BallY = BallY + StepY
 
  ' Hit right wall
  If BallX >= RightWallX Then
    StepX = -StepSizeX
  EndIf
 
  ' Hit left wall
  If BallX <= LeftWallX Then
    StepX = StepSizeX
  EndIf

  ' Hit bottom wall
  If BallY >= BottomWallY Then
    StepY = -StepSizeY
  EndIf
 
  ' Hit top wall
  If BallY <= TopWallY Then
    StepY = StepSizeY
  EndIf

  DrawBall() 
EndSub

Version 4:

In V4, we took care of bouncing the ball of paddles.

' v3 - bounces well, left to right, and up and down.
' v4 - bounces off paddles

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make left goal, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)

' make right goal, size 100, from (674,200) to (674,300)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

' make paddles
'GraphicsWindow.FillRectangle(30,220,10,60)
'GraphicsWindow.FillRectangle(664,220,10,60)

LeftPaddleX = 30
LeftPaddleY = 220

RightPaddleX = 664
RightPaddleY = 220

' draw left paddle
Sub DrawLeftPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' erase left paddle
Sub EraseLeftPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' draw right paddle
Sub DrawRightPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' erase right paddle
Sub EraseRightPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' draw ball
Sub DrawBall
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
EndSub

' erase ball
Sub EraseBall
  GraphicsWindow.PenWidth = "2"
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
  GraphicsWindow.PenColor = "white"
  GraphicsWindow.DrawEllipse(BallX,BallY,10,10)
EndSub

'' hooking up events
Timer.Interval = 1
Timer.Tick = RunGame

StepSizeX = 2
StepSizeY = 2

StepX = StepSizeX
StepY = StepSizeY

BallX=345
' BallY=245
BallY=245

' Edges of the 4 walls
LeftWallX = 27
RightWallX = 660
TopWallY = 27
BottomWallY = 460

DrawBall()
DrawLeftPaddle()
DrawRightPaddle()

Sub RunGame
  EraseBall()
 
  ' Calculate the new position for ball
  BallX = BallX + StepX
  BallY = BallY + StepY
 
  ' Hit right wall
  If BallX >= RightWallX Then
    StepX = -StepSizeX
  EndIf
 
  ' Hit left wall
  If BallX <= LeftWallX Then
    StepX = StepSizeX
  EndIf

  ' Hit bottom wall
  If BallY >= BottomWallY Then
    StepY = -StepSizeY
  EndIf
 
  ' Hit top wall
  If BallY <= TopWallY Then
    StepY = StepSizeY
  EndIf
 
  ' Hit right paddle
  If (BallX >= RightPaddleX-12) And (BallY >= RightPaddleY) And (BallY <= RightPaddleY+60) Then
    StepX = -StepSizeX
    DrawRightPaddle()
  EndIf

  ' Hit left paddle
  If (BallX <= LeftPaddleX+12) And (BallY >= LeftPaddleY) And (BallY <= LeftPaddleY+60) Then
    StepX = StepSizeX
    DrawLeftPaddle()
  EndIf
 
  DrawBall() 
EndSub

Version 5:

In V5, we made the paddles movable.

The trick here is to add the events to handle key.  First we used KeyDown event.

For reasons I don't understand, the little fellow insisted that the left player should use "W" for up and "S" for down, while the right user uses Up Arrow for up, and Down Arrow for down.

During testing, I had this line added to event handler:

  GraphicsWindow.Title = "'" + LastKey + "' pressed"

That way, it's easier to tell which key was pressed (or released rather), and what's the corresponding value should be used in the code.

' v3 - bounces well, left to right, and up and down.
' v4 - bounces off paddles
' v5 - paddles can move

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make left goal, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)

' make right goal, size 100, from (674,200) to (674,300)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

' make paddles
'GraphicsWindow.FillRectangle(30,220,10,60)
'GraphicsWindow.FillRectangle(664,220,10,60)

LeftPaddleX = 30
LeftPaddleY = 220

RightPaddleX = 664
RightPaddleY = 220

' draw left paddle
Sub DrawLeftPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' erase left paddle
Sub EraseLeftPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' draw right paddle
Sub DrawRightPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' erase right paddle
Sub EraseRightPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' draw ball
Sub DrawBall
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
EndSub

' erase ball
Sub EraseBall
  GraphicsWindow.PenWidth = "2"
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
  GraphicsWindow.PenColor = "white"
  GraphicsWindow.DrawEllipse(BallX,BallY,10,10)
EndSub

'' hooking up events
Timer.Interval = 1
Timer.Tick = RunGame

GraphicsWindow.KeyDown = OnKeyDown

' handle key press, move paddles
Sub OnKeyDown
  LastKey = GraphicsWindow.LastKey
  GraphicsWindow.Title = "'" + LastKey + "' pressed"
  If (LastKey = "W") And (LeftPaddleY >= 31) Then
    EraseLeftPaddle()
    LeftPaddleY = LeftPaddleY - 10
    DrawLeftPaddle()
  ElseIf (LastKey = "S") And (LeftPaddleY <= 400) Then
    EraseLeftPaddle()
    LeftPaddleY = LeftPaddleY + 10
    DrawLeftPaddle()
    EndIf
  If (LastKey = "I") And (RightPaddleY >= 31) Then
    EraseRightPaddle()
    RightPaddleY = RightPaddleY - 10
    DrawRightPaddle()
  ElseIf (LastKey = "K") And (RightPaddleY <= 400) Then
    EraseRightPaddle()
    RightPaddleY = RightPaddleY + 10
    DrawRightPaddle()
  EndIf
 
EndSub

StepSizeX = 2
StepSizeY = 2

StepX = StepSizeX
StepY = StepSizeY

BallX=345
' BallY=245
BallY=245

' Edges of the 4 walls
LeftWallX = 27
RightWallX = 660
TopWallY = 27
BottomWallY = 460

DrawBall()
DrawLeftPaddle()
DrawRightPaddle()

Sub RunGame
  EraseBall()
 
  ' Calculate the new position for ball
  BallX = BallX + StepX
  BallY = BallY + StepY
 
  ' Hit right wall
  If BallX >= RightWallX Then
    StepX = -StepSizeX
  EndIf
 
  ' Hit left wall
  If BallX <= LeftWallX Then
    StepX = StepSizeX
  EndIf

  ' Hit bottom wall
  If BallY >= BottomWallY Then
    StepY = -StepSizeY
  EndIf
 
  ' Hit top wall
  If BallY <= TopWallY Then
    StepY = StepSizeY
  EndIf
 
  ' Hit right paddle
  If (BallX >= RightPaddleX-12) And (BallY >= RightPaddleY) And (BallY <= RightPaddleY+60) Then
    StepX = -StepSizeX
    DrawRightPaddle()
  EndIf

  ' Hit left paddle
  If (BallX <= LeftPaddleX+12) And (BallY >= LeftPaddleY) And (BallY <= LeftPaddleY+60) Then
    StepX = StepSizeX
    DrawLeftPaddle()
  EndIf
 
  DrawBall() 
EndSub

Version 6:

In V6, we solved the two-player problem.

We found it to be problematic, when both players try to hold the key down at the same time.  The program can only respond to one.

I had the idea of instead to handle KeyUp event.  That way it will force players to hit the keys instead of holding the keys down and don't let it go.

' v3 - bounces well, left to right, and up and down.
' v4 - bounces off paddles
'v5 - paddles can move
'v6 - change from KeyDown to KeyUp for two-player mode

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make left goal, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)

' make right goal, size 100, from (674,200) to (674,300)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

' make paddles
'GraphicsWindow.FillRectangle(30,220,10,60)
'GraphicsWindow.FillRectangle(664,220,10,60)

LeftPaddleX = 30
LeftPaddleY = 220

RightPaddleX = 664
RightPaddleY = 220

' draw left paddle
Sub DrawLeftPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' erase left paddle
Sub EraseLeftPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' draw right paddle
Sub DrawRightPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' erase right paddle
Sub EraseRightPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' draw ball
Sub DrawBall
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
EndSub

' erase ball
Sub EraseBall
  GraphicsWindow.PenWidth = "2"
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
  GraphicsWindow.PenColor = "white"
  GraphicsWindow.DrawEllipse(BallX,BallY,10,10)
EndSub

'' hooking up events
Timer.Interval = 1
Timer.Tick = RunGame

GraphicsWindow.KeyUp = OnKeyUp

' handle key press, move paddles
Sub OnKeyUp
  LastKey = GraphicsWindow.LastKey
  GraphicsWindow.Title = "'" + LastKey + "' pressed"
  If (LastKey = "W") And (LeftPaddleY >= 31) Then
    EraseLeftPaddle()
    LeftPaddleY = LeftPaddleY - 10
    DrawLeftPaddle()
  ElseIf (LastKey = "S") And (LeftPaddleY <= 400) Then
    EraseLeftPaddle()
    LeftPaddleY = LeftPaddleY + 10
    DrawLeftPaddle()
    EndIf
  If (LastKey = "Up") And (RightPaddleY >= 31) Then
    EraseRightPaddle()
    RightPaddleY = RightPaddleY - 10
    DrawRightPaddle()
  ElseIf (LastKey = "Down") And (RightPaddleY <= 400) Then
    EraseRightPaddle()
    RightPaddleY = RightPaddleY + 10
    DrawRightPaddle()
  EndIf
 
EndSub

StepSizeX = 2
StepSizeY = 2

StepX = StepSizeX
StepY = StepSizeY

BallX=345
' BallY=245
BallY=245

' Edges of the 4 walls
LeftWallX = 27
RightWallX = 660
TopWallY = 27
BottomWallY = 460

DrawBall()
DrawLeftPaddle()
DrawRightPaddle()

Sub RunGame
  EraseBall()
 
  ' Calculate the new position for ball
  BallX = BallX + StepX
  BallY = BallY + StepY
 
  ' Hit right wall
  If BallX >= RightWallX Then
    StepX = -StepSizeX
  EndIf
 
  ' Hit left wall
  If BallX <= LeftWallX Then
    StepX = StepSizeX
  EndIf

  ' Hit bottom wall
  If BallY >= BottomWallY Then
    StepY = -StepSizeY
  EndIf
 
  ' Hit top wall
  If BallY <= TopWallY Then
    StepY = StepSizeY
  EndIf
 
  ' Hit right paddle
  If (BallX >= RightPaddleX-12) And (BallY >= RightPaddleY) And (BallY <= RightPaddleY+60) Then
    StepX = -StepSizeX
    DrawRightPaddle()
  EndIf

  ' Hit left paddle
  If (BallX <= LeftPaddleX+12) And (BallY >= LeftPaddleY) And (BallY <= LeftPaddleY+60) Then
    StepX = StepSizeX
    DrawLeftPaddle()
  EndIf
 
  DrawBall() 
EndSub

Version 7:

Finally, in V7, we added additional code to count scores and see who is the winner.

' v3 - bounces well, left to right, and up and down.
' v4 - bounces off paddles
' v5 - paddles can move
' v6 - change from KeyDown to KeyUp for two-player mode
' v7 - count scores

' make background
GraphicsWindow.Width = "700"
GraphicsWindow.Height = "500"

'set pen
GraphicsWindow.PenColor = "gray"
GraphicsWindow.PenWidth = "50"

'draw border
GraphicsWindow.DrawRectangle(0,0,700,500)

' set brush
GraphicsWindow.BrushColor = "white"

' make left goal, size 100, from (0,200) to (0,300)
GraphicsWindow.FillRectangle(0,200,26,100)

' make right goal, size 100, from (674,200) to (674,300)
GraphicsWindow.FillRectangle(674,200,26,100)

' set brush
GraphicsWindow.BrushColor = "black"

' make paddles
'GraphicsWindow.FillRectangle(30,220,10,60)
'GraphicsWindow.FillRectangle(664,220,10,60)

LeftPaddleX = 30
LeftPaddleY = 220

RightPaddleX = 664
RightPaddleY = 220

' draw left paddle
Sub DrawLeftPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' erase left paddle
Sub EraseLeftPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(LeftPaddleX,LeftPaddleY,10,60)
EndSub

' draw right paddle
Sub DrawRightPaddle
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' erase right paddle
Sub EraseRightPaddle
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(RightPaddleX,RightPaddleY,10,60)
EndSub

' draw ball
Sub DrawBall
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
EndSub

' erase ball
Sub EraseBall
  GraphicsWindow.PenWidth = "2"
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillEllipse(BallX,BallY,10,10)
  GraphicsWindow.PenColor = "white"
  GraphicsWindow.DrawEllipse(BallX,BallY,10,10)
EndSub

'' hooking up events
Timer.Interval = 1
Timer.Tick = RunGame

GraphicsWindow.KeyUp = OnKeyUp

' handle key press, move paddles
Sub OnKeyUp
  LastKey = GraphicsWindow.LastKey
  ' GraphicsWindow.Title = "'" + LastKey + "' pressed"
  If (LastKey = "W") And (LeftPaddleY >= 31) Then
    EraseLeftPaddle()
    LeftPaddleY = LeftPaddleY - 10
    DrawLeftPaddle()
  ElseIf (LastKey = "S") And (LeftPaddleY <= 400) Then
    EraseLeftPaddle()
    LeftPaddleY = LeftPaddleY + 10
    DrawLeftPaddle()
    EndIf
  If (LastKey = "Up") And (RightPaddleY >= 31) Then
    EraseRightPaddle()
    RightPaddleY = RightPaddleY - 10
    DrawRightPaddle()
  ElseIf (LastKey = "Down") And (RightPaddleY <= 400) Then
    EraseRightPaddle()
    RightPaddleY = RightPaddleY + 10
    DrawRightPaddle()
  EndIf
 
EndSub

StepSizeX = 2
StepSizeY = 2

StepX = StepSizeX
StepY = StepSizeY

' initial ball position
Sub SetBallToMiddle
  BallX=345
  BallY=245
EndSub

' Edges of the 4 walls
LeftWallX = 27
RightWallX = 660
TopWallY = 27
BottomWallY = 460

SetBallToMiddle()
DrawBall()
DrawLeftPaddle()
DrawRightPaddle()

GraphicsWindow.Title = "Pong"

' begin scores
leftscore = Controls.AddTextBox(5,1)
rightscore = Controls.AddTextBox(531,1)
mesgboard = Controls.AddTextBox(265,1)

leftscorecount = 0
rightscorecount = 0

Controls.SetTextBoxText(leftscore, leftscorecount)
Controls.SetTextBoxText(rightscore, rightscorecount)

Sub RunGame
  EraseBall()
 
  ' Calculate the new position for ball
  BallX = BallX + StepX
  BallY = BallY + StepY
 
  ' Hit right wall
  If BallX >= RightWallX Then
    StepX = -StepSizeX
  EndIf
 
  ' Hit left wall
  If BallX <= LeftWallX Then
    StepX = StepSizeX
  EndIf

  ' Hit bottom wall
  If BallY >= BottomWallY Then
    StepY = -StepSizeY
  EndIf
 
  ' Hit top wall
  If BallY <= TopWallY Then
    StepY = StepSizeY
  EndIf
 
  ' Hit right paddle
  If (BallX >= RightPaddleX-12) And (BallY >= RightPaddleY) And (BallY <= RightPaddleY+60) Then
    StepX = -StepSizeX
    DrawRightPaddle()
  EndIf

  ' Hit left paddle
  If (BallX <= LeftPaddleX+12) And (BallY >= LeftPaddleY) And (BallY <= LeftPaddleY+60) Then
    StepX = StepSizeX
    DrawLeftPaddle()
  EndIf
 
  ' Hit right goal
  If (BallX >= RightWallX) And (BallY > 200) And (BallY < 300) Then
    SetBallToMiddle()
    DrawBall()
    GraphicsWindow.Title = "Left player scored"
    leftscorecount = leftscorecount + 1
    Controls.SetTextBoxText(leftscore, leftscorecount)
  EndIf
 
  ' Hit left goal
  If (BallX <= LeftWallX) And (BallY > 200) And (BallY < 300) Then
    SetBallToMiddle()
    DrawBall()
    GraphicsWindow.Title = "Right player scored"
    rightscorecount = rightscorecount + 1
    Controls.SetTextBoxText(rightscore, rightscorecount)

  EndIf

  DrawBall() 

  ' check who won
  If leftscorecount >= 3 Then
    Controls.SetTextBoxText(mesgboard, "Left side WON!!!")
    TheEnd()
  EndIf

  If rightscorecount >= 3 Then
    Controls.SetTextBoxText(mesgboard, "Right side WON!!!")
    TheEnd()
  EndIf
   
EndSub

' End the game
Sub TheEnd
  SetBallToMiddle()
  StepSizeX = 0
  StepSizeY = 0
EndSub

We did all this in about 2 hours, on and off.  You know kids attention span is short :)

But the way we did it so that at each iteration something is accomplished was very helpful.  I guess you could call that Agile development, another concept I will withhold from him for now :)

We hit a bit of unnecessary complications that I should have thought of to avoid.  That is, the width of all objects, including the border, the paddles, and balls.

So, a couple times we will have to erase more than what's drawn.  Also, the rendering of animation is not as smooth as we would like.  The little one is actually not too surprised.  He calls them glitches.  Guess got used to from video games.

Overall, it was a good experience for a lazy Sunday afternoon.  Priceless :)