1. Microsoft® Small Basic
Playing with Shapes
Estimated time to complete this lesson: 1 hour

2. Playing with Shapes In this lesson, you will learn how to:
Create games with the help of shapes.
Create game elements by using various properties and operations of the Shapes.

3. Fun with Shapes
So far, you’ve learned about drawing various shapes with the help of the Shapes object in the graphics window. Now it’s time to have some fun with shapes…
Do you know you can play with shapes and create games? As you know, you can use various operations of the Shapes object to draw, color, rotate, and animate shapes in the graphics window. Now you will learn how you can use different shapes to make games.
Let’s start with a very simple game that you can create by using the Shapes object in Small Basic.

4. Balancing the Ball – The Game
In this simple game, you balance the ball on a seesaw in the graphics window.
The game tests a person’s responsiveness. The timer displays how much time the
user keeps the ball balanced
on the seesaw.
Notice how you can create different shapes with the Shapes object to add colorful elements to the game.

5. Balancing the Ball – How to Play
So how do you play this game?
Steps to play the game:
First, you drop the ball on the seesaw by pressing ENTER on the keyboard.
After you drop the ball, you press the LEFT ARROW key and the RIGHT ARROW key on the keyboard to balance the ball on the seesaw without dropping the ball.

6. Balancing the Ball – The Code
Now let’s understand the code for the game in detail…
You create a user interface for the game by using the GraphicsWindow object. You add a shape and move it by using different operations and properties of the Shapes. You add event handlers and use different conditions for different actions.
Code:
' Copyright (c) Microsoft Corporation. All rights reserved.
gw = 450
gh = 400
tx = 225
ty = 320
score = 0
angle = 0
ballDirection = -1
ballSpeed = 0.3
acceleration = 1.001
power = 1.2
gameStarted = "False"
ballX = 210
ballY = 280
GraphicsWindow.KeyDown = OnKeyDown
CreateUI()
gameOver = "False"
While gameStarted = "False"
Program.Delay(300)
EndWhile
gameStartTime = Clock.ElapsedMilliseconds
Shapes.Remove(directions)
While gameOver = "False"
Shapes.Rotate(paddle, angle)
power = 1 + Math.Abs(angle) / 200
CalculateBallMetrics()
Shapes.Move(ball, ballX, ballY)
WriteTime()
Program.Delay(20)
If ballX < 105 Or ballX > 315 Then
gameOver = "True"
EndIf
GraphicsWindow.ShowMessage("You survived for " + timeDisplayText + ".", "Game Over")
Sub CreateUI
GraphicsWindow.CanResize = "False"
GraphicsWindow.Width = gw
GraphicsWindow.Height = gh
GraphicsWindow.Top = (Desktop.Height - gh) / 2
GraphicsWindow.Left = (Desktop.Width - gw) / 2
GraphicsWindow.DrawRectangle(10, 10, 430, 380)
GraphicsWindow.BrushColor = "Violet"
tri = Shapes.AddTriangle(tx, ty, tx - 50, ty + 50, tx + 50, ty + 50)
GraphicsWindow.BrushColor = "Purple"
paddle = Shapes.AddRectangle(210, 10)
Shapes.Move(paddle, 120, 310)
GraphicsWindow.BrushColor = "Red"
ball = Shapes.AddEllipse(30, 30)
GraphicsWindow.FontSize = 16
GraphicsWindow.FontName = "Verdana"
directions = Shapes.AddText("Press ENTER to start the game!")
Shapes.Move(directions, 80, 150)
GraphicsWindow.BrushColor = "Blue"
timeText = Shapes.AddText("Time: 00:00")
Shapes.Move(timeText, 310, 16)
EndSub
Sub OnKeyDown
If gameStarted = "True" Then
If GraphicsWindow.LastKey = "Left" Then
angle = Math.Max(-40, angle - 1)
ElseIf GraphicsWindow.LastKey = "Right" Then
angle = Math.Min(40, angle + 1)
Else
If GraphicsWindow.LastKey = "Return" Then
gameStarted = "True"
Sub CalculateBallMetrics
If ballDirection = angle / Math.Abs(angle) Then
ballSpeed = Math.Min(2, ballSpeed * power)
ballSpeed = Math.Max(0.1, ballSpeed / power)
If ballSpeed < 0.2 Then
ballDirection = -1 * ballDirection
ballSpeed = 0.2
ballX = ballX + ballDirection * ballSpeed
deltaX = ballX - 210
deltaY = deltaX * Math.Sin(Math.GetRadians(angle))
ballY = deltaY
Sub WriteTime
elapsedTime = Clock.ElapsedMilliseconds - gameStartTime
totalSeconds = Math.Round(elapsedTime / 1000)
seconds = Math.Remainder(totalSeconds, 60)
minutes = Math.Round(totalSeconds / 60)
If (seconds < 10) Then
seconds = Text.Append("0", seconds)
If (minutes < 10) Then
minutes = Text.Append("0", minutes)
timeDisplayText = minutes + ":" + seconds
Shapes.SetText(timeText, "Time: " + timeDisplayText)

