Small Basic > Curriculum > Online > Lesson 4.2: Responding to Events

Responding to Events
Fun with Shapes
Make the Turtle Draw – The Game
Make the Turtle Draw – How to Play
Make the Turtle Draw - Code
Bounce the Ball – The Game
Bounce the Ball – How to Play
Bounce the Ball – The Code
Let’s Summarize…
Show What You Know
PowerPoint Downloads

Estimated time to complete this lesson: 1 hour

Responding to Events

In this lesson, you will learn how to:

Create interactive games that respond to events.

Fun with Shapes

So far, you have learned how to insert and animate various shapes in your Small Basic programs.

Various Shapes

You have also learned how to use controls and keyboard and mouse events to include interactivity in your Small Basic program.

And you also know that you can use these shapes, controls, and events collectively to create interactive games in Small Basic.

Make the Turtle Draw – The Game

In this simple game, you tell the Turtle to draw unique shapes in the graphics window by specifying how many sides each shape has.

The game demonstrates how to work with colors and use the properties of Turtle and GraphicsWindow to draw different shapes.

Turtle Draw

Notice how you use the Turtle object to draw shapes and how you use mouse and keyboard events to choose the color and the number of sides.

Make the Turtle Draw – How to Play

So how do you play this game?

Steps to play the game:

First, you must select a color from the color palette.
Next, you define what shape the Turtle should draw by specifying the number of sides.
When you click Submit, the Turtle starts to draw.

Make the Turtle Draw - Code

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

' Copyright (c) Microsoft Corporation.  All rights reserved.

GraphicsWindow.Hide()

gw = 600

gh = 450



GraphicsWindow.CanResize = "False"

GraphicsWindow.Top = (Desktop.Height - gh) / 2

GraphicsWindow.Left = (Desktop.Width - gw) / 2

GraphicsWindow.Title = "Drawing Shapes Using Turtle"

GraphicsWindow.Width = gw

GraphicsWindow.Height = gh

GraphicsWindow.Show()



CreateUI()



Controls.ButtonClicked = OnButtonClicked

GraphicsWindow.MouseDown = OnMouseDown



Sub CreateUI

  GraphicsWindow.BrushColor = "Black" 

  GraphicsWindow.DrawText(100, 25, "Enter the sides:")

  

  sidesTextBox = Controls.AddTextBox(200, 20)

  Controls.SetSize(sidesTextBox, 50, 30)

  

  drawButton = Controls.AddButton("DrawShape", 280, 20)

  Controls.SetSize(drawButton, 100, 30) 

  

  clearButton = Controls.AddButton("Clear", 390, 20)

  Controls.SetSize(clearButton, 100, 30) 

  

  GraphicsWindow.PenColor = "Black"

  GraphicsWindow.DrawRectangle(55, 55, 490, 380)

  

  DrawPalette()

EndSub



Sub OnButtonClicked 

  clickedButton = Controls.LastClickedButton

  If clickedButton = drawButton Then

    sides = Controls.GetTextBoxText(sidesTextBox)

    If sides < 3 or sides > 35 Then

      Controls.SetTextBoxText(sidesTextBox, "")

    Else  

      DrawShape()

    EndIf

  ElseIf clickedButton = clearButton Then

    Controls.SetTextBoxText(sidesTextBox, "")

    GraphicsWindow.BrushColor = "White"

    GraphicsWindow.FillRectangle(55, 55, 490, 380)

    GraphicsWindow.PenColor = "Black"

    GraphicsWindow.DrawRectangle(55, 55, 490, 380)

  EndIf

EndSub



Sub  DrawPalette

  color[1] = "Red"

  color[2] = "DeepPink"

  color[3] = "Magenta"

  color[4] = "BlueViolet"

  color[5] = "MediumSlateBlue"

  color[6] = "LimeGreen"

  color[7] = "DeepSkyBlue"

  color[8] = "Blue"

  color[9] = "DarkGreen"

  

  color[10] = "Aqua"

  color[11] = "Green"

  color[12] = "SpringGreen"

  color[13] = "Yellow"

  color[14] = "YellowGreen"

  color[15] = "SteelBlue"

  color[16] = "DarkSlateBlue"

  color[17] = "Black"

  color[18] = "Orange" 

  

  GraphicsWindow.PenColor = "Black"

  For i = 1 To 9

    GraphicsWindow.Brushcolor = color[i]

    paletteColor = Shapes.AddRectangle(40, 40)

    Shapes.Move(paletteColor, 4, i * 44 + 6)

  Endfor

  

  For i = 1 To 9

    GraphicsWindow.Brushcolor = color[i + 9]

    paletteColor = Shapes.AddRectangle(40, 40)

    Shapes.Move(paletteColor, 554, i * 44 + 6)

  EndFor

EndSub



Sub DrawShape

  GraphicsWindow.DrawRectangle(55, 55, 490, 380)

  Turtle.Show()

  Program.Delay(500)

  

  length = 500 / sides  

  angle = 360 / sides 

  

  Turtle.Speed = 10

  Turtle.X = 300

  Turtle.Y = 240

  

  For j = 1 To 10 

    For i = 1 To sides 

      Turtle.Move(length) 

      Turtle.Turn(angle)

    EndFor 

    Turtle.Turn(36)

  EndFor  

EndSub



