ACS-1805 Introduction to Programming

Transcription

1 ACS-1805 Introduction to Programming Chapter 03: MoleMash

2 What You ll Learn 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

3 What You ll Need Logon to App Inventor Start a new project named MoleMash Download the picture of a mole from png

4 MoleMash A game inspired by the arcade classic Whac-A-Mole

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

6 Designing the Components

7 Placing the Components Finish placing the components in the Designer o Canvas Set Height: 300 pixels Set Width: Fill Parent o ImageSprite component Place it anywhere on Canvas1. Change its name to Mole. Set its Picture property to mole.png. o Button component Place it beneath Canvas1. Rename it ResetButton. Set its Text property to Reset. o Clock component From "Sensor" drawer. It will appear in the Non-visible components section. o Sound component

8 Placing the Components o A HorizontalArrangement component o 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 o A second HorizontalArrangement o 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 o Rename the right Label MissesCountLabel Set its Text property to the number

9 Placing the Components

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

11 Move the Mole

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

13 Create the Procedure To create the procedure o Drag out the to procedure block (containing do not result ) from the Procedure drawer o Rename the new procedure block to MoveMole o Drag call Mole.MoveTo 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

14 Create the Procedure o 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 o Follow a similar procedure to specify that the y coordinate a random integer in the range from 0 to Canvas1.Height Mole.Height

15 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 o 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

16 Calling MoveMole When the app starts o Use When Screen1.Initialize block Click the Screen1 drawer and drag out when Screen1.Initialize. Click the Procedures drawer to drag out a call MoveMole block. Place it in Screen1.Initialize. Every second o 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 o If the Mole goes too fast or slow for you You can change the TimerInterval property

17 Keeping Score We will use the Canvas1.Touched block, oit indicates the canvas was touched whether a sprite was tapped owhenever 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

18 Keeping Score How to do it odrag out when Canvas1.Touched odrag out the if-then block from the Control drawer Click its blue icon and add an else branch Place it within when Canvas1.Touched omouse over the touchedanysprite event parameter on Canvas1.Touched Drag out the get touchedanysprite block and place it in the test socket of if-then-else

19 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 o Repeat above mentioned steps for MissesCountLabel in the else section of the if-else block

20 Resetting the Score Use ResetButton.Click block o Sets following values to 0 HitsCountLabel.Text MissesCountLabel.Text

21 Vibrating when Mole touched Make device to vibrate when the user taps the mole o It can be implemented with the Sound1.Vibrate block

22 The Complete Blocks