1. Microsoft® Small Basic
Responding to Events
Estimated time to complete this lesson: 1 hour

2. Responding to Events In this lesson, you will learn how to:
Create interactive games that respond to events.

3. Fun with Shapes
So far, you have learned how to insert and animate various shapes in your Small Basic programs.
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.

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

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

6. Make the Turtle Draw - Code
Now let’s understand the code for the game in detail…
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.
Code:
' 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
GraphicsWindow.BrushColor = "White"
GraphicsWindow.FillRectangle(55, 55, 490, 380)
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"
For i = 1 To 9
GraphicsWindow.Brushcolor = color[i]
paletteColor = Shapes.AddRectangle(40, 40)
Shapes.Move(paletteColor, 4, i * )
Endfor
GraphicsWindow.Brushcolor = color[i + 9]
Shapes.Move(paletteColor, 554, i * )
EndFor
Sub DrawShape
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)
Turtle.Turn(36)
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]
ElseIf x > 554 And x < 594 Then
' Right Palette
GraphicsWindow.PenColor = color[paletteIndex + 9]

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

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

9. Bounce the Ball – The Code
Now let’s understand the code for the game in detail…
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.
Code:
' 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
If x >= gw - 16 Or x <= 0 Then
bX = -bX
EndIf
If y <= rndNum Then
bY = -bY
Shapes.Rotate(ball, angle + 30)
Program.Delay(speed)
ShowScore()
If (y < gh - 86) Then
Goto Loop
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
Onstart()
Sub ShowScore
sec = sec
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))
Else
If min < 10 Then
strMin = Text.Append("0" , min)
ElseIf min > 10 Then
strMin = Text.Append("" , min)
GraphicsWindow.BrushColor = "White"
GraphicsWindow.FillRectangle(50, 10, 200, 20)
GraphicsWindow.DrawText(54, 10,"" + strMin + ":" + strSec)

10. Let’s Summarize… Congratulations! Now you know how to:
Create interactive games that respond to events.

11. 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.
Solution:
' Copyright (c) Microsoft Corporation. All rights reserved.
GraphicsWindow.Hide()
gw = 500
gh = 350
scoreBoxLeft = 200
passedQuestion = 0
score = 0
Clicked = ""
i = 1
Q[1] = "Nile is the longest river in the world."
Q[2] = "The highest mountain in the world is Mount Everest."
Q[3] = "Zambia is also known as the 'Country of Copper'."
Q[4] = "The coldest place on the earth is in Siberia."
Q[5] = "Sydney is the capital of the USA."
Q[6] = "The river Jordan flows out into the Dead sea."
Q[7] = "Mumbai is the capital of India."
Q[8] = "Africa is the largest coffee growing continent in the world."
Q[9] = "The largest desert in the world is Sahara Desert."
Q[10] = "London is the capital of the UK."
A[1] = "True"
A[2] = "True"
A[3] = "True"
A[4] = "True"
A[5] = "False"
A[6] = "True"
A[7] = "False"
A[8] = "False"
A[9] = "True"
A[10] = "True"
ArrayRandom[1] = " "
ArrayRandom[2] = " "
ArrayRandom[3] = " "
ArrayRandom[4] = " "
randomNumber = Math.GetRandomNumber(Array.GetItemCount(ArrayRandom))
GraphicsWindow.CanResize = "False"
GraphicsWindow.Width = gw
GraphicsWindow.Height = gh
GraphicsWindow.Top = (Desktop.Height - gh) / 2
GraphicsWindow.Left = (Desktop.Width - gw) / 2
GraphicsWindow.Title = "True or False"
GraphicsWindow.Show()
Controls.ButtonClicked = OnButtonClicked
CreateUI()
Sub CreateUI
GraphicsWindow.BrushColor = "Purple"
GraphicsWindow.FontName = "Verdana"
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawRectangle(10, 10, 480, 330)
trueButton = Controls.AddButton("True", 30, 210)
falseButton = Controls.AddButton("False", 320, 210)
Controls.SetSize(trueButton, 150, 100)
Controls.SetSize(falseButton, 150, 100)
GraphicsWindow.DrawText(220, 300, "Result")
resultTextBox = Shapes.AddText("")
Shapes.Move(resultTextBox, 220, 250)
scoreTextBox = Shapes.AddText("Score: 0")
Shapes.Move(scoreTextBox, 404, 15)
StartGame()
EndSub
Sub StartGame
passedQuestion = Text.GetSubText(ArrayRandom[randomNumber], i, 1)
If i <= 7 Then
qx = 60
qy = 90
GraphicsWindow.BrushColor = "LightBlue"
GraphicsWindow.FillRectangle(200, 220, 100, 80)
GraphicsWindow.FillRectangle(20, 50, 460, 100)
GraphicsWindow.BrushColor = "Blue"
GraphicsWindow.DrawBoundText(qx - 20, qy, 420 "" + Q[passedQuestion])
currentAnswer = A[passedQuestion]
Else
Program.Delay(1000)
GraphicsWindow.ShowMessage("Your Score is " + score, "Game Over")
Program.End()
EndIf
i = i + 1
Sub OnButtonClicked
clickedButtonCaption = Controls.GetButtonCaption(Controls.LastClickedButton)
If currentAnswer = clickedButtonCaption Then
lastAnswer = "Correct"
score = score + 1
lastAnswer = "Incorrect"
Shapes.Move(resultTextBox, 212, 250)
Shapes.SetText(resultTextBox, lastAnswer)
Shapes.SetText(scoreTextBox, "Score: " + score)