Resources For IT Professionals

# Small Basic Curriculum: Lesson 4.1: Playing with Shapes

Small BasicOnline > Lesson 4.1: Playing with Shapes

Estimated time to complete this lesson: 1 hour

### 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.

### 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.

### 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.

### 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.

### Balancing the Ball – The Code

Now let’s understand the code for the game in detail…

``````' 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"

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
EndWhile

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"

GraphicsWindow.BrushColor = "Red"
Shapes.Move(ball, ballX, ballY)

GraphicsWindow.FontSize = 16
GraphicsWindow.FontName = "Verdana"
directions = Shapes.AddText("Press ENTER to start the game!")
Shapes.Move(directions, 80, 150)

GraphicsWindow.BrushColor = "Blue"
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)
EndIf
Else
If GraphicsWindow.LastKey = "Return" Then
gameStarted = "True"
EndIf
EndIf
EndSub

Sub CalculateBallMetrics
If ballDirection = angle / Math.Abs(angle) Then
ballSpeed = Math.Min(2, ballSpeed * power)
Else
ballSpeed = Math.Max(0.1, ballSpeed / power)
If ballSpeed < 0.2 Then
ballDirection = -1 * ballDirection
ballSpeed = 0.2
EndIf
EndIf

ballX = ballX + ballDirection * ballSpeed
deltaX = ballX - 210
ballY = 280 + deltaY
EndSub

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)
EndIf
If (minutes < 10) Then
minutes = Text.Append("0", minutes)
EndIf

timeDisplayText = minutes + ":" + seconds
Shapes.SetText(timeText, "Time: " + timeDisplayText)
EndSub``````

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.

### 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.

### 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.

### Hit the Right Shape – The Code

Now let’s understand the code for the game in detail…

``````' 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"

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()
Shapes.Move(elli, -90, 50)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.Move(rect, -20, 50)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.Move(circle, 20, 50)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.Move(square1, 230, 50)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.Move(rect1, 300, 250)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.Move(elli1, 100, 250)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.Move(square2, 250, 250)

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
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(rect, -20, 50)
EndIf

Shapes.Move(circle, Shapes.GetLeft(circle) + 4, 50)
If Shapes.GetLeft(circle) > 600 Then
shapes.ShowShape(circle)
Shapes.Move(circle, -110, 100)
EndIf

Shapes.Move(square1, Shapes.GetLeft(square1) + 3, 50)
If Shapes.GetLeft(square1) > 600 Then
shapes.ShowShape(square1)
Shapes.Move(square1, -200, 100)
EndIf

Shapes.Move(rect1, Shapes.GetLeft(rect1) + 6, 250)
If Shapes.GetLeft(rect1) > 600 Then
shapes.ShowShape(rect1)
Shapes.Move(rect1, -100, 180)
EndIf

Shapes.Move(elli1, Shapes.GetLeft(elli1) + 2, 250)
If Shapes.GetLeft(elli1) > 600 Then
shapes.ShowShape(elli1)
Shapes.Move(elli1, -60, 70)
EndIf

Shapes.Move(square2, Shapes.GetLeft(square2)+3, 250)
If Shapes.GetLeft(square2) > 600 Then
shapes.ShowShape(square2)
Shapes.Move(square2, -250, 300)
EndIf

Shapes.Move(circle1, Shapes.GetLeft(circle1) + 5, 210)
If Shapes.GetLeft(circle1) > 600 Then
Shapes.ShowShape(circle1)
Shapes.Move(circle1, -50, 210)
EndIf
sec = sec - 0.01
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))
EndIf
If sec <= 0 Then
Goto out
EndIf

Program.Delay(delayspeed)

currentSec = Clock.ElapsedMilliseconds
If (currentSec - prevSec) >= 5000 Then
i = Math.GetRandomNumber(4)
If i <> 0 Then
Controls.SetTextBoxText(textBox, shapeNames[i])
EndIf
prevSec = currentSec
EndIf
currSec = Clock.ElapsedMilliseconds
EndWhile

out:
GraphicsWindow.DrawText(ScoreboxX + 110, 5,"00:0" + Math.Floor(sec))
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
EndIf
EndIf

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)
Score = Score + 1
EndIf
EndIf
EndIf

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)
Score = Score + 1
EndIf
EndIf

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)
Score = Score + 1
EndIf
EndIf
EndIf

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)
Score = Score + 1
EndIf
EndIf

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)
Score = Score + 1
EndIf
EndIf
EndIf

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)
Score = Score + 1
EndIf
EndIf
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)
Score = Score + 1
EndIf
EndIf
EndIf
ShowScore()
EndSub

Sub ShowScore
GraphicsWindow.FontName = "Verdana"
GraphicsWindow.FontSize = 14
GraphicsWindow.BrushColor = "White"
GraphicsWindow.FillRectangle(0, 0, 100, 20)
GraphicsWindow.BrushColor = "Black"
GraphicsWindow.DrawText(10, 5, "Score: " + Score)
EndSub``````

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.

### 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.

### 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.

To see the answers to these questions, go to the Answer Key page.

Next Lesson