SlideShare a Scribd company logo
Microsoft® Small BasicPlaying with ShapesEstimated time to complete this lesson: 1 hour
Playing with ShapesIn 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 GameIn 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 PlaySo 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 CodeNow 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 GameNow 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 PlaySo 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 CodeNow 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.

More Related Content

PPTX
4.2 responding to events
PPTX
4.4 advanced games
PPTX
4.3 collision detection
PPTX
2.3 exploring shapes
PPT
Introduction to Scratch Programming
PPT
Scratch for Data Logging and Graphing
PPT
Scratch Lesson 2 – Paint Editor
PPT
An Intro to Scratch Programming for Parents
4.2 responding to events
4.4 advanced games
4.3 collision detection
2.3 exploring shapes
Introduction to Scratch Programming
Scratch for Data Logging and Graphing
Scratch Lesson 2 – Paint Editor
An Intro to Scratch Programming for Parents

What's hot (20)

PPTX
2.2 turtle graphics
PPTX
Computer Coding with Scratch: Lesson 2_primaryschoollessons
PDF
Scratch Animation
PPTX
Programming in scratch
PPTX
2.1 graphics window
PDF
Intro to Dimension
PDF
Coding Basics with Scratch
PPTX
Interactive Project - Production Reflection
PDF
Lasso tool
PPTX
Google sketch up
PPTX
Scratch Lesson 5
PPT
Reason Lesson 3 - Adding Intrument Parts
PPTX
learn sketchup (for the beginners)
PPTX
Scratch programming introduction to game creation
PDF
Sketchup modul
PPTX
6. production reflection(2)
PPT
DigiGirlzSmallBasic
PPTX
3. production experiments(2)
PPTX
Scratch Lesson 6
PPT
Digital Practises Portfolio
2.2 turtle graphics
Computer Coding with Scratch: Lesson 2_primaryschoollessons
Scratch Animation
Programming in scratch
2.1 graphics window
Intro to Dimension
Coding Basics with Scratch
Interactive Project - Production Reflection
Lasso tool
Google sketch up
Scratch Lesson 5
Reason Lesson 3 - Adding Intrument Parts
learn sketchup (for the beginners)
Scratch programming introduction to game creation
Sketchup modul
6. production reflection(2)
DigiGirlzSmallBasic
3. production experiments(2)
Scratch Lesson 6
Digital Practises Portfolio
Ad

Similar to 4.1 playing with shapes (20)

PPTX
Unity - Building Your First Real-Time 3D Project - All Slides
DOCX
2d game engine workflow
PPTX
Unity - Building your first real-time 3D project
PDF
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
DOCX
Workflow
PPTX
Unity - Create a structure with primitives
PPTX
02 unity 3_d_part_1
PPTX
Lesson-6-Fruit-Slicer.pptx
PPTX
6. production reflection
PPTX
DSA_project_ppt.pptx_from Sumit sahoo143
PPTX
4. production experiments(1)
PPTX
Gamemaker lesson 1
PDF
Play to Learn: Effective Learning Game Design
PPTX
98 374 Lesson 01-slides
PDF
Google glass
DOCX
Proposal
DOCX
Proposal
PPTX
98 374 Lesson 03-slides
PPTX
3. production experiments(2)
PPTX
3. production experiments(2)
Unity - Building Your First Real-Time 3D Project - All Slides
2d game engine workflow
Unity - Building your first real-time 3D project
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Workflow
Unity - Create a structure with primitives
02 unity 3_d_part_1
Lesson-6-Fruit-Slicer.pptx
6. production reflection
DSA_project_ppt.pptx_from Sumit sahoo143
4. production experiments(1)
Gamemaker lesson 1
Play to Learn: Effective Learning Game Design
98 374 Lesson 01-slides
Google glass
Proposal
Proposal
98 374 Lesson 03-slides
3. production experiments(2)
3. production experiments(2)
Ad

More from allenbailey (15)

