♩♫♪♬

Hey everyone, welcome back to to App Inventor's Hour of Code.

- >Stop Stop Stop Stop Stop Stop Shaking Me!<
- Enough of that!

The next app we build is gonna be a game app.

They're talking this time?

No, sorry. Let's get going on a silent app.

To get started, log on to App Inventor and click "New Project".

Name this one "BallBounce".

This app is going to have a ball moving around the screen. The ball will be what we call a "sprite".

In App Inventor, ball and image sprites can only live on a canvas. Before we put in a canvas, there is a setting we need to change on the screen properties.

It's small but very important for an app with a canvas.

Go to the screen properties, scroll down to the bottom part of the properties list and, uncheck "Scrollable".

This makes it so that the screen will be of fixed size and will not allow the user to scroll up and down.

Okay, now drag out a canvas from the drawing and animation drawer. Notice that it looks very small.

Go to the properties pane of the canvas and change the settings of both "Width" and "Height" to fill parent.

That opens up our canvas quite a bit.

Now drag out a ball sprite and drop it onto the canvas. It's kind of small. Let's make the ball a little larger. Go to the properties for the ball and change the radius to ten.

Okay, for now that's all we need. Time for the blocks!

Click on "Ball1" to view its blocks. Pull out the "Ball1.Flung". Yes, we named it "flung". It may be a silly word but it is grammatically correct.

Now, think about what we would like the ball to do after it is flung. We'd like it to move in the direction of the fling with the speed that matches the strength or quickness of the fling gesture.

The way to do that is to get the parameters of the fling gesture and to plug them in to the ball's heading and speed.

First pull out the setter blocks for the ball's heading and for the ball's speed. We want to set the ball's heading and speed to the heading and speed of the fling gesture.

There's actually a really easy way to do this in the flung event handler. Pull out the "get heading" and plug that into "set Ball1.Heading".

Pull out the "get speed" and plug that into the "set Ball1.Speed".

So. Now, we have the event in place that will handle when the ball is flung by the user. This means that the user uses their finger to flick the ball. That's a flick like a pool cue, not like an angry bird launch.

If you are connected to your phone, then you can test the app out. How easy or hard is it to fling the ball? Does the app respond the way you expect it to?

One thing that you probably notice right away is that when the ball hits an edge it gets stuck there.

We have to tell the ball to bounce off the edges. Back to the blocks!

Go to the ball blocks and choose the "when Ball1.EdgeReached" block. Go back into the ball blocks and drag out the "call Ball1.Bounce" block.

Notice that this bounce block takes an edge as an argument. Where can we get that edge value, do you think?

Well, how convenient! The EdgeReached event handler reports which edge was reached. Mouse over that edge parameter and you'll see the get block for it.

Pull that one out and plug it in.

That's all! Test your app out again.

Hey, look! The ball bounces off the edges now! Pretty cool, huh?

Okay. So now, we've got a very basic game app going here but this could be the start of a whole bunch of different games.

The App Inventor website has a tutorial that shows you how to make this into a mini golf game.

You can probably also imagine a game of pool or a pong game.

This is just the beginning. Challenge yourself and make this even more engaging and fun.

We are out of time on this tutorial. So, if any of you out there would like to extend your Ball Bounce app, go to our website for more great ideas.

Definitely worth checking out. In our next and final tutorial, we're going to show you how to make an app called "Digital Doodle" that let's you make pictures on your phone.

Sounds great! Okay, we're out for now. See you soon!

♩♫♪♬