In this codelab, you'll make an app that allows you to fling a ball across the screen.

What you'll learn

• Use the Designer View to create the user interface.
• Use the Blocks View to add functionality to the app.
• Use the Canvas and Ball components.
• Use Event Handlers.

Create a new project called BallBounce (no spaces).

The Designer View shows you what the app looks like to the user.

In the Palette section, open the Drawing and Animation drawer and drag a Canvas component onto the viewer.

Challenges

The following challenges will require you to modify the Properties section of the Screen and Canvas components.

1. Turn off the Scrollable setting of the Screen.
2. Change the height and width of the canvas to fill parent.

Designer View

Open the Drawing and Animation drawer and drag a Ball component onto the viewer. Adjust the Radius property to make the ball bigger.

Blocks View

Open the Ball drawer and drag the when Ball1.Flung block onto the workspace.

Click on the Ball drawer again and plug in the set Ball1.Speed and set Ball1.Heading blocks into the when Ball1.Flung Event Handler.

Mouse over the speed parameter of the when Ball1.Flung block. Plug the get speed block into the set Ball1.Speed block.

Challenges

1. Set the Ball's heading to the heading at which the ball was flung.

Notice that the ball stops moving when it hits the edge of the screen.

To make the ball bounce off the edge of the screen, drag the when Ball1.EdgeReached do event handler into the workspace.

Then add the call Ball1.Bounce block into the event handler.

Challenges

1. Add the necessary block to make the ball bounce off the edge it reaches.

You have used App Inventor to create a Ball Bounce game.

What we've covered

• Use the Designer View to create the user interface.
• Use the Blocks View to add functionality to the app.
• Use the Canvas and Ball components.
• Use Event Handlers.