ACS-1805 Introduction to Programming (with App Inventor) Chapter 7. Ladybug Chase 10/4/2018 1

Transcription

1 ACS-1805 Introduction to Programming (with App Inventor) Chapter 7 Ladybug Chase 10/4/2018 1

2 What You Will Build The Ladybug Chase app In the app the user can: Control a ladybug by tilting the device View an energy-level bar on the screen It decreases over time and leads to the ladybug s starvation Make the ladybug chase and eat aphids to gain energy and prevent starvation Help the ladybug avoid a frog that wants to eat it 10/4/2018 2

3 What You Will Learn Review what we learned in MoleMash New materials Using multiple ImageSprite components and detecting collisions between them Detecting device tilts with an OrientationSensor component Use it to control an ImageSprite Changing the picture displayed for an ImageSprite Drawing lines on a Canvas component Controlling multiple events with a Clock component Using variables to keep track of numbers (the ladybug s energy level) Creating and using procedures with parameters Using the "and" logical block 10/4/2018 3

4 Designing the Components This application will have a Canvas that provides a playing field for the three ImageSprite components: one for the ladybug one for the aphid one for the frog It will also require a Sound component for its ribbit An OrientationSensor will be used to measure the device s tilt to move the ladybug A Clock will be used to change the aphid s direction A second Canvas that displays the ladybug s energy level A Reset button will restart the game if the ladybug starves or is eaten 10/4/2018 4

5 Components 10/4/2018 5

6 Getting Started Prepare the prerequisites Download the following files: Upload them to your app in the Media section of the Designer Connect to the App Inventor website and start a new project Name it Ladybug-Chase and also set the screen s title to Ladybug Chase Connect to the device 10/4/2018 6

7 Placing the Initial Components Work on one part at a time test it then move on to the next part of the program Now we concentrate on creating the ladybug and controlling its movement Create a Canvas Name it FieldCanvas Set its Width to Fill parent and its height to 300 Place an ImageSprite on the Canvas Rename it "Ladybug" Set its Picture property to the ladybug image 10/4/2018 7

8 Placing the Initial Components Other properties of an ImageSprite that are new to us The Interval property It specifies how often the ImageSprite should move itself Set it to 10 (milliseconds) The Heading property It indicates the direction in which the ImageSprite should move in degrees 0 means due right 90 means straight up 180 means due left 270 means straight down) 10/4/2018 8

9 Placing the Initial Components The Speed property It specifies how many pixels the ImageSprite should move whenever its Interval (10 milliseconds) passes Add an OrientationSensor Add a Clock Set its TimerInterval to 10 milliseconds 10/4/2018 9

10 Something For Testing on Phone If you use a real mobile device (instead of an emulator) for testing You ll need to disable autorotation for the screen That changes the display direction when you turn the device Select Screen1 and set its ScreenOrientation property to Portrait 10/4/

11 Moving the Ladybug Create Two procedures UpdateLadybug It uses of two of the OrientationSensor s most useful properties: Angle It indicates the direction in which the device is tilted (in degrees). Magnitude It indicates the amount of tilt, ranging from 0 (no tilt) to 1 (maximum tilt). Multiplying the Magnitude by 100 This tells the ladybug that it should move between 0 and 100 pixels in the specified Heading (direction) whenever its TimerInterval (10 miliseconds) passes If you find the ladybug s movement too sluggish, increase the speed multiplier If the ladybug seems too jerky, decrease it Clock1.Timer It calls UpdateLadybug 10/4/

12 Moving the Ladybug 10/4/

13 Displaying the Energy Level Adding a canvas Place it beneath FieldCanvas Name it EnergyCanvas Set its Width property to Fill parent Set its Height to 3 pixel Creating a variable: energy Create a variable energy with an initial value of 200 This variable is used to record the ladybug s energy level 10/4/

14 Displaying the Energy Level Drawing the energy bar We want to show the energy level with a red bar It has a length in pixels equal to the energy value Draw a red line from (0, 1) to (energy, 1) in EnergyCanvas to show the current energy level Draw a white line from (0, 1) to (EnergyCanvas.Width, 1) in FieldCanvas to erase the current energy level before drawing the new level 10/4/

15 Displaying the Energy Level We use a better alternative to handle these two drawings Create a procedure that can draw a line of any length and of any color in EnergyCanvas To do this, we must specify two parameters when our procedure is called length color 10/4/

