Learning Objectives:

• Write event listener code for mouse and frame events
• Write code to move movieclip instances
• Use of Math.random() to add randomness to the ball's starting position and speed

How the Completed File Works:

Step 1. Starting Simple

Graphics: Two movieclips: a paddle and a ball. Put them on stage. Give each instance an instance name.

Coding:

1. Declare a variable, say increx. This will be use as an horizontal increment for the ball. So, what should the value of this increx be?
2. Write event listener code to make the ball move horzontally and constantly at frame rate by the amount of increx.
3. Write event listener code to make the paddle move vertically with the mouse.

Expected Results:

• The paddle moves vertically with the mouse.
• The ball keeps moving horizontally from the right to left. It does not return after going off the left edge of the stage.

Step 2. Add code to make the ball return after going off the stage

Coding: You can do so by adding an if statement like the following pseudocode:

if (the ball is off the left edge of the stage) then
     place the ball back at the right edge of the stage

Hmmm...Where in the code should you add this if statement?

Expected Results: Same as from Step 1 plus the following:

• The ball now returns to the right edge of the stage after going off the left edge.

Step 3. Add code to make the ball bounce off the paddle

Coding: You can do so by adding an if statement like the following pseudocode:

if (the ball and the paddle touch) then
     set the ball's horizontal increment to be a positive value

Hmmm...Where in the code should you add this if statement?

Also, add code to make the ball return to the right edge to move to the left after going off the right edge of the stage.

Expected Results: Same as from Step 2 plus the following:

• The ball bounces off the paddle.
• The ball restarts going to the left after going off the right edge of the stage.

Step 4. Add code to make the ball start at a random y value whenever it returns to the right edge of the stage

Coding: You can do so by using Math.random().

Hmmm... How to construct a statement to set the ball's y to be a random number between the top and bottom of the stage? And, where in the code should you add this statement? Hint: You need to add this statement twice in the code.

Expected Results: Same as from Step 3 plus the following:

• The ball starts at a random y value at the right edge.
• Every time the ball returns to the right edge, it starts at another random y value.

Step 5. Make the ball go at a random angle and bounce off the top and bottom edges of the stage

Coding:

1. Similar to how we use a variable increx and mc_ball.x to move the ball, set up another variable, say increy to also change the ball's y.
2. However, instead of setting increy to a number at the beginning of the code, you set it to a random number, say between -30 and 30. Hint: Use Math.random().
3. Randomize increy again when (and only when) the ball returns to the right edge of the stage.
4. Add an if statement the following pseudocode:

   if (the ball goes off the top or the bottom of the stage edge) then
        change the sign of increy

   Hmmm...Where in the code should you add this if statement?

Expected Results: Same as from Step 4 plus the following:

• The ball starts with a random angle.
• Every time the ball returns to the right edge to start again, its angle is randomized.
• The ball bounces off the top and bottom edges of the stage.

Step 6. Keep score

Coding:

1. Create a dynamic textfield on stage. Give it an instance name.
2. Declare a variable, say score, and initialize it to zero.
3. Add a statement to increment the score by 1. Hmmm...where should this statement be placed in the code?
4. Add a statement to show the score in the textbox. (If you have never show the score in the textbox, you will never see the score changes on screen.) Hmmm...where should this statement be placed in the code?

Expected Results: Same as from Step 5 plus the following:

• Every time the ball hits the paddle, the score is incremented by 1.

Step 7. Reduce code duplication by organizing code using functions

Coding: See this PPT

Expected Results: Same game play as before, but part of the code is organized using functions.

Extra Credits: See details