ACS-1805 Introduction to Programming (with App Inventor) Chapter 5. MoleMash 9/27/2018 1

Transcription

1 ACS-1805 Introduction to Programming (with App Inventor) Chapter 5 MoleMash 9/27/2018 1

2 What We Will Learn What we will learn in this chapter: The ImageSprite component for touch-sensitive movable images. The Canvas component, which acts as a surface on which to place the Image Sprite. The Clock component to move the sprite around once every second. The Sound component to produce a vibration when the mole is tapped. The Button component to start a new game. Procedures to implement repeated behavior, such as moving the mole. Generating random numbers. Using the addition (+) and subtraction ( ) blocks 9/27/2018 2

3 What You ll Need Get everything ready Logon to App Inventor Start a new project named MoleMash Download the picture of a mole from 9/27/2018 3

4 Designing the Components You ll use these components to make MoleMash A Canvas that serves as a playing field. An ImageSprite that displays a picture of a mole and can move around and sense when the mole is touched. A Sound that vibrates when the mole is touched. Labels that display Hits:, Misses:, and the actual numbers of hits and misses. HorizontalArrangements to correctly position the Labels. A Button to reset the numbers of hits and misses to 0. A Clock to make the mole move once per second. 9/27/2018 4

5 Designing the Components 9/27/2018 5

6 Placing the Components Finish placing the components in the Designer Canvas ImageSprite component Place it anywhere on Canvas1. Change its name to Mole. Set its Picture property to mole.png. Button component Place it beneath Canvas1. Rename it ResetButton. Set its Text property to Reset. Clock component From "Sensor" drawer. It will appear in the Non-visible components section. Sound component 9/27/2018 6

7 Placing the Components A HorizontalArrangement component Drag two Labels into HorizontalArrangement1. Rename the left Label HitsLabel Set its Text property to Hits: Make sure to include a space after the colon Rename the right Label HitsCountLabel Set its Text property to the number 0 A second HorizontalArrangement Drag two Labels into HorizontalArrangement2. Rename the left Label MissesLabel Set its Text property to Misses: Make sure to include a space after the colon Rename the right Label MissesCountLabel Set its Text property to the number 0 9/27/2018 7

8 Placing the Components 9/27/2018 8

9 Adding Behaviors to the Components How Android graphics work The screen (and the canvas) can be thought of as a grid with x (horizontal) and y(vertical) coordinates. The (x, y) coordinates of the upper-left corner are (0, 0). The x coordinate increases as you move to the right. The y coordinate increases as you move down. The x and y properties of an ImageSprite indicate where its upperleft corner is positioned. the maximum available x and y values so that Mole fits on the screen? Canvas1.Width Mole.Width Canvas1.Height Mole.Height 9/27/2018 9

10 Move the Mole 9/27/

11 Move the Mole To randomly place the mole Select an x coordinate in the range from 0 to Canvas1.Width Mole.Width Select the y coordinate to be in the range from 0 to Canvas1.Height Mole.Height We can generate a random number through the built-in procedure random integer Find it in the Math drawer Need to change the default from parameter and replace the to parameters 9/27/

12 Create the Procedure To create the procedure Drag out the to procedure block (containing do not result ) from the Procedure drawer Rename the new procedure block to MoveMole Drag "call Mole.MoveTo from the Mole drawer into the procedure, to the right of do Drag in the "random integer from" block from the Math drawer Place the plug (protrusion) on its left side into the x socket on "call Mole.MoveTo" Change the number 1 block on the from socket to 0 9/27/

13 Create the Procedure Discard the number 100. Drag in a subtraction ( ) block from the Math drawer and place it into the to socket Select the Canvas1.Width block From the Canvas1 drawer and drag it to the left side of the subtraction operations Drag the "Mole.Width" from the Mole drawer into the workspace and plug that into the right side of the subtraction block Follow a similar procedure to specify that the y coordinate a random integer in the range from 0 to Canvas1.Height Mole.Height 9/27/

14 Calling MoveMole When the app starts Use Screen1.Initialize Click the Screen1 drawer and drag out Screen1.Initialize. Click the Procedures drawer to drag out a "call MoveMole block". Every second Place it in Screen1.Initialize. Use the clock as the timer Drag out When Clock1.Timer from the Clock1 drawer. Click the Procedures drawer and drag a call MoveMole block into the Clock1.Timer block If the Mole goes too fast or slow for you You can change the TimerInterval property 9/27/

15 Keeping Score We will use the Canvas1.Touched block, It indicates the canvas was touched whether a sprite was tapped whenever the canvas is tapped check whether a sprite was tapped If Mole1 is tapped add one to the number in "HitsCountLabel.Text" otherwise, add one to MissesCountLabel.Text 9/27/

16 Keeping Score How to do it Drag out Canvas1.Touched Drag out the if-then block from the Control drawer Click its blue icon and add an else branch Place it within Canvas1.Touched Mouse over the touchedsprite event parameter on Canvas1.Touched Drag out the get touchedsprite block and place it in the test socket of if-then-else 9/27/

17 Keeping Score Drag out the set HitsCountLabel.Text from the HitsCountLabel drawer to block and put it to the right of then Click the Math drawer and drag out a plus sign (+), placing it in the to socket Click the HitsCountLabel drawer and drag the HitsCountLabel.Text block to the left of the plus sign Click the Math drawer and drag a 0 block to the right of the plus sign Click 0 and change it to 1 Repeat above mentioned steps for MissesCountLabel in the else section of the if-else block 9/27/

18 Resetting the Score Use ResetButton.Click block Sets following values to 0 HitsCountLabel.Text MissesCountLabel.Text 9/27/

19 Resetting the Score Make device to vibrate when the user taps the mole It can be implemented with the Sound1.Vibrate block 9/27/

20 The Complete Blocks 9/27/

21 Benefits Of Using Procedure It is easier to test code if it is neatly segregated from the rest of the program If there s a mistake in the code, it only needs to be fixed in one place To change the implementation, you only need to modify the code in one place Procedures can be collected into a library and used in different programs Unfortunately, this functionality is not currently supported in App Inventor Breaking code into pieces helps you think about and implement the application ( divide and conquer ) Choosing good names for procedures helps document the code, making it easier for programmers to read 9/27/