Day 6: MoleMash / Timers

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 jumps away. This tutorial shows how to build MoleMash as an example of a simple game that uses animation.

This tutorial was written by Google so its language will be different than our first tutorials. This tutorial was written for adults. PLEASE go slowly and don't skip directions. Let a teacher know if you need help.

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
5. Open an emulator or connect your phone to app inventor using the MIT Companion App
6. Download this picture of a mole

Building the App

Several components should be familiar from previous tutorials:

• A Canvas named "MyCanvas". This is the area where the mole moves.
• A Label named "ScoreLabel" that shows the score, i.e., the number of times the player has hit the mole.
• A Button named "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. Set the Text of ScoreLabel to "Score: ---".
3. Set the Text of ResetButton to "Reset".
4. Add a Sound component and name it "Noise".

Timers and the Clock component

You need to arrange for the mole to jump periodically, and you'll do this with 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; it will go into the non-visible components area. Name it "MoleTimer". Set its TimeInterval to 500 milliseconds to make the mole move every half second.
2. Make sure that Enabled is checked.

Adding an Image Sprite

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 the Viewer. You'll find this component in the Drawing and Animation category of the Palette. Place it within MyCanvas area. Set these properties for the Mole sprite:

• Picture: Use mole.png, which you downloaded to your computer at the beginning of this tutorial.
• 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. You should see x and y change.

You should also see the mole on your connected phone, and the mole moving around on the phone as you drag it around in the Designer. You've now specified all the components.

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

Component Behavior and Event Handlers

We need to learn to make a procedure.

A procedure is a group of blocks that you can run every time you call it.

If you have a group of blocks 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.

Take a look at this example.

When you click Button1 what will it do?

When you click Button2 what will it do?

Define Procedures

Make two procedures:

• MoveMole moves the Mole sprite to a new random position on the canvas.
• UpdateScore shows the score, by changing the text of the ScoreLabel

Start with MoveMole:

Drag out a procedure block and change the name from "procedure" to "MoveMole".

The MoveMole block has a slot labeled "do". That's where you put the statements for the procedure. In this case there will be two statements: one to set the mole's x position and one to set its y position. In each case, you'll set the position to be a random fraction, between 0 and 1, of the difference between the size of the canvas and the size of the mole. You create that value using blocks for random fraction and multiplication and subtraction. You can find these in the Math drawer.

• Build the MoveMole procedure. The completed definition should look like this:

• Look how the blocks connect together: the first statement uses the Mole.X gets block to set mole's horizontal position. The value plugged into the block's socket is the result of multiplying:
  1. The result of the call random fraction block, which a value between 0 and 1
  2. The result of subtracting the mole's width from the canvas width
     • The vertical position is handled similarly.

Score

Variables hold a number or text. You make a variable by dragging variable out of "Variables."

With MoveMole done, the next step is to define a variable called score to hold the score (number of hits) and give it a starting value 0.

Also make a procedure called UpdateScore that shows the score in ScoreLabel.

ScoreLabel will be the text "Score: " joined to the value of score.

• To create the "Score: " part of the label, drag out a text block from the Text drawer. Change the block to read "Score: " rather than "text".
• Use a join block to attach this to a block that gives the value of the score variable. You can find the join block in the Text drawer.

Here's how score and UpdateScore should look:

Add a Timer

The next step is to make the mole keep moving. Here's where you'll use MoleTimer.Clock components have an event handler called when ... Timer that triggers repeatedly.

Set up MoleTimer to call MoveMole each time the timer fires, by building the event handler like this:

Add a Mole Touch Handler

The program should increment the score each time the mole is touched. Sprites, like canvases, respond to touch events. So create a touch event handler for Mole that:

1. Increments the score.
2. Calls UpdateScore to show the new score.
3. Makes the phone vibrate for 1/10 second (100 milliseconds).
4. Calls MoveMole so that the mole moves right away, rather than waiting for the timer.

Here's what this looks like in blocks. Go ahead and assemble the when Mole.Touched blocks as shown.

Here's a tip: You can use typeblocking: typing to quickly create blocks.

• To create a value block containing 100, just type 100 and press return.
• To create a MoveMole block, just type MoveMole and select the block you want from the list

The program should increase the score each time the mole is touched. Here's what this looks like in blocks. Go ahead and assemble the when Mole.Touched blocks as shown.

Reset the Score

One final detail is resetting the score. That's simply a matter of making the ResetButton change the score to 0 and calling UpdateScore.

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished:

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."

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

This tutorial was modified for middle school students from one of the original app inventor tutorials

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.