Microsoft® Small Basic 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… 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 = 280 + 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)

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… 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 - 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)) 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)

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. 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 + 180 And y > py And y < py + 400 Then GraphicsWindow.MouseUp = onMouseUpEvent If x < px + 90 and y < py + 100 Then sh = leaf1 bsh = leafs[1] GetShapeXY() ElseIf x < px + 200 And y < py + 100 Then sh = petal1 bsh = petals[1] ElseIf x < px + 90 and y < py + 200 Then sh = stik bsh = stick ElseIf x < px + 200 And y < py + 200 Then sh = circle bsh = circ ElseIf x < px + 90 And y < py + 300 Then sh = petal2 bsh = petals[2] ElseIf x < px + 200 And y < py + 300 then sh = petal3 bsh = petals[3] ElseIf x < px+90 And y < py + 400 Then sh = petal4 bsh = petals[4] ElseIf x < px + 200 And y < py + 400 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()