0
Microsoft® Small Basic<br />Playing with Shapes<br />Estimated time to complete this lesson: 1 hour<br />
Playing with Shapes<br />In this lesson, you will learn about:<br />Creating games with the help of shapes.<br />Using var...
Fun with Shapes <br />Let’s start with a very simple game that you can create with the help of the Shapes object in Small ...
Balancing the Ball – The Game<br />In this simple game, you balance the ball on a seesaw in the graphics window. <br />The...
Balancing the Ball – How to Play<br />So how do you play this game?<br />Steps to play the game:<br /><ul><li>First, you n...
After the ball is dropped, you use the LEFT ARROW and the RIGHT ARROW to balance the ball on the seesaw and avoid dropping...
Hit the Right Shape – The Game<br />Now let’s move on to a more complex game. In this game, you score points by using the ...
Hit the Right Shape – How to Play<br />So how do you play this game?<br />Steps to play the game:<br /><ul><li>Various sha...
A shape name is flashed on the screen. The user has to click the shape on the screen that matches the shape name.
The user scores points for clicking the correct shape.</li></li></ul><li>Hit the Right Shape – The Code<br />Now let’s und...
Let’s Summarize…<br />Congratulations! Now you know how to:<br />Create games with the help of shapes. <br />Use various p...
Upcoming SlideShare
Loading in...5
×

4.1 playing with shapes

781

Published on

