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

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

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

Tutorial # 04: “Mole Mash” INSTRUCTIONS to Build: Download files hit.mp3, miss.mp3 and mole.png at http://cs.newpaltz.edu/~phamh/avp/Homework/hw03/ 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

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

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

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

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 8

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

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

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

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

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 13

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

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: http://cs.newpaltz.edu/~phamh/avp/Homework/hw03/ VP Lecture Note by Dr. Hanh Pham 15

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

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

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

References These slides contain materials from many sources including the following: • http://www.appinventor.org http://appinventor.mit.edu “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