Breakout collision using 2D Rectangles?

Question

Here is my code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Xna.Framework;

namespace BreakOut
{
    class Field
    {
        public static Field generateField()
        {

            List<Block> blocks = new List<Block>();
            for (int j = 0; j < BlockType.BLOCK_TYPES.Length; j++)
                for (int i = 0; i < (Game1.WIDTH / Block.WIDTH); i++)
                {
                    Block b = new Block(BlockType.BLOCK_TYPES[j], new Vector2(i * Block.WIDTH, (Block.HEIGHT + 2) * j + 5));
                    blocks.Add(b);
                }

            return new Field(blocks);
        }

        List<Block> blocks;
        public Field(List<Block> blocks)
        {
            this.blocks = blocks;
        }

        public void Update(GameTime gameTime, Ball b)
        {
            List<Block> removals = new List<Block>();     
            foreach (Block o in blocks)
            {
                if (o.BoundingBox.Intersects(new Rectangle((int)b.pos.X, (int)b.pos.Y, Ball.WIDTH, Ball.HEIGHT)))   //collision with blocks
                {
                    removals.Add(o);
                }
            }

            foreach(Block o in removals)
                blocks.Remove(o);           //removes the blocks, but i need help hitting one at a time
        }

        public void Draw(GameTime gameTime)
        {
            foreach (Block b in blocks)
                b.Draw(gameTime);
        }
    }
}

I'm trying to add collision so that when the ball hits against a block, then one of the blocks disappears.

The problem I'm having is: When the ball hits the block, it removes them all in one instance.

Answer 1

I think the basic problem here is to get the ball to bounce off a block. It looks like the block is disappearing fine.

The first step is to figure out when the ball touches a block. You have done that.

The second step is to figure out which side of the block it hit, so you know which way to bounce it. In practice, it is easier, since you only need to know whether the ball hit a horizontal or a vertical side. It is also much simpler with square blocks than with rectangular blocks.

The third step is to reflect the ball's motion in the appropriate direction

Here is some pseudocode for the second and third steps:

int x = (blockRect.X + (blockRect.Width / 2)) - (ballRect.X + (ballRect.Width / 2));
int y = (blockRect.Y + (blockRect.Height / 2)) - (ballRect.Y + (ballRect.Height / 2));
if (Abs(x) > Abs(y))
{
    // reflect horizontally
    ballSpeedVector.X = -ballSpeedVector.X;
}
else
{
    // reflect vertically
    ballSpeedVector.Y = -ballSpeedVector.Y;
}

Answer 2

What you probably want

At the moment, your code only removes any Blocks (they may be one or more) that the Ball collides with. You want the Ball to bounce off of the Blocks in addition to removing them. What you have is called collision detection (reporting when a collision has happened). What you'd like to have is called collision response (doing sensible things once a collision is detected).

You probably want the ball to bounce as if it had hit a wall.

Collision response

The ball has hit the top, bottom or one of the sides. In this case, the ball should reverse its horizontal direction if it has hit a block to its left or right, or reverse its vertical direction if it has hit a block from the top or bottom.

At the moment, your collision detection only detects whether the ball is touching a block. For getting it to bounce realistically in the way described, you must also know which direction it should bounce in. You need more information: Which direction was the block in?

One way of finding out is to examine the intersection of the bounding boxes:

The coordinates of the corners of the block and of the ball can easily be used to calculate the intersection between the block and the ball. It is quite intuitive that if the ball collides with the top or bottom of the block, this intersection's width will be greater than its height. Conversely, if the ball collides with the left or right side of the block, this intersection will have a greater height than width. There are various other methods of detecting the same thing, but this one is fast.

With this information, you can make the ball bounce in the correct direction.

Multi-block collisions

You may find that sometimes the ball intersects with multiple blocks at the same time, in which case the bounce may have to be in another direction which I haven't covered yet! You can for all cases draw similar diagrams for these cases and examine how you could go about telling them apart.