PPTX
5.1 sharing code
PPTX
3.6 debugging aids
PPTX
3.5 the controls object
PPTX
3.4 events and interactivity
PPTX
3.3 the math object
PPTX
3.2 stacks and arrays
PPTX
3.1 file input and output
PPTX
2.6 flickr, image list, and network objects
PPTX
2.5 clock, desktop, and dictionary objects
PPTX
2.4 sound, program, and text objects
PPTX
1.5 branching and subroutines
PPTX
1.4 conditions and loops
PPTX
1.3 variables
PPTX
1.2 statements, properties, and operations
PPTX
1.1 introduction to small basic
5.1 sharing code
3.6 debugging aids
3.5 the controls object
3.4 events and interactivity
3.3 the math object
3.2 stacks and arrays
3.1 file input and output
2.6 flickr, image list, and network objects
2.5 clock, desktop, and dictionary objects
2.4 sound, program, and text objects
1.5 branching and subroutines
1.4 conditions and loops
1.3 variables
1.2 statements, properties, and operations
1.1 introduction to small basic

Recently uploaded (20)

PPTX
Kulipari: Army of Frogs Movie - OVFX Story Internship 2023
PDF
Best IPTV Service Providers in the UK (2025) – Honest Reviews & Top Picks
PDF
WKA #29: "FALLING FOR CUPID" TRANSCRIPT.pdf
PDF
Download FL Studio Crack Latest version 2025
DOC
UNG毕业证学历认证,阿莱恩特国际大学毕业证文凭证书
PPTX
G.A.M.E. O.N.! (General — Art — Mythology — Entertainment — Obscure Naata) [2...
PDF
WKA #29: "FALLING FOR CUPID" TRANSCRIPT.pdf
PPTX
continuous_steps_relay.pptx. Another activity
PPTX
Safety_Pharmacology_Tier2_Edibbbbbbbbbbbbbbbable.pptx
PPTX
BULAN K3 NASIONAL PowerPt Templates.pptx
DOCX
Talking Owls and Time Travel: Lessons in Curiosity
PPTX
Squares64 Quiz, A chessboard of questions, crafted with care by @mahi_anmol_ ...
PDF
Hip Hop Culture – More Than Just Music & Style
PDF
Rare Big Band Arrangers Who Revolutionized Big Band Music in USA.pdf
PPTX
PRECISION AGRICULTURE- 1.pptx for agriculture
PDF
CityofHorror_v1.1.pdf manual en español i
PPTX
SWweredddddaregqrgWWEQEwqdewf final.pptx
PPTX
What Makes an Entertainment App Addictive?
PPTX
Introduction to NGO’s098765789709876.pptx
PDF
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Kulipari: Army of Frogs Movie - OVFX Story Internship 2023
Best IPTV Service Providers in the UK (2025) – Honest Reviews & Top Picks
WKA #29: "FALLING FOR CUPID" TRANSCRIPT.pdf
Download FL Studio Crack Latest version 2025
UNG毕业证学历认证,阿莱恩特国际大学毕业证文凭证书
G.A.M.E. O.N.! (General — Art — Mythology — Entertainment — Obscure Naata) [2...
WKA #29: "FALLING FOR CUPID" TRANSCRIPT.pdf
continuous_steps_relay.pptx. Another activity
Safety_Pharmacology_Tier2_Edibbbbbbbbbbbbbbbable.pptx
BULAN K3 NASIONAL PowerPt Templates.pptx
Talking Owls and Time Travel: Lessons in Curiosity
Squares64 Quiz, A chessboard of questions, crafted with care by @mahi_anmol_ ...
Hip Hop Culture – More Than Just Music & Style
Rare Big Band Arrangers Who Revolutionized Big Band Music in USA.pdf
PRECISION AGRICULTURE- 1.pptx for agriculture
CityofHorror_v1.1.pdf manual en español i
SWweredddddaregqrgWWEQEwqdewf final.pptx
What Makes an Entertainment App Addictive?
Introduction to NGO’s098765789709876.pptx
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

4.1 playing with shapes

  • 1. Microsoft® Small BasicPlaying with ShapesEstimated time to complete this lesson: 1 hour
  • 2. Playing with ShapesIn 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 GameIn 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. Balancing the Ball – How to PlaySo 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.
  • 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.Balancing the Ball – The CodeNow 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.
  • 7. Hit the Right Shape – The GameNow 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. Hit the Right Shape – How to PlaySo how do you play this game?Steps to play the game:Various shapes move across the screen.
  • 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. The user scores points for clicking the correct shape.Hit the Right Shape – The CodeNow 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.
  • 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. 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.
  • 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.

Editor's Notes

  • #12: 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