1. Procedures, Simple Expressions
Visual Programming
week # 04
Animation: ImageSprite, Clock
Procedures, Simple Expressions

2. Outline 1. Tutorial # 04: Mash Mole 2. ImageSprite, Clock 3. 3.
Procedures 4.
Animation 5.
Homework # 03
VP Lecture Note by Dr. Hanh Pham 2

3. Tutorial # 04: “Mole Mash”
TASK:
Build 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.
The PROBLEM (requirements): 
display a Mole picture and make it move randomly
user can try to touch/click on the Mole
2 labels showing 2 counts:
 Hit count: if user hit the count increases
 Miss count: if user miss the count increases
have a button to reset 2 counters to 0 
VP Lecture Note by Dr. Hanh Pham 3

4. Tutorial # 04: “Mole Mash”
INSTRUCTIONS to Build:
Download files hit.mp3, miss.mp3 and mole.png at 1)
Create a new project called “t4_MoleMash” 2)
In DESIGN window: •
add Canvas, set Width=300, Height=300 •
under Animation: get “Image Sprite” and drag
it ONTO Canvas. Set Interval=500
4 labels in “HIT=1 MISS=3”
1 button for RESET
1 sound for noise •
VP Lecture Note by Dr. Hanh Pham 4

5. VP Lecture Note by Dr. Hanh Pham
Tutorial # 04: “Mole Mash”
The DESIGN window should look like this:
VP Lecture Note by Dr. Hanh Pham 5

6. Tutorial # 04: “Mole Mash” & PROCEDURE
In BLOCK EDITOR window:
1) Create an Event Handler for when the RESET
button is TOUCHED:
VP Lecture Note by Dr. Hanh Pham 6

7. Tutorial # 04: “Mole Mash” & PROCEDURE
2) Create a PROCEDURE called MoveMole: •
Under “Built-in”, and “Procedure”: get FIRST BLOCK and change name to MoveMole •
To CALL/USE this procedure: go BACK to under “Built-in”, and “Procedure”: there appear the THIRD BLOCK
VP Lecture Note by Dr. Hanh Pham 7

8. Tutorial # 04: “Mole Mash” & PROCEDURE•
Click on “MATH”, then get 2 “Random Integer” blocks and change to get this: •
Under “Built-in”, “Screen1” and “MyCanvas”, click on “MOLE to get the “Call MOLE.MOVE to” block •
Then, we have these blocks:
VP Lecture Note by Dr. Hanh Pham

9. Tutorial # 04: “Mole Mash” & & PROCEDURE•
Then, Plug them to get this: •
Now we have a PROCEDURE called MoveMole: and can CALL/USE this procedure: go BACK to under “Built-in”, and “Procedure”: there appear the THIRD BLOCK
VP Lecture Note by Dr. Hanh Pham 9

10. Tutorial # 04: “Mole Mash” & PROCEDURE
In BLOCK EDITOR window:
3) Create an Event Handler for the START of the game: •
Under “MyBlocks”, “Screen1”, get “Screen1.Initialize”: •
Under “MyBlocks”, “MyDefinition”, get “call MoveMole”:
4) Create an Event Handler for the MOVING the MOLE every second: •
Under “MyBlocks”, “MoleTimer”, get “MoleTimer.Mole”
Then , CALL procedure MoveMole (repeat above)
VP Lecture Note by Dr. Hanh Pham 10

11. Tutorial # 04: “Mole Mash”
5) Create an Event Handler for when the CANVAS is TOUCHED: •
Get “MyCanvas.Touched”
Under “Built-In”, “Control”, get “If-Then”
VP Lecture Note by Dr. Hanh Pham 11

12. Tutorial # 04: “Mole Mash”
3) Create an Event Handler for when the CANVAS is TOUCHED: •
Conditional Statement (ask a question) IF-ELSE: •
Under “MyBlocks”, “MyDefinition”, get “value touchedSprite” and plug it to “test”
Under “MyBlocks”, “HitCountLabel”, get
“then-do”
“HitCountLabel.Text” and plug it to
VP Lecture Note by Dr. Hanh Pham 12

13. Tutorial # 04: “Mole Mash”•
WHEN the user touch hits the Molle Image:
We want to do: HitCount = HitCount + 1 •
Left Click and choose “MATH”, then “+” Under “MyBlocks”, “HitCountLabel” & get
HitCountLabel.Text and a number “1”: •
Plug them together we’ll have:
VP Lecture Note by Dr. Hanh Pham

14. Tutorial # 04: “Mole Mash”
The BLOCK EDITOR window look like this:
VP Lecture Note by Dr. Hanh Pham

15. Homework # 03: “Catch Me !” The PROBLEM(requirements):
Your APP must have a GUI as shown in this picture:
 have an image that moves around randomly
 user can click on the canvas (height=250). If it hits the image then increase the hit count and play a HIT
sound. If it misses the image then increase the miss count and play a MISS sound. In both cases recalculate the hit% and display it: Hit%=100*hit/(hit+miss).
the hit% hit+miss
 has a textbox so that the user can type a text in
 a button to print that text on the canvas and also speak the text
 have a button to let user to wipe the canvas and also clear the textbox
You can use the media files at:
VP Lecture Note by Dr. Hanh Pham 15

16. Homework # 03: “Catch Me !” In DESIGN window add these components:
VP Lecture Note by Dr. Hanh Pham

17. Homework # 03: “Catch Me !”
In Block EDITOR window ADD these blocks and connections:
VP Lecture Note by Dr. Hanh Pham

18. Homework # 03: “Catch Me !”
Change font SIZE and COLOR in Block EDITOR window :
VP Lecture Note by Dr. Hanh Pham

19. References
These slides contain materials from many sources including the following: •
“App Inventor: Create Your Own Android Apps” by David Wolber, Hal
Abelson, Ellen Spertus, Liz Looney, Publisher: O'Reilly
App Inventor for Android: Build Your Own Apps - No Experience Required, Jason Tyle •
VP Lecture Note by Dr. Hanh Pham 18