Day 6: MoleMash / Timers / Procedures

What We're Going to Learn Today

In the game MoleMash, a mole pops up at random positions on a playing field, and the player scores points by hitting the mole before it goes back in its hole and pops back up somewhere else. This tutorial shows how to build MoleMash as an example of a simple game that uses animation requiring a procedure that you will write.

Getting Started

• 1. Go to the MIT App Inventor and log in using your Google account

  2. Click on "My Projects" on the top and then press the New button.

  3. Name the new project Day6

  4. Click on Day6 to open it

Connect Your Emulator

• 1. Select Connect from the menu bar at the top of the page and click on Emulator to launch it

  2. Once the Emulator is running go on to the next step

Building the App

Several components should be familiar from previous tutorials:

• • A Canvas renamed "MyCanvas". This is the area where the mole moves.

  • Two Labels renamed "ScoreLabel1" that is just a label and "ScoreLabel2" that changes and shows the score, i.e., the number of times the player has hit the mole. We want these labels to be side by side.

  • A Button renamed "ResetButton".

Drag these components from the Palette onto the Viewer and assign their names.

• 1. Put MyCanvas on top and set its dimensions to 300 pixels wide by 300 pixels high.

  2. Put a HorizonalArrangement beneath the canvas. Set the width to "Fill Parent."

  3. Set the Text of ScoreLabel1 to "Score:" and the Text of ScoreLabel2 to "..." and put both labels in the HorizontalArrangement.

  4. Place the ResetButton below the HorizontalArrangement. Set the Text of the ResetButton to "Reset".

  5. Add a Sound component and name it "Noise". Download the squeak.mp3 file to your computer and upload it to the Noise "Source."

Timers and the Clock component

You need to arrange for the mole to jump periodically, and you'll do this with the aid of a Clock component. The Clock component deals with time, like telling you what the date is. Here, you'll use the component as a timer that fires. The firing interval is determined by the Clock's TimerInterval property.

• 1. Drag out a Clock component from the User Interface; it will go into the non-visible components area. Rename it "MoleTimer". Leave the TimeInterval at 1000 milliseconds to make the mole move every second. If you decide to change the TimeInterval later, you can reset it.

  2. Make sure that TimerEnabled is checked.

Adding an Image Sprite and a Noise

To add the moving mole we'll use a sprite.

Sprites are images that can move on the screen within a Canvas. Each sprite has a Speed and a Heading, and also an Interval that determines how often the sprite moves at its designated speed. Sprites can also detect when they are touched. In MoleMash, the mole has a speed zero, so it won't move by itself. Instead, you'll be setting the mole's position each time the timer fires. Drag an ImageSprite component onto MyCanvas and rename it MoleSprite. You'll find this component in the Drawing and Animation category of the Palette. Set these properties for the MoleSprite:

