Bouncing Ball Game

:video_game: Activity Time!

Time needed: 25-30 minutes

What you'll do

Create your very own bouncing ball game! You'll make colorful balls that bounce around the screen, change colors when touched, and score points. It's like having your own mini arcade game that you designed!

Watch your balls bounce off the walls, tap them to change colors, and see how many points you can score! :emoji::emoji::emoji:

Before You Start:

:white_check_mark: Open MIT App Inventor
:white_check_mark: Create a new project called "BouncingBallGame"
:white_check_mark: Remember the Canvas coordinate system from the lesson
:white_check_mark: Think about what colors you want your balls to be!

Sample UI and Components

Here's what you'll be building today:

What You'll Create	Components You'll Use
• A colorful game screen • Multiple bouncing balls • Score display • Speed controls	Visible components: • Canvas (your game area) • Ball components (3 balls) • Labels (for score and title) • Buttons (to control the game) Layouts: • HorizontalArrangement • VerticalArrangement

Let's Build It! :rocket:

Step One: Design Your Game Screen

1. Add a Canvas to your screen

   • Set Width to Fill parent
   • Set Height to 300 pixels
   • Choose a fun BackgroundColor! :art:

2. Add 3 Ball components to your Canvas

   • Ball1: Set PaintColor to Red, Radius to 20
   • Ball2: Set PaintColor to Blue, Radius to 25
   • Ball3: Set PaintColor to Green, Radius to 15

3. Add a Label for your score at the top

   • Text: "Score: 0"
   • FontSize: 20
   • FontBold: checked :emoji:

:bulb: Design Tip! :art:

Pick colors that look good together! Try using your favorite sports team colors or rainbow colors!

Step 2: Initialize Your Game

Create these global variables:

• score - set to 0
• gameSpeed - set to 5

When Screen1 initializes:

1. Set each ball's Speed to your gameSpeed variable
2. Set each ball's Interval to 50 (milliseconds)
3. Give each ball a different Heading (try 45, 135, and 225)
4. Set Enabled to true for all balls

Step 3: Make Balls Bounce Off Edges

For each Ball (Ball1, Ball2, and Ball3):

When Ball.EdgeReached:

1. Call Ball.Bounce with the edge parameter
2. This makes the ball bounce realistically! :emoji:

:bulb: Stuck?

The EdgeReached event gives you an "edge" parameter. Just pass this directly to the Bounce method - MIT App Inventor does the math for you!

Step 4: Add Touch Interaction

For each Ball:

When Ball.Touched:

1. Add 10 to the score variable
2. Update the score label text
3. Change the ball's PaintColor to a random color!
4. Play a sound (optional - add a Sound component!)

Bonus: Make the touched ball speed up a little bit!

Step 5: Add Game Controls

Add these buttons in a HorizontalArrangement:

"Faster!" Button:

• Increase gameSpeed by 2
• Update all balls' Speed property
• Show a notification: "Speed increased!"

"Slower!" Button:

• Decrease gameSpeed by 2 (but not below 1!)
• Update all balls' Speed property

"Reset" Button:

• Set score back to 0
• Reset all balls to starting positions
• Reset gameSpeed to 5

:bulb: Positioning Tip! :emoji:

To reset a ball's position, set its X and Y properties. Try putting them in different corners!

:trophy: Challenge Yourself!

Level One: Color Changer

Make each ball change to a SPECIFIC color when touched:

• Red ball -> Yellow
• Blue ball -> Purple
• Green ball -> Orange

Level 2: Collision Detection

When Ball1 collides with Ball2 or Ball3:

• Add 25 bonus points!
• Make both balls change color
• Show a "COLLISION!" notification

Level 3: Power-Ups

Add an ImageSprite as a power-up:

• When a ball hits the power-up, double the points for 10 seconds
• Make the power-up move to a random position after being hit
• Add a timer to track the power-up duration

Level 4: High Score Tracker

• Keep track of the highest score achieved
• Save it using TinyDB so it persists when the app closes
• Display both current score and high score

Testing Your Game :video_game:

1. Test ball movement: Do all balls move in different directions?
2. Test edge bouncing: Do balls bounce naturally off walls?
3. Test touch detection: Does the score increase when you tap balls?
4. Test speed controls: Can you make the game faster and slower?
5. Test reset: Does everything go back to the start?

Submit Your Amazing Game! :star2:

Once you've created your bouncing ball game:

1. Test it thoroughly on your device
2. Add any creative features you thought of
3. Take a screenshot of your game in action
4. Submit your project here: Submit Bouncing Ball Game

Remember: The most important thing is to have fun and be creative! There's no wrong way to make your game - add your own special touches! :art::sparkles:

Knowledge Check :emoji:

After building your game, can you answer these questions?

1. What coordinate is at the top-left corner of the Canvas?
2. What's the difference between a Ball and an ImageSprite?
3. How do you make a sprite bounce off an edge?
4. What event detects when two sprites collide?
5. How do you control the speed and direction of a Ball?

Great job creating your first animated game! You're now a game developer! :video_game::trophy: