(Credit: Soja Morgens)

Download this into your folder on your desktop (the one with your name on it).

https://dl.dropboxusercontent.com/u/3235343/Teaching/DMA/BreakoutStarter.zip

Congratulations! You've graduated to official engineer. So with that we're giving you a game engine.

This engine gives you a block class and a ball class that handle collisions!

This file will give you the starter code and the block class and ball class.

The starter code gives you all the variables you will need to begin.

The classes give you all the commands.

• Read the ball class and figure out which three commands you need to add to draw in order to get a bouncing ball.
• You will add these commands to the function drawBall()
• In this case the ball is named Moe.

Note: for those ambitious, you can try adding a second ball.

Your screen should look something like this:

Bouncing Ball

Read the code for the Block and add a paddle.

• You will need to add three more lines to make the paddle work.
• You will add these lines to the function drawPaddle()
• For breakout: the paddle only moves with mouseX not mouseY: what other variable should you use for y?

You will initially put the code in drawBricks().

Step 1: Put one bricks on the screen. Use the variables:

1. brickWidth
2. brickHeight
3. brickColor
4. spaceFromCeiling

Step 2: put 2 bricks on the screen, separated by the spaceBetweenBricks

Step 3: put 3 bricks on the screen, separated by the spaceBetweenBricks

Try to use the graph paper to figure out how the bricks are spaced.

See the pattern?

use a for loop inside of draw();

for(int brickNumber=0; brickNumber<something; brickNumber++) {
        //insert code to draw a rectangle here
}

to draw a series of rectangles onto the the screen;

Variables you will need to use:

1. numberOfBricks (to replace something in for loop)
2. spaceBetweenBricks (i*(spaceBetweenBricks+brickWidth))= x

Use a temp variable for x inside the for loop to make it more readable:

• aka float brickX= “something something something”

Answer:

 for(int brickNumber=0; brickNumber<numberOfBricks; brickNumber++) {
        fill(brickColor); 
        float brickX= brickNumber*(brickWidth+spaceBetweenBricks);
        rect(brickX, spaceFromCeiling, brickWidth, brickHeight);
  }

Do a vertical row of bricks using similar methods. instead of brickNumber use rowNumber for your for loop like this:

for(int rowNumber=0; rowNumber<something; rowNumber++) {
        //insert code to draw a rectangle here
}

Use variables:

1. brickWidth
2. brickHeight
3. brickColor
4. spaceFromCeiling
5. numberOfBricks
6. spaceBetweenBricks

Use a temp variable for y inside the for loop to make it more readable:

• aka float brickY= “something something something”

  for(int rowNumber=0; rowNumber<numberOfBricks; rowNumber++) {
        float brickY= spaceFromCeiling+rowNumber*(brickHeight+spaceBetweenBricks);
        fill(brickColor);
        rect(0, brickY, brickWidth, brickHeight);
  }

make a new temporary variable inside the for loop

 color brickColor= brickColors[rowNumber]; 

Right now the array brickColors only has two colors. Add eight more to get this:

Now we want a full block of rows. Can you figure out how to combine step 4 and step 3 to get a full block of bricks like this?

 for(int brickNumber=0; brickNumber<numberOfBricks; brickNumber++) {
    for(int rowNumber=0; rowNumber<numberOfBricks; rowNumber++) {
        float brickX=brickNumber*(brickWidth+spaceBetweenBricks); 
        float brickY= spaceFromCeiling+rowNumber*(brickHeight+spaceBetweenBricks);
        color brickColor=(brickColors[rowNumber]);
        fill(brickColor);
        rect(brickX, brickY, brickWidth, brickHeight);
    }
  }

Take a look at the documentation here for ArrayLists: ok this is the tricky part so we'll walk through it closely:

Since we need to be able to remove the bricks, we need to put them into the BasketOfBricks, a list, so we can keep track of them. A list allows us to add and remove elements as we need them.

First:

• Cut the full loop(s) from drawBricks and paste them into the setupBricks() function.
• We need to initialize all these bricks first.
• in setupBricks():

Change:

      fill(brickColor);
        rect(brickX, brickY, brickWidth, brickHeight);

to

 BasketOfBricks.add(new Block(something, something, something, seomthing, something)); 

Now we've initialized the bricks but they dont show up on the screen. We need to draw them.

Copy this for loop into drawBricks():

for(int brickNumber= BasketOfBricks.size()-1; brickNumber>=0; brickNumber--) {
    Block brick=BasketOfBricks.get(brickNumber);
    brick.draw();
  }

This will loop through our basketof bricks and draw each brick onto the screen every time. It should now look the same as it did in step 7.

Congratulations You've made it through the hardest parts of breakout!

In the same loop you just wrote, you need to first include the function thats causes the bricks to collide with the ball.

Once it works, we now want to add a step that checks to see if the brick collided with the ball and if so, remove it.

Now the collision step already returns a boolean… and to remove the brick we say: BasketOfBricks.remove(brick);

Can you figure how to put those two facts together?

Now you want to keep score. We will put this into a function called updateScore(). How do you do that?

Well you need a new global variable score (int score=0;) Do you remember how to do text?

We did it in a recent program…and theres a function at the bottom to displayText() you can use.

Rename the string for it as:

String name= "String: " + score;

We want it to appear in the bottom corner as so:

Now add ten to the score every time a brick is removed.

When all the bricks disappear we want a win text to appear in the middle of the screen.

We can determine win in two ways:

Either when the score reaches the max or when there are 0 objects in BasketOfBricks.

See if you can figure out when one of these happens and use it to cause the win message to appear.

Congratulations you finished breakout!

You can upload this one to open processing!

LIVES

• Most games of breakout have lives.
• How can you add an if statement hat gives the user 3 lives?
• Once it ends it should call out a lose text in the middle.
• Make sure this lose text does Not appear when you've won

Now you will need to check for when the user hits the bottom wall and subtract a life from them.

Finally in drawText() you will need to tell the user how many lives are left.

Another Bonus:

• Play around with ball color and brick color. Can you add a method to brick so the bricks change color every second?
• Can you add another ball called Curly? Make sure he has collision control.
• Can you pause the game? use a boolean like in pong.
• Can you have the game pause after you lose?

SOLUTION: https://dl.dropboxusercontent.com/u/3235343/Teaching/DMA/BreakoutSolution.zip