7. Hit the Right Shape – The Game
Now let’s move on to a more complex game. In this game, you score points by using the mouse to select the correct shape from the shapes that appear in the graphics window.
The objective of the game is to score points by clicking the correct shape.
Again, notice how we are using different types of colorful shapes by using the Shapes object.

8. Hit the Right Shape – How to Play
So how do you play this game?
Steps to play the game:
Various shapes move across the screen.
A shape name appears briefly, and the user must click the shape that matches the shape name.
The user scores points for clicking the correct shape.

9. Hit the Right Shape – The Code
Now let’s understand the code for the game in detail…
You create a user interface for the game by using the GraphicsWindow object. You add the text box and set the text in the text box by using different operations of the Controls object. You add and move different types of shapes by using the Shapes object, and you add a timer by using the Clock. In addition, you set different conditions to carry out different actions.
Code:
' Copyright (c) Microsoft Corporation. All rights reserved.
GraphicsWindow.Hide()
gw = 620
gh = 400
GraphicsWindow.CanResize = "False"
GraphicsWindow.Width = gw
GraphicsWindow.Height = gh
GraphicsWindow.Top = ( Desktop.Height - gh ) / 2
GraphicsWindow.Left = ( Desktop.Width - gw ) / 2
GraphicsWindow.Title = "Hit the Right Shape"
GraphicsWindow.Show()
sec = 50
Score = 0
ScoreboxX = 420
delayspeed = 15
GraphicsWindow.MouseDown = MouseClick
shapeNames[0] = ""
shapeNames[1] = "Square"
shapeNames[2] = "Rectangle"
shapeNames[3] = "Ellipse"
shapeNames[4] = "Circle"
textBox = Controls.AddTextBox(200, 0)
Controls.SetTextBoxText(textBox, "Square")
ShowScore()
GraphicsWindow.BrushColor = "Pink"
GraphicsWindow.DrawRectangle(-2, 25, GraphicsWindow.Width + 2, GraphicsWindow.Height - 50)
GraphicsWindow.FillRectangle(-2, 25, GraphicsWindow.Width + 2, GraphicsWindow.Height - 50)
GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
elli = Shapes.AddEllipse(60, 40)
Shapes.Move(elli, -90, 50)
rect = Shapes.AddRectangle(60, 40)
Shapes.Move(rect, -20, 50)
circle = Shapes.AddEllipse(80, 80)
Shapes.Move(circle, 20, 50)
square1 = Shapes.AddRectangle(40, 40)
Shapes.Move(square1, 230, 50)
rect1 = Shapes.AddRectangle(40, 80)
Shapes.Move(rect1, 300, 250)
elli1 = Shapes.AddEllipse(35, 60)
Shapes.Move(elli1, 100, 250)
square2 = Shapes.AddRectangle(20, 20)
Shapes.Move(square2, 250, 250)
circle1 = Shapes.AddEllipse(80, 80)
Shapes.Move(circle1, 450, 210)
i = 1
prevSec = 0
currSec = Clock.ElapsedMilliseconds
eSec = currSec
While 1 = 1
Shapes.Move(elli, Shapes.GetLeft(elli) + 4, 50)
If Shapes.GetLeft(elli) > 650 Then
shapes.ShowShape(square1)
Shapes.Move(elli, -90, 300)
EndIf
Shapes.Move(rect, Shapes.GetLeft(rect) + 5, 50)
If Shapes.GetLeft(rect) > 600 Then
shapes.ShowShape(rect)
Shapes.Move(circle, Shapes.GetLeft(circle) + 4, 50)
If Shapes.GetLeft(circle) > 600 Then
shapes.ShowShape(circle)
Shapes.Move(circle, -110, 100)
Shapes.Move(square1, Shapes.GetLeft(square1) + 3, 50)
If Shapes.GetLeft(square1) > 600 Then
Shapes.Move(square1, -200, 100)
Shapes.Move(rect1, Shapes.GetLeft(rect1) + 6, 250)
If Shapes.GetLeft(rect1) > 600 Then
shapes.ShowShape(rect1)
Shapes.Move(rect1, -100, 180)
Shapes.Move(elli1, Shapes.GetLeft(elli1) + 2, 250)
If Shapes.GetLeft(elli1) > 600 Then
shapes.ShowShape(elli1)
Shapes.Move(elli1, -60, 70)
Shapes.Move(square2, Shapes.GetLeft(square2)+3, 250)
If Shapes.GetLeft(square2) > 600 Then
shapes.ShowShape(square2)
Shapes.Move(square2, -250, 300)
Shapes.Move(circle1, Shapes.GetLeft(circle1) + 5, 210)
If Shapes.GetLeft(circle1) > 600 Then
Shapes.ShowShape(circle1)
Shapes.Move(circle1, -50, 210)
sec = sec
GraphicsWindow.BrushColor = "Blue"
GraphicsWindow.FillRectangle(ScoreboxX+60, 0, 100, 25)
GraphicsWindow.BrushColor = "White"
GraphicsWindow.DrawText(ScoreboxX + 62, 5, "Time:")
If sec >= 10 Then
GraphicsWindow.DrawText(ScoreboxX + 110, 5,"00:" + Math.Floor(sec))
ElseIf sec > 0 Then
GraphicsWindow.DrawText(ScoreboxX + 110, 5,"00:0" + Math.Floor(sec))
If sec <= 0 Then
Goto out
Program.Delay(delayspeed)
currentSec = Clock.ElapsedMilliseconds
If (currentSec - prevSec) >= 5000 Then
i = Math.GetRandomNumber(4)
If i <> 0 Then
Controls.SetTextBoxText(textBox, shapeNames[i])
prevSec = currentSec
EndWhile
out:
GraphicsWindow.ShowMessage("Your score is: " + Score, "Game Over")
Program.End()
Sub MouseClick
leftPos_square1 = Shapes.GetLeft(square1)
topPos_square1 = Shapes.GetTop(square1)
leftPos_square2 = Shapes.GetLeft(square2)
topPos_square2 = Shapes.GetTop(square2)
leftPos_rect = Shapes.GetLeft(rect)
topPos_rect = Shapes.GetTop(rect)
leftPos_rect1 = Shapes.GetLeft(rect1)
topPos_rect1 = Shapes.GetTop(rect1)
leftPos_elli = Shapes.GetLeft(elli)
topPos_elli = Shapes.GetTop(elli)
leftPos_elli1 = Shapes.GetLeft(elli1)
topPos_elli1 = Shapes.GetTop(elli1)
leftPos_circle = Shapes.GetLeft(circle)
topPos_circle = Shapes.GetTop(circle)
leftPos_circle1 = Shapes.GetLeft(circle1)
topPos_circle1 = Shapes.GetTop(circle1)
If Controls.GetTextBoxText(textBox) = "Square" Then
If (GraphicsWindow.MouseX >= leftPos_square1) And (GraphicsWindow.MouseX <= leftPos_square1 + 40) Then
If (GraphicsWindow.MouseY >= topPos_square1) And (GraphicsWindow.MouseY <= topPos_square1 + 40) Then
Shapes.HideShape(square1)
Score = Score + 1
If (GraphicsWindow.MouseX >= leftPos_square2) And (GraphicsWindow.MouseX <= leftPos_square2 + 20) Then
If (GraphicsWindow.MouseY >= topPos_square2) And (GraphicsWindow.MouseY <= topPos_square2 + 20) Then
Shapes.HideShape(square2)
If Controls.GetTextBoxText(textBox) = "Rectangle" Then
If (GraphicsWindow.MouseX >= leftPos_rect) And (GraphicsWindow.MouseX <= leftPos_rect + 40) Then
If (GraphicsWindow.MouseY >= topPos_rect) And (GraphicsWindow.MouseY <= topPos_rect + 40) Then
Shapes.HideShape(rect)
If (GraphicsWindow.MouseX >= leftPos_rect1) And (GraphicsWindow.MouseX <= leftPos_rect1 + 40) Then
If (GraphicsWindow.MouseY >= topPos_rect1) And (GraphicsWindow.MouseY <= topPos_rect1 + 80) Then
Shapes.HideShape(rect1)
If Controls.GetTextBoxText(textBox) = "Ellipse" Then
If (GraphicsWindow.MouseX >= leftPos_elli) And (GraphicsWindow.MouseX <= leftPos_elli + 60) Then
If (GraphicsWindow.MouseY >= topPos_elli) And (GraphicsWindow.MouseY <= topPos_elli + 40) Then
Shapes.HideShape(elli)
If (GraphicsWindow.MouseX >= leftPos_elli1) And (GraphicsWindow.MouseX <= leftPos_elli1 + 60) Then
If (GraphicsWindow.MouseY >= topPos_elli1) And (GraphicsWindow.MouseY <= topPos_elli1 + 40) Then
Shapes.HideShape(elli1)
If Controls.GetTextBoxText(textBox) = "Circle" Then
If (GraphicsWindow.MouseX >= leftPos_circle) And (GraphicsWindow.MouseX <= leftPos_circle + 80) Then
If (GraphicsWindow.MouseY >= topPos_circle) And (GraphicsWindow.MouseY <= topPos_circle + 80) Then
Shapes.HideShape(circle)
If (GraphicsWindow.MouseX >= leftPos_circle1) And (GraphicsWindow.MouseX <= leftPos_circle1 + 40) Then
If (GraphicsWindow.MouseY >= topPos_circle1) And (GraphicsWindow.MouseY <= topPos_circle1 + 40) Then
Shapes.HideShape(circle1)
EndSub
Sub ShowScore
GraphicsWindow.FontName = "Verdana"
GraphicsWindow.FontSize = 14
GraphicsWindow.FillRectangle(0, 0, 100, 20)
GraphicsWindow.BrushColor = "Black"
GraphicsWindow.DrawText(10, 5, "Score: " + Score)

