Apps for Appalachia: Exploring Concepts from Ladybug Chase

Exploring Concepts from Ladybug Chase

Today’s in-class exploration will cover:

  • Assorted aspects of animation events,
  • The use of functions,
  • The use of lists, and
  • Using “any” functions (eg. blocks for “Any Ball”).

I considered using Ladybug Chase, and it may still have been a good idea. However, I had an Even Better Idea, which probably means you’re in trouble.

Please capture answers to your questions in a Word document for submission later. You should definitely discuss the questions with your partner when they come up… they sometimes are encouraging you to explore ideas before you write the code that illustrates the concept.

Getting Started

Download the starter file. Upload it to App Inventor. You’re welcome to work with a partner, as long as you’re communicating back-and-forth the whole time. Take turns at the keyboard, etc.

Animating

In the starter file, first experiment with values found in the “Initialize” handler. Change the interval and speed values to see what effect they have on the Red ball. To force your device to update, flip over to the blocks view, and move the Red ball a little bit… this will cause App Inventor to re-run the Initialize sequence.

Question 1: Given an interval and a speed, can you calculate the number of pixels a ball will move in a second?

Question 2: How many animation frames per second are there for a ball that has an interval set to 10? 50? 100?

Question 3: If you didn’t have a Bounce procedure given to you, how would you go about calculating the new heading of a ball that hits the edge? (If you draw a diagram, feel free to snap a pic of it and include it in the Word document. You might come back to this question later.)

Adding the Green Ball

You could, at this point, copy-paste a lot of your code to add in the Green ball. however, that sounds awful. Computer scientists are lazier than that… copy-paste means lots of work if we have to change things later. (For example, if we want to add a Gray ball.)

Let’s start a series of changes that will make the Green ball easy to handle in our code. This represents a strategy you can use in all of your apps.

Create a List of Bouncy Balls

  1. Declare a global variable called bouncies. It should be an empty list. (You’ll find the blocks you need under Variables and Lists, respectively.)

  2. In your Initialize block, add some items to the list. In particular, add the RedBall and GreenBall. You can find those blocks at the bottom of the Red and Green ball code options.

  3. Now, we’re going to do something to every item in that list. So, get a for block from the Control section, and get the one that says “for each item in list.” You’ll want to be iterating (a fancy way of saying “looping”) through the list bouncies.

    Question 4: What does the list bouncies contain?

    Question 5: What kind of information will be in the variable item every time we go through the loop?

  4. Rename the loop variable item so it is called aBall. This helps us remember that it is a single ball.

  5. At the bottom of the blocks selection area is a space called “Any Component.” Find the “Any Ball” area, and grab the Set Ball.Speed block. This has two options: of component and to. We want the component to be the item. We want the value we set things to to be a random integer between 1 and 4.

  6. Do the same thing for the interval; it should be a random integer between 10 and 20.

  7. Do the same thing for the heading; it should be a random integer between 0 and 360.

A Helper Procedure

I don’t want too much code to be duplicated in this program, so I would really like a helper procedure.

  1. Create a procedure called updateOneBall. It should have trhee parameters, aBall, speed, and heading.

  2. In the procedure, use the generic Ball blocks for updating the speed and heading. They should use your parameter aBall for the ball, and the parameters speed and heading to set the speed and heading. (Remember, parameters function a lot like variables.)

  3. Go back to your Initialize block and see what you could replace with a call to updateOneBall.

Fixing Flung

Finally, we need to make the Flung handler work for all the balls on the screen. This is trickier to do than you’d think, because the flungSprite value isn’t actually the ball… it’s a true/false value that tells us if a sprite was nearby when someone did a flung action.

I have included a screenshot of the code for this here. Study it. Implement it. And, discuss the following questions with your partner.

(Right-click and say “Open Image in New Tab” to get a full-size image in its own tab. This works in Google Chrome; your mileage, with other browsers, may vary.)

Question 6: Why do you think the outer if statement included in this code?

Question 7: What kind of information is aBall in the for loop?

Question 8: Describe, in plain English, what the inner if statement is doing. Put another way, why is that statement necessary? I’m not interested in the details of the statement, but instead trying to figure out what purpose it serves?

Question 9: Draw a picture of what that statement is saying with respect to aBall.

  1. Finally, add another and statement to the if statement. Make it so you detect if the fling happens within 10 pixels of the Y coordinate of the ball.

Conclusion

A few questions, in conclusion:

Question 10: Why did we create a procedure? What did it do for our code?

Question 11: How do you know when you want to create a procedure? What is a good indicator that one might be useful?

Question 12: What kind of information did we put in a list? Did you know you could do that before this exercise?

Question 13: Pretend you were doing an animation that required a large number of sprites. You want to move several sprites together as a single object; for example, if you were animating a figure, you might have a sprite representing each leg, one for each arm, one for the body, and one for the head (that’s six sprites). Describe how you might use lists and procedures to simplify the process of making it look like your figure is running.

Question 14: Does having a list of ball objects help when it comes to handling bounce events? (Or, any events, for that matter?) Why, or why not?

Opportunities for Expansion

This isn’t a game, per se. However, it could become a game of keeping the two balls from hitting each-other. To do this, one possible set of changes might be:

  • Keep track of how many seconds the user has been playing.

  • If the two balls collide, the game is over. The score is the number of seconds.

  • Every n seconds (10, or 20, or whatever seems good to you), you could increase the speed of the balls in play.

  • Every n seconds (20, or 30, or whatever), you could make another ball visible, increasing the difficulty of keeping them from colliding. This would require some thinking about how your various update functions/event handlers work.

  • You’d need a label or display for the user’s score. Or, a second screen that shows the score when the game is over.

  • You might want a start screen.

That’s just one idea… you aren’t required to expand the game, but if you’re interested in doing so, I’d certainly like to see it.

Submission

Moodle. (To be fixed momentarily.)