/ / Setup

You'll design the game so that two creatures move. If one is touched, the score increases by one, if the other is touched, the score decrease by 1.The phone will vibrate if either creature is touched. Pressing restart resets the score to zero.

Here are some possible creatures to use. You want a good and a bad creature and you want a transparent background and to keep the width and the height under 45 pixels, which means you will have to do some editting in Photoshop.

1. Open Photoshop and create a new document:
   
   

   ---

2. Save the image as a PNG (⌘+ OPT+SHIFT+S)
   
   

   ---

/ / Instructions

1. Go to http://appinventor.googlelabs.com and sign in.
   
   

   ---

2. Start the Designer by creating a new project.
   
   Click New on the left side, near the top of the page.
   
   

   ---

3. Enter the project name (one word, with no spaces) in the dialog box that appears, click OK.
   
   

   ---

4. The browser will open the Designer, the place where you select components for your app, and should look like this:
   
   
   
   

   ---

5. Drag the following components from the Palette onto the Viewer and assign them the following names.
   • A Canvas. Name it MyCanvas. This is the area where your creatures moves.
   • A Label. Name it ScoreLabel. It will show the score, i.e., the number of times the player has hit your creatures.
   • A Button. Name it ResetButton
   
   
   

   ---

6. Put MyCanvas on top and set its dimensions to 300 pixels wide by 300 pixels high.
   
   

   ---

7. Set the Text of ScoreLabel to Score: .
   
   

   ---

8. Set the Text of ResetButton to Reset.
   
   

   ---

9. Add a Sound component and name it Noise. You'll use Noise to make the phone vibrate when your creatures is hit, similar to the way you made the kitty meow in the first app.
   
   

   ---

10. Timers and the Clock component

    You need to arrange for your creatures to jump periodically. The Clock component helps you do this. The Clock component provides various time operations including telling you what the date is.
    
    In this game, 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 creature1Timer. Set its TimeInterval to 500 milliseconds to make your first creature move every half second. Make sure that Enabled is checked.

    
    
    

    ---

11. Drag another clock out and name it creature2Timer. Set its TimeInterval to a different number of milliseconds to make your second creature move at set intervals. Make sure that Enabled is checked.
    
    

    ---

12. Adding an Image Sprites

    To add the moving creatures you'll use sprites.

    Sprites are images that can move on the screen within a Canvas. Each sprite has
    • a speed
    • a heading
    • an interval that determines how often the sprite moves at its designated speed
    Sprites can also detect when they are touched. In whackGame, your creatures has a speed zero, so it won't move by itself. Instead, you'll be setting the creature's position each time the timer fires. Drag an ImageSprite component onto the Viewer. You'll find this component in the Animation category of the Palette.
    
    

    ---

13. Place it within MyCanvas area.
    
    

    ---

14. Set these properties for creature1 sprite:
    • Picture: Use your bad image, which you created in Photoshop.
    • Enabled: checked
    • Interval: 500
    • The interval doesn't matter here, because your creatures's speed is zero.
    • Heading: 0 The heading doesn't matter here either, because the speed is 0.
    • Speed: 0.0
    • Visible: checked
    • Width: Automatic
    • Height: Automatic
    You should see the X and Y properties already filled in. They are determined by where you placed your creature when you dragged it onto MyCanvas. Go ahead and drag your creatures some more. You should see X and Y update.
    
    

    ---

15. Repeat the same process for the good sprite. Make sure you move the second creature at a different interval.
    
    The Designer should look like this. Notice how creature1 is indented under MyCanvas in the component structure list, indicating that the sprite is a sub-component of the canvas.
    

    ---

16. Component Behavior and Event Handlers

    Now you'll specify the component behavior.

    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.
    
    To define a procedure named M oveCreature open the Blocks Editor
    
    

    ---

17. Under Built-In, open the Definition drawer. Drag out a to procedure block and change the label procedure to MoveCreature.

    Note: There are two similar blocks: procedure and procedureWithResult. Use procedure.

    The to MoveCreature block has a slot labeled do.
    
    
    

    ---

18. MoveCreature moves your creature sprite to a new random position on the canvas. Drag a Creature1.X and Creature2.X block inside the procedure. Then set it to a random number between 0 and 1 multiplied by the width of the canvas minus the width of the creature.
    
    You'll find the random fraction * and - in the Math group.
    
    Do the same for the Y.
    
    
    
    
    

    ---

19. Create a MoveCreature2 procedure for the second creature
    
    

    ---

20. Define a variable called score to hold the score (number of hits) and give it initial value 0. Drag a def variable block from definition into the work area. Rename it score.
    
    
    

    ---

21. Type 0, press return and add the number block to the score
    
    
    

    ---

22. Create an UpdateScore procedure to show the score by changing the text of the ScoreLabel. The actual contents to be shown in ScoreLabel will be the text "Score: " joined to the value of the score.
    
    
    
    

    ---

23. 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.
    
    
    

    ---

24. 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 "text".
    
    
    

    ---

25. Add a Timer

    The next step is to make your creatures keep moving. Here's where you'll use creature1Timer and creature2Timer. Clock components have an event handler called when ... Timer that triggers repeatedly at a rate determined by the TimerInterval.

    Set up creature1Timer to call MoveCreature each time the timer fires, by building the event handler like this:

    Notice how your creatures starts jumping around on the phone as soon as you define the event handler. This is an example of how things in App Inventor start happening instantaneously, as soon as you define them.

    
    
    

    ---

26. Do something similar for the second creature.
    
    

    ---

27. Add a creature Touch Handler

    The program should increment the score each time your bad creature is touched. Sprites, like canvases, respond to touch events. So create a touch event handler for creature1 that:

    1. Increments the score.
    2. Calls UpdateScore to show the new score.
    3. Makes the phone vibrate for 1/10 second (100 milliseconds).
    4. Calls MoveCreature so that your creatures moves right away, rather than waiting for the timer.
    Here's what this looks like in blocks. Go ahead and assemble the creature.Touched blocks as shown.
    
    Hint:To create a MoveCreature block, just type MoveCreature and select the block you want from the list
    
    

    ---

28. Do something similar for the good creature, except decrement the score
    
    

    ---

29. Reset the Score

    One final detail is resetting the score. That's simply a matter of making the Reset button change the score to 0 and calling UpdateScore.

    
    
    

    ---

30. Test the game, then add variations:
    • Make the game vary the speed of your creatures in response to how well the player is doing. To vary how quickly your creatures moves, you'll need to change the creatureTimer's Interval property.
    • Keep track of when the player hits your creatures and when the player misses the creature, and show a score with both hits and misses. To do this, you'll need do define touched handlers both for creature, same as now, and for MyCanvas. One subtle issue, if the player touches your creatures, does that also count as a touch for the Canvas? The answer is yes. Both touch events will register.

/ /

/ /