App Inventor - Lesson 4


screenshotBuild the Space Shooter Game

Create a 2-D arcade game for shooting targets --in this case, flying iPhones. You'll learn how to animate objects with Clock Timer event and react to events like two objects colliding

These lessons come from USF Professor David Wolber's AppInventor.org - A great resource for learning App Inventor.

They are copied here simply because YouTube is blocked at our school.

Steps: (watch the video for each lesson and follow along)


 


Part 1: Add a canvas and bullet, and have bullet shoot up

Drag two ImageSprites into the Canvas and set their Image property to picture files. Then add a Clock component and move the bullet on the Timer event.

Watch the video and follow along. Any code/settings can be also found below the video. 

> Go to http://beta.appinventor.mit.edu/ to begin.

 

In this step you will need two files (also available on S:\Shared\Students\Tech Ed\App Inventor\Lessons\Shooter). Click each link to save the file to your desktop.
spacecraft.png  iphone.png 

 

 


Part 2: Make it so the bullet only fires when shooter is touched

On the Shooter.Touched, enable the Clock.TimerEnabled

Watch the video and follow along. Any code/settings can be also found below the video. 

 

 


Part 3: Make it so the bullet only appears when shot

Set the visibility of bullet so it appears on Shooter.Touched and disappears when hits top edge.

Watch the video and follow along. Any code/settings can be also found below the video.

 

 


Part 4: Let the user move the shooter by clicking left/right buttons

Add two buttons and move the shooter appropriately when each is clicked.

Watch the video and follow along. Any code/settings can be also found below the video.

 

 


Part 5: Add a target (iPhone) and give a point when hit

Drag in another ImageSprite and set up a label for score. On the CollidedWith event, add a point

Watch the video and follow along. Any code/settings can be also found below the video.

 

 


Part 6: Make the target move continuously and disappear bullet on contact

Code the Target.EdgeReached event and make the bullet invisible as soon as it hits target.

Watch the video and follow along. Any code/settings can be also found below the video.

 

 


Challenges

Do after completing the videos:

  1. MANDATORY (-30 if missing): Add a second iPhone target moving the opposite direction. Make sure your score is added if you hit it.
    Hint: The EdgeReached event for the second target should be different than the first. Where do you want to move it when it hits the edge?
  2. OPTIONAL: Make either target shoot back at you. Subtract score on a hit
  3. OPTIONAL: Use an OrientationSensor (in the sensor group) to control the shooter sprite using the tilt of the tablet. You will want to use the OrientationChanged event. The Roll parameter is less than zero if it is tilted to the left and greater than zero if it is tilted to the right. Maybe make the ship move right if the roll is > than 10 and move to the left if the roll is < -10.
  4. OPTIONAL: If you really want to get fancy, make the ship fire if you tilt the tablet forward. The Pitch parameter is the tilt forward and back (positive is forward). This one is a bit tricky - ask for help.

 

For more information on moving a sprite by tilting your device, see this video.