10. Let’s Summarize… Congratulations! Now you know how to:
Create games by using shapes.
Create game elements by using various properties and operations of the Shapes object.

11. Show What You Know
Write a program to display a graphics window, and then perform the following steps:
Create a slightly opaque flower in the graphics window by using various shapes.
Create a separate panel that contains separate, corresponding shapes that you have used to create the flower.
Drag each shape from the panel to recreate the flower.
Solution:
' Copyright (c) Microsoft Corporation. All rights reserved.
GraphicsWindow.Hide()
gw = 620
gh = 450
endtime = Clock.ElapsedMilliseconds
starttime = Clock.ElapsedMilliseconds
blinktime = Clock.ElapsedMilliseconds
gamestarttime = Clock.ElapsedMilliseconds
GraphicsWindow.CanResize = "False"
GraphicsWindow.Width = gw
GraphicsWindow.Height = gh
GraphicsWindow.Top = ( Desktop.Height - gh ) / 2
GraphicsWindow.Left = ( Desktop.Width - gw ) / 2
GraphicsWindow.Title = "Flower"
GraphicsWindow.BrushColor ="Pink"
GraphicsWindow.Show()
CreateUI()
GraphicsWindow.MouseDown = MouseAction
Controls.ButtonClicked = OnclickButton
starttimer()
Sub MouseAction
x = GraphicsWindow.MouseX
y = GraphicsWindow.MouseY
GraphicsWindow.MouseMove = MouseMove
If x > px And x < px And y > py And y < py Then
GraphicsWindow.MouseUp = onMouseUpEvent
If x < px + 90 and y < py Then
sh = leaf1
bsh = leafs[1]
GetShapeXY()
ElseIf x < px And y < py Then
sh = petal1
bsh = petals[1]
ElseIf x < px + 90 and y < py Then
sh = stik
bsh = stick
ElseIf x < px And y < py Then
sh = circle
bsh = circ
ElseIf x < px + 90 And y < py Then
sh = petal2
bsh = petals[2]
ElseIf x < px And y < py then
sh = petal3
bsh = petals[3]
ElseIf x < px+90 And y < py Then
sh = petal4
bsh = petals[4]
ElseIf x < px And y < py Then
sh = leaf2
bsh = leafs[2]
EndIf
EndSub
Sub GetShapeXY
shx = shapes.GetLeft(sh)
shy = shapes.GetTop(sh)
Sub CreateUI
GraphicsWindow.DrawRectangle(10, 10, 380, 420)
GraphicsWindow.DrawRectangle(410, 10, 200, 420)
GraphicsWindow.BrushColor = "Brown"
stick = Shapes.AddRectangle(5, 180)
Shapes.Move(stick, 174, 238)
GraphicsWindow.BrushColor = "Pink"
petals[1] = Shapes.AddEllipse(70, 55)
Shapes.Move( petals[1], 93, 115)
Shapes.Rotate( petals[1], 15)
petals[2] = Shapes.AddEllipse(70, 55)
Shapes.Move(petals[2], 148, 81)
Shapes.Rotate(petals[2], 105)
petals[3] = Shapes.AddEllipse(75, 55)
Shapes.Move( petals[3], 185, 135 )
Shapes.Rotate( petals[3], 200 )
petals[4] = Shapes.AddEllipse(75, 55)
Shapes.Move( petals[4], 135, 175)
Shapes.Rotate( petals[4], 90)
GraphicsWindow.BrushColor = "Yellow"
circ = Shapes.AddEllipse(25, 25)
Shapes.Move(circ, 162, 140)
GraphicsWindow.BrushColor = "Green"
For i = 1 To 2
leafs[i] = Shapes.AddEllipse(50, 25)
Shapes.Move(leafs[i], 223 -(i * 48), 258)
Shapes.Rotate(leafs[i], 180 * i)
EndFor
Hide()
px = 420
py = 20
pw = 90
ph = 100
GraphicsWindow.DrawRectangle(px, py, 180, 200)
GraphicsWindow.DrawRectangle(px, 220, 180, 200)
GraphicsWindow.DrawRectangle(px, py, pw, ph)
GraphicsWindow.DrawRectangle(px + 90, py, pw, ph)
GraphicsWindow.DrawRectangle(px, py + 100, pw, ph)
GraphicsWindow.DrawRectangle(px + 90, py + 100, pw, ph)
GraphicsWindow.DrawRectangle(px, py + 200, pw, ph)
GraphicsWindow.DrawRectangle(px + 90, py + 200, pw, ph)
GraphicsWindow.DrawRectangle(px, py + 300, pw, ph)
GraphicsWindow.DrawRectangle(px + 90, py + 300, pw, ph)
leaf1 = Shapes.AddEllipse(50, 25)
Shapes.Move(leaf1, px + 20, py + 40)
leaf2 = Shapes.AddEllipse(50, 25)
Shapes.Move(leaf2, px + 115, py + 340)
petal1 = Shapes.AddEllipse(65, 50)
Shapes.Move(petal1, px + 105, py + 30)
Shapes.Rotate(petal1, 15)
petal2 = Shapes.AddEllipse(65, 50)
Shapes.Move(petal2, px + 20, py + 230)
Shapes.Rotate(petal2, 105)
petal3=Shapes.AddEllipse(65, 50)
Shapes.Move(petal3, px + 105, py + 230)
Shapes.Rotate(petal3, 200)
petal4 = Shapes.AddEllipse(65, 50)
Shapes.Move(petal4, px + 20, py + 330)
Shapes.Rotate(petal4, 90)
stik = Shapes.AddRectangle(5, 50)
Shapes.Move(stik, px + 40, py + 130)
circle = Shapes.AddEllipse(25, 25)
Shapes.Move(circle, px + 120, py + 130)
Sub Hide
For i = 1 To 8
Shapes.SetOpacity(petals[i], 10)
Shapes.SetOpacity(leafs[i], 10)
Shapes.SetOpacity(circ, 10)
Shapes.SetOpacity(stick, 10)
Sub MouseMove
If Mouse.IsLeftButtonDown Then
Shapes.Move(sh, x, y)
Sub onMouseUpEvent
If bsh = stick Then
If (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh) - 10) <= Shapes.GetLeft(bsh) Then
Shapes.SetOpacity(bsh, 100)
Shapes.Remove(sh)
dropped = dropped + 1
Else
Shapes.Move(sh, shx, shy)
If (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh) - 10) <= Shapes.GetLeft(bsh) And (Shapes.GetTop(sh) + 10) >= Shapes.GetTop(bsh) And (Shapes.GetTop(sh) - 10) <= Shapes.GetTop(bsh) Then
dropped=dropped + 1
Sub starttimer
GraphicsWindow.BrushColor = "Black"
Submitbtn = Controls.AddButton("Submit", 300, 390)
Controls.SetSize(Submitbtn, 70, 35)
end = Clock.ElapsedMilliseconds
start = Clock.ElapsedMilliseconds
blink = Clock.ElapsedMilliseconds
gamestart = Clock.ElapsedMilliseconds
init = 0
While init < 1
game = Clock.ElapsedMilliseconds - start
GraphicsWindow.BrushColor = "#3975e5"
GraphicsWindow.FontSize = 15
GraphicsWindow.FillRectangle(250, 20, 120, 25)
tsecamt = Math.Round(game / 1000)
tsec = Math.Remainder(tsecamt, 60)
tming = Math.Floor(tsecamt / 60)
tmin = Math.Remainder(tming, 60)
thour = Math.Floor(tming / 60)
If tsec < 10 Then
strSec = Text.Append(":0", tsec)
strSec = Text.Append( ":", tsec)
If tmin < 10 Then
strMin = Text.Append( "0", tmin)
strMin = Text.Append( "", tmin)
sec = Text.Append(strMin, strSec)
GraphicsWindow.DrawText(250, 22, " Time: " + thour + ":" + sec )
GraphicsWindow.FontSize = 10
fps = 0
Program.Delay(1000)
EndWhile
Sub OnclickButton
If Controls.GetButtonCaption(Controls.LastClickedButton) = "Submit" Then
IF dropped = 8 Then
init = 2
GraphicsWindow.ShowMessage("Congratulations! You took " + thour +":"+ tsec + " seconds to complete the flower.","Result")
Program.End()