1. Microsoft® Small Basic Playing with Shapes Estimated time to complete this lesson: 1 hour
2. Playing with Shapes In this lesson, you will learn about: Creating games with the help of shapes. Using various properties and operations of the Shapes object to create game elements.
3. Fun with Shapes Let’s start with a very simple game that you can create with the help of the Shapes object in Small Basic. 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, the Shapes object provides various operations that allow you to draw, color, rotate, and animate shapes in the graphics window. Now you will learn how you can use different shapes to make games.
4. 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 the amount of time that the user keeps the ball balanced on the seesaw. Notice how you can use different shapes available with the Shapes object to create colorful elements for the game.
5.
6.
7. 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 displayed on the screen. Again, notice how we are using different types of colorful shapes on the screen by using the Shapes object. The objective of the game is to score points by clicking the correct shape on the screen.
8.
9. A shape name is flashed on the screen. The user has to click the shape on the screen that matches the shape name.
10.
11. Let’s Summarize… Congratulations! Now you know how to: Create games with the help of shapes. Use various properties and operations of the Shapes object to create game elements.
12.
13. Create a separate panel on the screen containing separate, corresponding shapes that have been used to create the flower.
14. Select the shapes on the panel one by one and map the shape to its position in the flower.
Hinweis der Redaktion
Solution:' Copyright (c) Microsoft Corporation. All rights reserved.GraphicsWindow.Hide()gw = 620gh = 450endtime = Clock.ElapsedMillisecondsstarttime = Clock.ElapsedMillisecondsblinktime = Clock.ElapsedMillisecondsgamestarttime = Clock.ElapsedMillisecondsGraphicsWindow.CanResize = "False"GraphicsWindow.Width = gwGraphicsWindow.Height = ghGraphicsWindow.Top = ( Desktop.Height - gh ) / 2GraphicsWindow.Left = ( Desktop.Width - gw ) / 2GraphicsWindow.Title = "Flower"GraphicsWindow.BrushColor ="Pink"GraphicsWindow.Show()CreateUI()GraphicsWindow.MouseDown = MouseActionControls.ButtonClicked = OnclickButtonstarttimer()Sub MouseAction x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYGraphicsWindow.MouseMove = MouseMoveIf x > px And x < px + 180 And y > py And y < py + 400 Then GraphicsWindow.MouseUp = onMouseUpEventIf 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]GetShapeXY() ElseIf x < px + 90 and y < py + 200 Then sh = stikbsh = stickGetShapeXY() ElseIf x < px + 200 And y < py + 200 Then sh = circle bsh = circ GetShapeXY() ElseIf x < px + 90 And y < py + 300 Thensh = petal2bsh = petals[2]GetShapeXY() ElseIf x < px + 200 And y < py + 300 then sh = petal3 bsh = petals[3]GetShapeXY() ElseIf x < px+90 And y < py + 400 Thensh = petal4 bsh = petals[4]GetShapeXY() ElseIf x < px + 200 And y < py + 400 Then sh = leaf2 bsh = leafs[2]GetShapeXY() EndIfEndIfEndSubSub GetShapeXYshx = shapes.GetLeft(sh) shy = shapes.GetTop(sh)EndSubSub CreateUIGraphicsWindow.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 = 420py = 20 pw = 90 ph = 100GraphicsWindow.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)GraphicsWindow.BrushColor = "Green" leaf1 = Shapes.AddEllipse(50, 25) Shapes.Move(leaf1, px + 20, py + 40) leaf2 = Shapes.AddEllipse(50, 25) Shapes.Move(leaf2, px + 115, py + 340) GraphicsWindow.BrushColor = "Pink" 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)GraphicsWindow.BrushColor = "Brown"stik = Shapes.AddRectangle(5, 50) Shapes.Move(stik, px + 40, py + 130) GraphicsWindow.BrushColor = "Yellow" circle = Shapes.AddEllipse(25, 25) Shapes.Move(circle, px + 120, py + 130)EndSubSub HideFor i = 1 To 8Shapes.SetOpacity(petals[i], 10) EndForFor i = 1 To 2Shapes.SetOpacity(leafs[i], 10) EndForShapes.SetOpacity(circ, 10)Shapes.SetOpacity(stick, 10)EndSubSub MouseMove x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYIf Mouse.IsLeftButtonDown Then Shapes.Move(sh, x, y) EndIfEndSubSub onMouseUpEventIf bsh = stick ThenIf (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh) - 10) <= Shapes.GetLeft(bsh) ThenShapes.SetOpacity(bsh, 100)Shapes.Remove(sh) dropped = dropped + 1 ElseShapes.Move(sh, shx, shy) EndIfEndIfIf (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) ThenShapes.SetOpacity(bsh, 100)Shapes.Remove(sh) dropped=dropped + 1 ElseShapes.Move(sh, shx, shy) EndIfEndSubSub starttimerGraphicsWindow.BrushColor = "Black"Submitbtn = Controls.AddButton("Submit", 300, 390)Controls.SetSize(Submitbtn, 70, 35) end = Clock.ElapsedMilliseconds start = Clock.ElapsedMilliseconds blink = Clock.ElapsedMillisecondsgamestart = Clock.ElapsedMilliseconds init = 0While init < 1 game = Clock.ElapsedMilliseconds - startGraphicsWindow.BrushColor = "#3975e5" GraphicsWindow.FontSize = 15GraphicsWindow.FillRectangle(250, 20, 120, 25)GraphicsWindow.BrushColor = "Black"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) ElsestrSec = Text.Append( ":", tsec) EndIfIf tmin < 10 Then strMin = Text.Append( "0", tmin) ElsestrMin = Text.Append( "", tmin) EndIf sec = Text.Append(strMin, strSec)GraphicsWindow.DrawText(250, 22, " Time: " + thour + ":" + sec ) GraphicsWindow.FontSize = 10 end = Clock.ElapsedMilliseconds fps = 0 Program.Delay(1000)EndWhileEndSubSub OnclickButtonIf 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() EndIfEndIfEndSub
