Ball, Basic: Catch the bouncing ball

[Scott Ferguson]

The Ball component is an animation component that resides in a Canvas component.

It has Speed and Heading properties and can 'bounce' and react to touch making it the basis for many interesting game ideas.

In this simple example, we will first make a ball bounce around on a Canvas, then have it stop when it is touched and resume bouncing when it is released.

Create a new project named lrn_bal_basic

Screen Designer:

Rename Screen1.Title to Catch me! (touch and hold ball to stop it) 

Drag and drop a Canvas component to the Viewer.

Set it's Width and Height to Fill parent.

 - the Canvas is a required container for Ball components

Drag and drop a Ball component to the Viewer.

Set Ball1.Heading to 20 (degrees; approximately East-Northeast compass direction)

Set Ball1.Interval to 1 (milliseconds; every 1 ms the ball position will be changed)

Set Ball1.PaintColor to Red

Set Ball1.Radius to 10 (pixels)

Set Ball1.Speed to 7 (pixels; every 1 ms the ball will move 7 pixels)

 - these settings will have our ball moving along briskly and of a size easy to touch and see

Blocks Editor:

The ball will have a speed and heading, but when it hits a wall, it will just stop unless we tell it to bounce.

Drag and drop a Ball1.EdgeReached event block.

Notice that a [name edge] argument block is automatically attached.

This will hold the value of the 'edge' (meaning side or corner) of the canvas where the ball has touched.

A canvas has 4 corners and 4 sides, so the [name edge] parameter will return one of eight values:

North side: 1, Northeast corner: 2, East side: 3, Southeast corner: 4, South side: -1, Southwest corner: -2, West side: -3, Northwest corner: -4

Drag and snap a Ball1.Bounce block inside the Ball1.EdgeReached block.

Drag and snap a [value edge] block to the Ball1.Bounce block

 - the Ball1.Bounce block will cause Ball1 to bounce if it has hit any of the walls or corners

You can stop at this point and test the app.

The ball should bounce happily along...

---

It is easy to add another simple feature to the app - catching and releasing the ball as it bounces.

To do this we need to add two event blocks - one to react to a finger press and one to react to a finger release.

Drag and drop a Ball1.TouchDown event block

 - this block will execute it's contents when the user 'touches' it

Drag and snap a [set Ball1.Speed to] property block inside.

Attach a [number 123] block to the Ball1.Speed block and change it's value to 0.

 - when the user touches the ball, it will stop

Drag and drop a Ball1.TouchUp event block.

 - this event block executes it's contents when the finger is lifted

Using the same method as before, insert a [set Ball1.Speed to] block and attach a number block with a value of 7.

 - this will resume the ball's motion (7 pixels per 1 millisecond) when the finger is lifted

END.

Now test your app in the emulator or connected device.

It should look something like this:

Challenge: Can you modify this exercise by starting the 'game' with a large ball and slow speed, then when the user is able to touch it, increase the speed and make the ball smaller?