4.1   playing with shapes
Upcoming SlideShare
Loading in...5
×
 

4.1 playing with shapes

on

  • 868 views

 

Statistics

Views

Total Views
868
Views on SlideShare
868
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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) And (Shapes.GetLeft(sh) - 10) = Shapes.GetTop(bsh) And (Shapes.GetTop(sh) - 10) < 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

4.1   playing with shapes 4.1 playing with shapes Presentation Transcript

  • Microsoft® Small Basic
    Playing with Shapes
    Estimated time to complete this lesson: 1 hour
  • 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.
  • 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.
  • 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.
  • Balancing the Ball – How to Play
    So how do you play this game?
    Steps to play the game:
    • First, you need to drop the ball on the seesaw by pressing the ENTER key on the keyboard.
    • 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.
  • Balancing the Ball – The Code
    Now let’s understand the code for the game in detail…
    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.
  • 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.
  • 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 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.
  • Hit the Right Shape – The Code
    Now let’s understand the code for the game in detail…
    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.
  • 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.
  • It’s Time to Apply Your Learning…
    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 on the screen containing separate, corresponding shapes that have been used to create the flower.
    • Select the shapes on the panel one by one and map the shape to its position in the flower.