Published in: Entertainment & Humor, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
781
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Solution:&apos; Copyright (c) Microsoft Corporation. All rights reserved.GraphicsWindow.Hide()gw = 620gh = 450endtime = Clock.ElapsedMillisecondsstarttime = Clock.ElapsedMillisecondsblinktime = Clock.ElapsedMillisecondsgamestarttime = Clock.ElapsedMillisecondsGraphicsWindow.CanResize = &quot;False&quot;GraphicsWindow.Width = gwGraphicsWindow.Height = ghGraphicsWindow.Top = ( Desktop.Height - gh ) / 2GraphicsWindow.Left = ( Desktop.Width - gw ) / 2GraphicsWindow.Title = &quot;Flower&quot;GraphicsWindow.BrushColor =&quot;Pink&quot;GraphicsWindow.Show()CreateUI()GraphicsWindow.MouseDown = MouseActionControls.ButtonClicked = OnclickButtonstarttimer()Sub MouseAction x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYGraphicsWindow.MouseMove = MouseMoveIf x &gt; px And x &lt; px + 180 And y &gt; py And y &lt; py + 400 Then GraphicsWindow.MouseUp = onMouseUpEventIf x &lt; px + 90 and y &lt; py + 100 Then sh = leaf1 bsh = leafs[1]GetShapeXY()ElseIf x &lt; px + 200 And y &lt; py + 100 Then sh = petal1 bsh = petals[1]GetShapeXY() ElseIf x &lt; px + 90 and y &lt; py + 200 Then sh = stikbsh = stickGetShapeXY() ElseIf x &lt; px + 200 And y &lt; py + 200 Then sh = circle bsh = circ GetShapeXY() ElseIf x &lt; px + 90 And y &lt; py + 300 Thensh = petal2bsh = petals[2]GetShapeXY() ElseIf x &lt; px + 200 And y &lt; py + 300 then sh = petal3 bsh = petals[3]GetShapeXY() ElseIf x &lt; px+90 And y &lt; py + 400 Thensh = petal4 bsh = petals[4]GetShapeXY() ElseIf x &lt; px + 200 And y &lt; 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 = &quot;Brown&quot; stick = Shapes.AddRectangle(5, 180) Shapes.Move(stick, 174, 238) GraphicsWindow.BrushColor = &quot;Pink&quot; 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 = &quot;Yellow&quot; circ = Shapes.AddEllipse(25, 25) Shapes.Move(circ, 162, 140) GraphicsWindow.BrushColor = &quot;Green&quot;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 = &quot;Green&quot; 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 = &quot;Pink&quot; 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 = &quot;Brown&quot;stik = Shapes.AddRectangle(5, 50) Shapes.Move(stik, px + 40, py + 130) GraphicsWindow.BrushColor = &quot;Yellow&quot; 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) &gt;= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh) - 10) &lt;= Shapes.GetLeft(bsh) ThenShapes.SetOpacity(bsh, 100)Shapes.Remove(sh) dropped = dropped + 1 ElseShapes.Move(sh, shx, shy) EndIfEndIfIf (Shapes.GetLeft(sh) + 10) &gt;= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh) - 10) &lt;= Shapes.GetLeft(bsh) And (Shapes.GetTop(sh) + 10) &gt;= Shapes.GetTop(bsh) And (Shapes.GetTop(sh) - 10) &lt;= Shapes.GetTop(bsh) ThenShapes.SetOpacity(bsh, 100)Shapes.Remove(sh) dropped=dropped + 1 ElseShapes.Move(sh, shx, shy) EndIfEndSubSub starttimerGraphicsWindow.BrushColor = &quot;Black&quot;Submitbtn = Controls.AddButton(&quot;Submit&quot;, 300, 390)Controls.SetSize(Submitbtn, 70, 35) end = Clock.ElapsedMilliseconds start = Clock.ElapsedMilliseconds blink = Clock.ElapsedMillisecondsgamestart = Clock.ElapsedMilliseconds init = 0While init &lt; 1 game = Clock.ElapsedMilliseconds - startGraphicsWindow.BrushColor = &quot;#3975e5&quot; GraphicsWindow.FontSize = 15GraphicsWindow.FillRectangle(250, 20, 120, 25)GraphicsWindow.BrushColor = &quot;Black&quot;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 &lt; 10 Then strSec = Text.Append(&quot;:0&quot;, tsec) ElsestrSec = Text.Append( &quot;:&quot;, tsec) EndIfIf tmin &lt; 10 Then strMin = Text.Append( &quot;0&quot;, tmin) ElsestrMin = Text.Append( &quot;&quot;, tmin) EndIf sec = Text.Append(strMin, strSec)GraphicsWindow.DrawText(250, 22, &quot; Time: &quot; + thour + &quot;:&quot; + sec ) GraphicsWindow.FontSize = 10 end = Clock.ElapsedMilliseconds fps = 0 Program.Delay(1000)EndWhileEndSubSub OnclickButtonIf Controls.GetButtonCaption(Controls.LastClickedButton) = &quot;Submit&quot; Then IF dropped = 8 Then init = 2 GraphicsWindow.ShowMessage(&quot;Congratulations! You took &quot; + thour +&quot;:&quot;+ tsec + &quot; seconds to complete the flower.&quot;,&quot;Result&quot;) Program.End() EndIfEndIfEndSub
  • Transcript of "4.1 playing with shapes"

    1. 1. Microsoft® Small Basic<br />Playing with Shapes<br />Estimated time to complete this lesson: 1 hour<br />
    2. 2. Playing with Shapes<br />In this lesson, you will learn about:<br />Creating games with the help of shapes.<br />Using various properties and operations of the Shapes object to create game elements.<br />
    3. 3. Fun with Shapes <br />Let’s start with a very simple game that you can create with the help of the Shapes object in Small Basic.<br />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…<br />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.<br />
    4. 4. Balancing the Ball – The Game<br />In this simple game, you balance the ball on a seesaw in the graphics window. <br />The game tests a person’s responsiveness. The timer displays the amount of time that the user keeps the ball balanced on the seesaw.<br />Notice how you can use different shapes available with the Shapes object to create colorful elements for the game.<br />
    5. 5. Balancing the Ball – How to Play<br />So how do you play this game?<br />Steps to play the game:<br /><ul><li>First, you need to drop the ball on the seesaw by pressing the ENTER key on the keyboard.
    6. 6. After the ball is dropped, you use the LEFT ARROW and the RIGHT ARROW to balance the ball on the seesaw and avoid dropping it.</li></li></ul><li>Balancing the Ball – The Code<br />Now let’s understand the code for the game in detail…<br />You use the Graphicswindow object to create a user interface for the game. You use different operations and properties of the Shapes object to add a shape and move it. You also use the Turtle object and set its speed as well as its x- and y-coordinates. You use different conditions for different actions.<br />
    7. 7. Hit the Right Shape – The Game<br />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.<br />Again, notice how we are using different types of colorful shapes on the screen by using the Shapes object.<br />The objective of the game is to score points by clicking the correct shape on the screen.<br />
    8. 8. Hit the Right Shape – How to Play<br />So how do you play this game?<br />Steps to play the game:<br /><ul><li>Various shapes move across the screen.
    9. 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. 10. The user scores points for clicking the correct shape.</li></li></ul><li>Hit the Right Shape – The Code<br />Now let’s understand the code for the game in detail…<br />You use the GraphicsWindow object to create a user interface for the game. You use different operations of the Controls object to add the text box and set the text in the text box. You use the Shapes object to add and move different types of shapes in your game. You also use the Clock object to add a timer in the game. In addition, you set different conditions to carry out different actions.<br />
    11. 11. Let’s Summarize…<br />Congratulations! Now you know how to:<br />Create games with the help of shapes. <br />Use various properties and operations of the Shapes object to create game elements.<br />
    12. 12. It’s Time to Apply Your Learning…<br />Write a program to display a graphics window, and then perform the following steps:<br /><ul><li>Create a slightly opaque flower in the graphics window by using various shapes.
    13. 13. Create a separate panel on the screen containing separate, corresponding shapes that have been used to create the flower.
    14. 14. Select the shapes on the panel one by one and map the shape to its position in the flower.</li>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×