Mole Masher

Create The User Interface

We are going to create an app that lets the user play whack-a-mole. Your teacher will show the class the screencast video for creating the user interface. You can watch this again yourself at any time:

Create The Program Blocks

In the mole masher game, there are two main things that the program will need to do

1. Handle when the user touches the mole
2. Move the mole

There will be a number of events which will be part of these two things. We will need algorithms for each as follows:

To Update Score Display (procedure)

1. set the text of the score label to “Score: “ + the score

To Move Mole (procedure)

1. set the mole’s X co-ordinate to a random place along the canvas
2. set the mole’s Y co-ordinate to a random place down the canvas

When the start button is clicked

1. set the score to zero
2. call Update Score Display procedure

When the mole is touched

1. increase the score
2. call Update Score Display procedure
3. make the phone vibrate
4. call Move Mole procedure

Every second (1000 millisecs) during the game

1. call Move Mole procedure

These algorithms introduce a new idea: procedures. We can create our own blocks and then reuse them many times.

Procedures are useful as they make it quicker to code a program and we are less likely to make errors. Any change we make to the procedure definition will be applied anywhere the procedure is called. If the same blocks are repeated in a program, we only need to code the procedure once rather than many times.

Your teacher will show the class the screencast video for creating the program blocks. This will also show you how to define and call procedures. You can watch this again yourself at any time:

Extension Task 1

Adapt your program to display the number of misses as well as the number of hits.

Extension Task 2

Display a “GAME OVER” sprite on the canvas when the misses reach a certain number.

Hint: Create a GameOver procedure for this.

Extension Task 3

You will have noticed that some code is shown with small comments beside it in speech bubbles. These are called comments.

Comments are used to explain what code is doing. This is useful if you’re working as part of a team, so that other programmers can understand your code – or even for yourself, when you try to update your app this time next year!

Programs should always include good comments like this.

In App Inventor, right-click on a code block to add a comment. Once you have done this, click inside the speech bubble to add a comment. You can show/hide comments by clicking the blue question mark icon on a code block which has a comment.

Go back to your code and add comments to it.