Small Basic > Curriculum > Online > Lesson 4.1: Playing with Shapes

Playing with Shapes
Fun with Shapes
Balancing the Ball – The Game
Balancing the Ball – How to Play
Balancing the Ball – The Code
Hit the Right Shape – The Game
Hit the Right Shape – How to Play
Hit the Right Shape – The Code
Let’s Summarize…
Show What You Know
PowerPoint Downloads

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.

Fun with Shapes

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"
  Shapes.Rotate(paddle, angle)
  
  power = 1 + Math.Abs(angle) / 200
  Shapes.Rotate(paddle, angle)
  
  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"
  paddle = Shapes.AddRectangle(210, 10)  
  Shapes.Move(paddle, 120, 310)
  
  GraphicsWindow.BrushColor = "Red"
  ball = Shapes.AddEllipse(30, 30)
  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"
  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)
    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
  deltaY = deltaX * Math.Sin(Math.GetRadians(angle))
  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"

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)

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

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

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

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

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

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

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
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(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