16 Displaying the Energy Level Creating the DrawEnergyLine procedure Click the little blue square at the upper left of the new procedure This opens a new window From the left side of this window, drag an input to the right side Change its name from x to length This indicates that the procedure will have a parameter named length Repeat for a second parameter named color 10/4/

17 Displaying the Energy Level Add comments 10/4/

18 Displaying the Energy Level Creating the DisplayEnergy procedure It calls DrawEnergyLine twice Once to erase the old line (by drawing a white line all the way across the canvas) Once to display the new red line 10/4/

19 Starvation Game over if the ladybug fails to eat enough aphids it is eaten by the frog In GameOver procedure We want the ladybug to stop moving Set Ladybug.Enabled to false Change the picture from a live ladybug to a dead one 10/4/

20 Update the Ladybug s Move Procedure UpdateLadybug It is called by Clock.Timer every 10 milliseconds Perform following tasks Decrement its energy level Display the new level End the game if energy is 0 10/4/

21 Adding an Aphid Adding an ImageSprite Set its Picture property to the aphid image file Set its Interval property to 10 Set its Speed to 2 so it doesn t move too fast for the ladybug to catch it 10/4/

22 Adding an Aphid Controlling the aphid It worked best for the aphid to change directions approximately once every 50 milliseconds One approach to enabling this behavior would be to create a second clock with a TimerInterval of 50 milliseconds Try a different technique Using the random fraction block It returns a random number greater than or equal to 0 and less than 1 each time it is called 10/4/

23 Adding an Aphid Create the UpdateAphid procedure Whenever the timer goes off A random fraction between 0 and 1 is generated If this number is less than 0.20 (which will happen 20% of the time) The aphid will change its direction to a random number of degrees between 0 and 360 If the number is not less than 0.20 (which will be the case the remaining 80% of the time) The aphid will stay the course 10/4/

24 Adding an Aphid 10/4/

25 Programming the Ladybug to Eat the Aphid Use blocks for detecting collisions between ImageSprites What should happen when the ladybug and the aphid collide Increases the energy level by 50 to simulate eating the tasty treat Causes the aphid to disappear (by setting its Visible property to false) Causes the aphid to stop moving (by setting its Enabled property to false) Causes the aphid to move to a random location on the screen Just like what we did in MoleMash 10/4/

26 Programming the Ladybug to Eat the Aphid 10/4/

27 Detecting a Ladybug-Aphid Collision How it works When Ladybug collides with another ImageSprite If That ImageSprite is aphid (defensive programming) AND the aphid is alive Then Call EatAphid 10/4/

28 The Return of the Aphid Modify UpdateAphid If the aphid is visible, changes its direction If the aphid is not visible There is a 1 in 20 (5%) chance that it will be reenabled 20*10miliseconds 10/4/

29 Adding a Restart Button After game over it needs a Restart Button What it will do Set the energy level back to 200 Re-enable the aphid and make it visible Re-enable the ladybug and change its picture back to the live ladybug 10/4/

30 Adding the Frog Getting the frog to chase the ladybug Add a third ImageSprite Frog to FieldCanvas Set its Picture property to the frog picture its Interval to 10 its Speed to 1 10/4/

31 Setting Up the Frog to Eat the Ladybug If the ladybug and the frog collide The variable energy goes down to 0 because the ladybug has lost its life DisplayEnergy is called to erase the previous energy line (and draw the new, empty one) The procedure GameOver is called stop the ladybug from moving change its picture to that of a dead ladybug 10/4/

32 Setting Up the Frog to Eat the Ladybug 10/4/

33 The Return of the Ladybug Back to RestartButton.click Move the live ladybug to a random location The built-in function random integer is called twice once to generate a legal x coordinate once to generate a legal y coordinate 10/4/

34 Adding Sound Effects To make the game more lively You may want to add some feedback when something is being eaten Implementation In the Component Designer, add a Sound component. Set its Source to the frog.wav sound file you uploaded. 10/4/

35 Adding Sound Effects Go to the Blocks Editor Make the device vibrate when an aphid is eaten by adding a Sound1.Vibrate block with an argument of 100 (milliseconds) in EatAphid Make the frog ribbit when it eats the ladybug by adding a call to Sound1.Play in Ladybug.CollidedWith just before the call to GameOver 10/4/

36 The Complete Set of Blocks 10/4/

37 The Complete Set of Blocks 10/4/