• On the app inventor page create a new project.
     
    The project the name should be "AnimalMash". Click OK.

    The project is now added and you will be taken to the designer screen.
     
    Step 1: Build the Interface of the game.
     
    The user interface will need to the following:
     
    o A canvas
        o 12 (or more) image sprites. 6 (or more) of these sprites will become the unmoving the "cartoon holes in the ground." You may create/edit your images in Photoshop. The "cartoon holes" work best when they are less than 100 pixels wide. You use one of the "holes" from the following samples:
     
     https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRMtco6rPJE16jNjUZVk6dUu2zf28vmhX9cGfcGhXcLu12prrpw
     
     
     http://media.gettyimages.com/vectors/cartoon-image-of-a-hole-in-the-ground-with-a-pile-of-dirt-vector-id165807918?s=170667a
     
     
    https://www.colourbox.com/preview/3960077-hole.jpg
     
           o create 1 animal that will pop up from underground
          o HorizontalArrangement
    o 2 Labels
    o 2 Clocks (which will allow you to create the 2 Timers you will need)
      o A Sound of your animal
     
    Your Animal Mashem game will eventually look something like this:
     
     screenshot
    Step 2: Rename your Screen to ‘Mashem'.

    From the the basic Palette, drag a Canvas onto your screen. Set the Width to 320 pixels, set the height to 320 pixels. 
     
     
    Step 3: Add the images for the holes and the animal to the canvas. To do this go to the components panel, under Media click on upload new. Select the animal image and click OK.
     
    Repeat this to add the image for the hole. You should now see the 2 images available under Media in the components panel.
     
     
    Step 4: From the Palette Panel, under Animation, drag 5 image sprites onto the canvas. These 5 image sprites will be used for the holes. Rename these image sprites to ‘Hole1’, ‘Hole2’, ‘Hole3’, ‘Hole4’ and ‘Hole5’.
     
    In the properties panel, under Picture, select ‘hole.png’. 
     
    Step 5: Drag over another image sprite but this time rename it ‘Animal’.
     
    In the Properties Panel, under picture select the "animal" picture you uploaded.
     
    Set the Z value to ‘2’. This will allow the animal to appear in front of the hole.
     
    Repeat so that you have a sprite with your animal image at each "hole in he ground. 
     
    Step 6: From the Palette Panel, under ScreenArrangement, drag over a HorizontalArrangement and place this below the canvas.
     
    This will hold the components to hold the score.
     
     
    Step 7: From the Palette Panel drag over a label and place it inside the HorizontalArrangement.
     
    Rename this label ‘ScoreTextLabel’.
     
    Set the Text Property to ‘Score:’.
     
     
    Step 8: Drag over another label and place it inside the HorizontalArrangement, to the right of ‘ScoreTextLabel’.
     
    Rename this label ‘ScoreValueLabel’.
     
    Set the Text Property to ‘0’.
     
    Set the width to ‘Fill parent’
     
     
     
    Step 9: From the Palette Panel drag a Clock element to the screen.
     
    This will appear below the screen, under Non-Visible Components.
     
    The Clock component provides various operations dealing with time, like telling you what the date is. Here, you'll use the component as a timer that fires at regular internals. The firing interval is determined by the Clock 's TimerInterval property. 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. Make sure that TimerEnabled is checked. 
     
    From the Media section in the Palette Panel, drag over a sound element.
    Again this will appear below the Screen, under Non-Visible Components.
     
     
     
    Step 10: Add the functionality to the Interface
    Once the interface is ready we can set the functionality of the components. What we want to happen can be described in the following steps:
    1. The animal will randomly appear in the holes
     2. The user will click on the mole and if they hit the mole their score will be incremented by 1
     

    Component Behavior and Event Handlers

    Now you'll specify the component behavior. This introduces some new App Inventor ideas. The first is the idea of a procedure. 

    A procedure is a sequence of statements that you can refer to all at once as single command. If you have a sequence 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. Procedures in App Inventor can take arguments and return values. This tutorial covers only the simplest case: procedures that take no arguments and return no values.
     
     You will need to define a variable called score to hold the score (number of hits) and give it initial value 0. Also define a procedureUpdateScore that shows the score in ScoreLabel. The actual contents to be shown in 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 " ".
    • 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.
     

    Define Procedures

    Define two to do procedures:

    • Name the one "UpdateScore" - it will change the text of the ScoreLabel
    • Name the other "initializeGame" and call the "initializeGame" procedure in the "Start" & "Reset" buttons.

    • Add a Timer

    You will need to use a Timer to make the animal appear at different "holes". 

    Clock components have an event handler called when ... Timer that triggers repeatedly at a rate determined by the TimerInterval.
    Set up AnimalTimer to call MoveAnimal each time the timer fires.
     
     initialize timer

    blocks  


    • Create another procedure named "MoveAnimal - it will move the animal sprite to a new random position on the canvas.

    • The to MoveAnimal 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 animal'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.

     blocks
     

      

    Add a AnimalTouch Handlers

     

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

    1. Plays the animal sound.
    2. Increments the score.
    3. Calls UpdateScore to show the new score.
    4. Hides the animal on the press rather than waiting for the timer.

     
     blocks