While previous chapters have had you create all the components at once, that’s not how developers typically work. Instead, it’s more common to create one part of a program at a time, test it, and then move on to the next part of the program. In this section, we will create the ladybug and control its movement.

As you may have noticed, ImageSprites also have Interval, Heading, and Speed properties, which we will use in this program:

For more details on image sprites, see Chapter 17.

The ladybug’s movement will be controlled by an OrientationSensor, which detects how the phone is tilted. We want use the Clock component to check the phone’s orientation every 10 milliseconds (100 times per second) and change the ladybug’s Heading (direction) accordingly. We will set this up in the Blocks Editor as follows:

Moving to the Blocks Editor, create the procedure UpdateLadybug and a Clock1.Timer block, as shown in Figure 5-3. Try typing the names of some of the blocks (such as “Clock1.Timer”) instead of dragging them out of the drawers. (Note that the operation applied to the number 100 is multiplication, indicated by an asterisk, which may be hard to see in the figure.) You do not need to create the yellow comment callouts, although you can by right-clicking a block and selecting Add Comment.

The UpdateLadybug procedure makes use of two of the OrientationSensor’s most useful properties:

Multiplying the Magnitude by 100 tells the ladybug that it should move between 0 and 100 pixels in the specified Heading (direction) whenever its TimerInterval, which you previously set to 10 milliseconds in the Component Designer, passes.

Although you can try this out on the connected phone, the ladybug’s movement might be both slower and jerkier than if you package and download the app to the phone. If, after doing that, you find the ladybug’s movement too sluggish, increase the speed multiplier. If the ladybug seems too jerky, decrease it.

Figure 5-2. Setting up the user interface in the Component Designer for animating the ladybug

Figure 5-3. Changing the ladybug’s heading and speed every 10 milliseconds

In the Designer, create a new Canvas, placing it beneath FieldCanvas and naming it EnergyCanvas. Set its Width property to “Fill parent” and its Height to 1 pixel.

In the Blocks Editor, you will need to create a variable energy with an initial value of 200 to keep track of the ladybug’s energy level. (As you may recall, we first used a variable, dotSize, in Chapter 2’s PaintPot app.) Here’s how to do it:

Figure 5-5 shows how creating the variable also added blocks to the My Definitions drawer to set or get the value of energy.

Figure 5-5. View of the My Definitions drawer showing new global energy and set global energy blocks

We want to communicate the energy level with a red bar whose length in pixels is the energy value. To do so, we could create two similar sets of blocks as follows:

However, a better alternative is to create a procedure that can draw a line of any length and of any color in FieldCanvas. To do this, we must specify two arguments, length and color, when our procedure is called, just as we needed to specify parameter values in MoleMash when we called the built-in random integer procedure. Here are the steps for creating a DrawEnergyLine procedure, which is shown in Figure 5-6.

Now that you’re getting the hang of creating your own procedures, let’s also write a DisplayEnergyLevel procedure that calls DrawEnergyLine twice, once to erase the old line (by drawing a white line all the way across the canvas) and once to display the new line, as shown in Figure 5-7.

Figure 5-7. Defining the procedure DisplayEnergyLevel

The DisplayEnergyLevel procedure consists of four lines that do the following:

Unlike the apps in previous chapters, this game has a way to end: it’s over if the ladybug fails to eat enough aphids or is eaten by the frog. In either of these cases, we want the ladybug to stop moving (which we can do by setting Ladybug.Enabled to false) and for the picture to change from a live ladybug to a dead one (which we can do by changing Ladybug.Picture to the name of the appropriate uploaded image). Create the GameOver procedure as shown in Figure 5-8.

Figure 5-8. Defining the procedure GameOver

Next, add the code outlined in red in Figure 5-9 to UpdateLadybug (which, as you may recall, is called by Clock.Timer every 10 milliseconds) to:

Figure 5-9. Second version of the procedure UpdateLadybug

The first step to add an aphid is to go back to the Designer and create another ImageSprite, being sure not to place it on top of the ladybug. It should be renamed Aphid and its properties set as follows:

Don’t worry about its X and Y properties (as long as it’s not on top of the ladybug) or its Heading property, which will be set in the Blocks Editor.

By experimenting, we found it worked best for the aphid to change directions approximately once every 50 milliseconds (5 “ticks” of Clock1). One approach to enabling this behavior would be to create a second clock with a TimerInterval of 50 milliseconds. However, we’d like you to try a different technique so you can learn about the random fraction block, which returns a random number greater than or equal to 0 and less than 1 each time it is called. Create the UpdateAphid procedure shown in Figure 5-10 and add a call to it in Clock1.Timer.

How the blocks work

Whenever the timer goes off (100 times per second), both UpdateLadybug (like before) and UpdateAphid are called. The first thing that happens in UpdateAphid is that a random fraction between 0 and 1 is generated—for example, 0.15. 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.

Figure 5-10. Adding the procedure UpdateAphid

The next step is having the ladybug “eat” the aphid when they collide. Fortunately, App Inventor provides blocks for detecting collisions between ImageSprite components, which raises the question: what should happen when the ladybug and the aphid collide? You might want to stop and think about this before reading on.

To handle what happens when the ladybug and aphid collide, let’s create a procedure, EatAphid, that does the following:

Check that your blocks match Figure 5-11. If you had other ideas of what should happen, such as sound effects, you can add those too.

Figure 5-11. Adding the procedure EatAphid

Figure 5-12 shows the code to detect collisions between the ladybug and the aphid. Note that when you add a condition to the “and” block, a new test socket appears.

Figure 5-12. Detecting and acting on collisions between the ladybug and aphid

To make the aphid eventually reappear, you should modify UpdateAphid as shown in Figure 5-13 so it changes the aphid’s direction only if it is visible. (Changing it if it’s invisible is a waste of time.) If the aphid is not visible (as in, it has been eaten recently), there is a 1 in 20 (5%) chance that it will be reenabled—in other words, made eligible to be eaten again.

Figure 5-13. Modifying UpdateAphid to make invisible aphids come back to life

The first step to having the frog chase the ladybug is returning to the Component Designer and adding a third ImageSprite—Frog—to FieldCanvas. Set its Picture property to the appropriate picture, its Interval to 10, and its Speed to 1, since it should be slower-moving than the other creatures.

Figure 5-15 shows UpdateFrog, a new procedure you should create and call from Clock1.Timer.

Figure 5-15. Making the frog move toward the ladybug

We now need to modify the collision code so that if the ladybug collides with the frog, the energy level and bar goes to 0 and the game ends, as shown in Figure 5-16.

Figure 5-16. Making the frog eat the ladybug

RestartButton.Click already has code to replace the picture of the dead ladybug with the one of the live ladybug. Now you need to add code to move the live ladybug to a random location. (Think about what would happen if you didn’t move the ladybug at the beginning of a new game. Where would it be in relation to the frog?) Figure 5-17 shows the blocks to move the ladybug when the game restarts.

Figure 5-17. The final version of RestartButton.Click