Learning Target: I can understand what a procedure is and how to use it when creating an app.
Concepts/ Vocab in this Lesson: procedure, call, sub-task, comment
Task 1: Creating the Interface
Watch screencast MoleMasher1. This will take you through creating the interface- the screen design and components- needed for the game. (You may find the images & sounds in 'AI2 Images & Sounds' folder on the Google Classroom Stream.) Don't forget to title this app and every app from here on out the name of the app by first name last initial.
Important: The mole will come in rather large. Change the image to 50 pixels by 50 pixels. If it no longer appears on the screen, check to make sure its x and y coordinates are positive. Change them to 0,0. In addition, your 'Score' button will have text higher than the label. That is OK. Lastly, when you are done designing and programming everything, set the canvas to 'fill parent' for both width and height so you can play the game on the entire screen.
Task 2: Designing the Solution
Let's consider the main steps we need to code in our game. There are two main stages:
1) touching the mole
2) moving the mole
We'll now design our code by creating an algorithm for each stage.
Watch screencast MoleMasher2 to see how to build the code from the algorithm above.
In this lesson, we saw how lines of code can be grouped together into a procedure (sometimes referred to as a function). Creating a procedure is like creating a new command that will be repeated while programming.
Procedures let us:
1) break down a problem into smaller problems and solve each of those separately. We can then concentrate on just one small "sub-program" at a time.
2) create a single piece of code that we can use (or call) as often as we need to within a program. This saves us from "reinventing the wheel" by entering the same code lots of times.
As a general rule, whenever you have a clear "sub-task," or smaller tasks that make up the larger task in your program, especially one that you foresee using over and over again, you should create a procedure to do this. It will make your life easier.
When it tells you to click on the question mark to add a comment, just right click on the block and choose 'add comment.'
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 black question mark icon on a code block which has a comment.
Remember: comments are there to help you and can save hours of frustration when you're trying to understand another programmer's (or even your own) code!
Task 3: Testing and Screencasting your App
Make sure you watch your video back and ensure you can hear the mole squeak.
Task 4: Adding to Your Reflection Blog
Go to your Reflection Blog to the entry "Procedure." Explain what a procedure is and why it is so important in programming.
Extension Activities:
1. Adapt your program to display the number of misses as well as the number of hits.
2. Display a "GAME OVER" sprite on the canvas when the misses reach a certain number.
Hint: Create a GameOver procedure for this.