(8) Disappering blocks

We seem to be moving to a breakout game. In that we also need some blocks. We cannot just have a bouncing ball and moving paddle. To keep track of the blocks we could use an array. Each element in the array represents a block. If it is not hit, and exists, then the element could be '1', when it is hit, we can set the element to '0'. If we start with the basics, let's declare a global array of ints to keep track of the blocks, and lets initialize them in the setup() routine:

// We will have 20 blocks. blocks[i]==1 means it still exists
int[] blocks = new int[20];

// Run once at start
void setup() {
  int i;
  // 500 pixels wide, 400 pixel height
  // This call will set system variables (width, height)
  size(500, 400);
  rectMode(CENTER);
  for (i=0; i<20; i++) {
    blocks[i] = 1;
  }
}

Now, that's done, we also need to draw them. There are several ways to do it. What I did was to loop through all blocks with using a local variable (declared inside setup()) 'i'. Then I calculate the x, y pixel position of the block we are looking at right now. The picture shows how the blocks[] array corresponds to the blocks.

And this is the code to draw them:

void draw() {
  int i, x, y;

  // Erase the screen, all black
  background(0);

  // Loop through all the potential blocks
  for (i=0; i<20; i++) {
    // Calculate the x,y position of upper right corner
    x = i%5*100+10; // %5 is modulus - will result 0-4 always 
    y = 40*(i/5)+10; 
    // Check if we we have a block (blocks[x] is 1)
    if (blocks[i]==1) { 
      // Draw the block
      rect(x+40, y+10, 80, 20);
    }
  }
}

Now it is a nice collection of blocks. But they are all there, always. How do we "remove" them. We can test by checking if the mouseX/Y is on one of the blocks and if it is, remove it. This can be done by this code:

    // Check if mouse is over the block, if so, remove it (blocks[i]=0)
    if (mouseX>x && mouseX<(x+80) &&
      mouseY>y && mouseY<(y+20)) 
      blocks[i]=0;

Similar to how we checked if the ball hit the pad, this is done by checking if it is inside the coordinates for the blocks. The x,y is same as when we did the drawing of the blocks. The last thing we would want to add in this example, is to detect when all blocks are gone. We can do this by setting a variable to '1' before drawing anything and if we draw any number of blocks, setting it to '0'. If it is '1' after the loop, we did not draw anything. The complete code for this is

// We will have 20 blocks. blocks[i]==1 means it still exists
int[] blocks = new int[20];

// Run once at start
void setup() {
  int i;
  // 500 pixels wide, 400 pixel height
  // This call will set system variables (width, height)
  size(500, 400);
  rectMode(CENTER);
  for (i=0; i<20; i++) {
    blocks[i] = 1;
  }
}

void draw() {
  int i, x, y;
  int blocks_gone;

  // Erase the screen, all black
  background(0);

  blocks_gone = 1;
  // Loop through all the potential blocks
  for (i=0; i<20; i++) {
    // Calculate the x,y position of upper right corner
    x = i%5*100+10; // %5 is modulus - will result 0-4 always 
    y = 40*(i/5)+10; 
    // Check if we we have a block (blocks[x] is 1)
    if (blocks[i]==1) { 
      // Draw the block
      rect(x+40, y+10, 80, 20);
      // Since we drew a block, all are not gone
      blocks_gone = 0;
    }
    // Check if mouse is over the block, if so, remove it (blocks[i]=0)
    if (mouseX>x && mouseX<(x+80) &&
      mouseY>y && mouseY<(y+20)) 
      blocks[i]=0;
  }
  if (blocks_gone==1)
    text("You win", 200, 200);
}

Copy/paste it or enter it and run it.