• • Picture: Download the mole.png to your computer and upload it to the MoleSprite "Picture."

  • Enabled: checked

  • Interval: 500 (The interval doesn't matter here, because the mole's speed is zero: it's not moving by itself.)

  • Heading: 0 The heading doesn't matter here either, because the speed is 0.

  • Speed: 0.0

  • Visible: checked

  • Width: Automatic

  • Height: Automatic

You should see the x and y properties already filled in. They were determined by where you placed the mole when you dragged it onto MyCanvas.

Go ahead and drag the mole some more on MyCanvas. You should see x and y change. You should also see the mole and see it changing position on your Emulator. You've now specified all the components.

The Designer should look like this. Notice how MoleSprite is indented under MyCanvas in the component structure list, indicating that the sprite is a sub-component of the canvas.

Getting the Mole to Move: Component Behavior and Event Handlers

Now you'll specify the mole's behavior. Previously, when you've wanted to make a component do something, you've looked for a block by selecting the component in the blocks editor. For example, you might select the MoleSprite to find a block that makes it move randomly. Remember that in this game a mole pops up at random positions on a playing field, and the player scores points by hitting the mole before it goes back in its hole and pops back up somewhere else. The blocks available to the MoleSprite don't include a random movement block, so we need to design our own procedure blocks to do this.

A procedure is a sequence of statements that you can refer to all at once as a single command. If you have a sequence that you need to use more than once in a program, you can define that as a procedure, and then you don't have to repeat the sequence each time you use it. Procedures in App Inventor can take arguments (variables) and return values.

You will write two procedures: MoveMole and UpdateScore. Let's start with MoveMole.

1. In the Blocks Editor, under Built-In, open Procedures. Drag out a to procedure do block and change the label "procedure" to "MoveMole". (There are two similar blocks. Be sure to use the to procedure do block.)

2. The MoleSprite's position on the canvas is defined by x and y coordinates. We want the x and y coordinates to change randomly. Snap the set MoleSprite.X to block into the procedure block. Drag the set MoleSprite.Y to block as below.

1. To get the MoleSprite to move all over the canvas in a random way, you need to use some math. The space available for MoleSprite to move in the x direction is the width of MyCanvas minus the width of MoleSprite and in the y direction the height of MyCanvas minus the height of MoleSprite. Since you want MoleSprite to move randomly in both directions, you need a block that introduces a random multiplier. In the math section, you will find blocks that allow you to create a mathematical function to do this. Open the math section and create two blocks that looks like this:

1. To set the set MoleSprite.X to block to a new randomly chosen x, open the MyCanvas section and select the MyCanvas.Width block. Insert the MyCanvas.Width block into the first slot. Open the MoleSprite section and select the MoleSprite.Width block to go in the second slot.

1. Do the same for the set MoleSprite.Y to block by selecting the height blocks then place the complete math function blocks in the to MoveMole do procedure block.

You've now completed the MoveMole procedure block and if you click on Procedures, you'll see a third block. Drag out the call MoveMole procedure block.

You'll notice it has a notch in the top left corner indicating that it can't stand alone and needs to be inserted into an event handler. Event handlers are blocks associated with components like buttons and timers. You want to program the mole to jump around the screen every half second (500 milliseconds). Remember that you set the timer to fire with a TimerInterval of 500.

1. Click the MoleTimer and drag out the when MoleTimer.Timer do event handler block.

2. Snap the call MoveMole procedure block into the event handler block.

3. Look at your Emulator and see what happens on the screen.

4. You should see the mole moving randomly around the screen at a fixed time interval. If you want to change the time interval, go back to the Designer and set the TimerInterval to be faster or slower.

Add a Mole Touch Handler

Sprites, like Buttons and Canvases, respond to touch events. In Mole Mash, you want the app to make a noise when the mole is touched.

• 1. Click on MoleSprite and drag out the when MoleSprite.Touched do block.

  2. Click on Noise, drag out the call Noise.Play block and insert it into the when MoleSprite.Touched do block.

  3. Look at your Emulator and see what happens when you click on the mole.

Since this is a game, you would like to be able to keep score. The program should increment the score and make a noise each time the mole is touched. You need to define a variable called score to hold the score (number of hits) and give it an initial value of 0. Your score will show in ScoreLabel2.

• 1. Click on the variables and drag out an initialize global "Name" to block. Change "Name" to "Score" and set the initial score to 0 by clicking on Math, dragging out a 0 block and snapping it in place.

• 1. Go to ScoreLabel2 and drag out the set ScoreLabel2.Text to block. You want your score to increase by 1 each time the MoleSprite is touched, so you need a Math block. Click on Math and drag out an addition block and click it into the set ScoreLabel2.Text to block.

  2. Click on Variables, drag out a get block, click the down arrow, select global Score, and snap that into the addition block. Complete the addition block by adding a "1" block. Snap this set of blocks into your when MoleSprite.Touched do block.

• 1. Look at these blocks closely. If you check your Emulator, you will see that your score does not increase beyond 1. Your global Score is defined as 0, and you have not redefined it. You want your global Score to begin at 0, but it needs to be updated each time the MoleSprite is touched and 1 is added. You need to write a procedure to do this.

  2. Remember when you create a procedure you begin with a to "Procedure" do block. Call the procedure "UpdateScore."

  3. Pull the set ScoreLabel2.Text to block with the attached math block out of the when MoleSprite.Touched do block and snap it into your new procedure block.

  4. To update the global Score, you want to set the global Score to the ScoreLabel2.Text after 1 has been added to the initial global Score. Click on Variables, pull out the set global Score to block, add a ScoreLabel2.Text block and snap these into the UpdateScore procedure block. In this procedure, because the set global Score to block comes after the set ScoreLabel2.Text and math blocks, the new global score will be the old global score plus 1. The new UpdateScore procedure block will look like this.

• 1. Now that you've created this procedure, you can find the call UpdateScore block in Procedures and snap it into the when MoleSprite.Touched do block.

  2. Try this out on the Emulator and make sure that you hear a noise and the score updates each time you click on the MoleSprite.

Getting the Score to Reset

• 1. The last thing you need to do is to get your score to reset. Click on ResetButton and drag out the when ResetButton.Click do block. You want the global Score and ScoreLabel2.Text to reset to 0.

  2. Drag out the appropriate blocks and snap them together as shown.

Now your Mole Mash game should be working...try it out on the Emulator and see.

Challenge Stuff

Here are some things to try.

Regular Challenge: Make difficulty buttons "easy" and "hard" that make the mole move slower or faster.

Super Hard Challenge: Add a way to keep track of the "high score."

Developer's Challenge: Add background music that is appropriate for this type of game. Add the ability to toggle on and off music and sound effects.