Sub OnMouseDown  

  x = GraphicsWindow.MouseX

  y = GraphicsWindow.MouseY

  

  If y > 50 And y < 446 Then

    If Math.Remainder((y - 6), 44) <= 40 Then

      paletteIndex = Math.Floor((y - 6) / 44)

      

      If x > 4 And x < 44 Then

        ' Left Palette

        GraphicsWindow.PenColor = color[paletteIndex]

        Controls.SetTextBoxText(sidesTextBox, "")

      ElseIf x > 554 And x < 594 Then

        ' Right Palette

        GraphicsWindow.PenColor = color[paletteIndex + 9]

        Controls.SetTextBoxText(sidesTextBox, "")

      EndIf

      

      GraphicsWindow.DrawRectangle(55, 55, 490, 380)

    EndIf

  EndIf

EndSub

This is the output you will see:

Output

To create this game, you use the GraphicsWindow to create a user interface. You use the Controls object to add a button and a text box and set the size for the control buttons. You use the Shapes object to add different shapes. Then, you use the Shapes object to show, move, and hide shapes. You also use the Turtle object and set its angle, speed, and position. You use different conditions for different actions.

Bounce the Ball – The Game

Let’s look at a more complex game, in which you click a ball to keep it floating above the ground.

Bounce the Ball

The objective of the game is to keep the ball afloat as long as possible.

Notice how we use mouse events to keep the ball from touching the ground. The ball responds to mouse clicks and stays afloat.

Bounce the Ball – How to Play

So how do you play this game?

Steps to play the game:

On the screen, a ball is dropped on the ground.
You click the ball to make it bounce up in the air.
You keep clicking the ball to keep it from touching the ground.
The timer shows how many seconds you keep the ball from touching the ground.

Bounce the Ball – The Code

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

Copyright (c) Microsoft Corporation.  All rights reserved.

GraphicsWindow.Hide()

gw = 450

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 = "Bounce the Ball"

GraphicsWindow.Show()



speed = 15

imagepathBase = Program.Directory + "\ground.png"

ballimage = Program.Directory + "\ball.png"



GraphicsWindow.FontSize = 14

Controls.ButtonClicked = OnClicked



angle = 30

sec = 0

min = 0



gw = GraphicsWindow.Width

gh = GraphicsWindow.Height

y = gh - 86



x = 210

GraphicsWindow.BrushColor = "Black"

GraphicsWindow.DrawText(10, 10, "Time: 00:00")  

itxt = Shapes.AddText("Click on the ball to start the game!")

Shapes.Move(itxt, 100,130)

ball = Shapes.AddImage(ballimage)

base = Shapes.AddImage(imagepathBase)

Shapes.Move(base, 0, gh - 50)

ballbtn = Controls.AddButton("", x, y)

Controls.SetSize(ballbtn, 36, 36)

Shapes.Move(ball, x, y) 

Shapes.Move(ballbtn, x, y)

Shapes.SetOpacity(ballbtn, 0)



Sub Onstart

  bX = 1

  bY = -2

  rndNum = Math.GetRandomNumber(200)

  topy = rndnum

  

  Loop:

  y = y + bY

  

  gw = GraphicsWindow.Width

  gh = GraphicsWindow.Height

  

  If x >= gw - 16 Or x <= 0 Then

    bX = -bX

  EndIf

  

  If y <= rndNum Then

    bY = -bY

  EndIf 

  

  Shapes.Move(ball, x, y)

  Shapes.Rotate(ball, angle + 30)

  Shapes.Move(ballbtn, x, y) 

  Program.Delay(speed)  

  ShowScore()

  If (y < gh - 86) Then  

    Goto Loop

  EndIf

  

  EndGame:

  GraphicsWindow.ShowMessage("You bounced the ball for " + strMin + ":" + strSec + " seconds.", "Game Over")

  Program.End()

EndSub



Sub OnClicked 

  Shapes.HideShape(itxt)

  speed = speed - 0.5

  ShowScore()

  Onstart()

EndSub



Sub ShowScore  

  sec = sec + 0.01

  If sec < 60 And min < 1 Then

    strMin = "00"

    If sec < 10 Then  

      strSec = Text.Append("0" , Math.Floor(sec))

    ElseIf sec > 10 Then

      strSec = Text.Append("" , Math.Floor(sec))

    EndIf

  Else

    If min < 10 Then  

      strMin = Text.Append("0" , min)

    ElseIf min > 10 Then

      strMin = Text.Append("" , min)

    EndIf  

    If sec < 10 Then  

      strSec = Text.Append("0" , Math.Floor(sec))

    ElseIf sec > 10 Then

      strSec = Text.Append("" , Math.Floor(sec))

    EndIf  

  EndIf

  GraphicsWindow.BrushColor = "White"

  GraphicsWindow.FillRectangle(50, 10, 200, 20)

  GraphicsWindow.BrushColor = "Black"

  GraphicsWindow.DrawText(54, 10,"" + strMin + ":" + strSec)  

EndSub

This is the output you will see:

Output

To develop this game, you create the user interface by using the GraphicsWindow object. You use the Controls object to define the mouse event that will be used to balance the ball. You use the Shapes object to add the image of the ball. You also use conditional statements to define the action to be performed when a particular mouse event occurs.

Let’s Summarize…

Congratulations! Now you know how to:

Create interactive games that respond to events.

Show What You Know

Write a program to display a graphics window, and perform the following steps:

Create a series of statements to appear in the graphics window.
Create a button that you label True and another button that you label False.
For each statement, the user will click True or False.
The user scores points by correctly identifying statements as true or false.

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

Next Lesson