Breakout

Breakout was a game that many of us still remember fondly. Released in 1976, it was developed by Steve Jobs and Steve Wozniak, although the majority of the design was performed by Wozniak. It continues to influence culture today, hidden within small Easter eggs in devices such as the original iPod and on the Google search engine.

Breakout on Google, achieved by searching ‘atari breakout’ on Google Images

Today I am going to try make some version of this game using Processing and java.

To start, I went ahead and built the player, who in this game is just a moving paddle at the bottom of the screen. Pretty simple stuff, the player now moves based on the arrow keys pressed. The player must also be unable to move out of the screen. As well as this, I added a grey border which can be seen below.

Paddle and Border

Now on to the ball. This one is very similar to the ball in Pong. In fact the original idea of Breakout was to be single player Pong. So taking the majority of the code from my earlier article. The collision detection can be seen below.

void update(float paddleX, float paddleY, float paddleW, float paddleH) {
    x += velX;
    y += velY;
    dstX = abs(x - paddleX);
    dstY = abs(y - paddleY);

    if (dstY <= paddleH/2 + size && dstX <= paddleW/2 + size)
    {
      velY *= -1;
      System.out.println(paddleVel);
      velX += paddleVel;
      y += 2 * velY;
    } else if (x < 0+size+20 || x > width-size-20)
    {
      velX *= -1;
      x += velX;
    } else if (y < 0+size+30)
    {
      velY *= -1;
      y += velY;
    } else if (y > height-size)
    {
      reset();
    }
  }

This code takes in its parameters, the position and size of the paddle. It then works out its distance to the paddle and acts accordingly.

Last to add are the blocks. Simple enough, the ball changes its X velocity if it hits a block from the side and its Y if it hits a block from the top or bottom. As well as building this, a cool thing to add is a condition where the colour of a block gets lighter as you move down the grid of blocks.

Finally after adding a win screen we are left with this masterpiece:

Finished Game

It might not be as good as Google’s version, or the arcade game, but as long as it works and actually does something, I’m happy! This was a very fun project to work on and I would recommend if you’re learning to code to give it a go.

If you wanted to go above and beyond, you could add a reset feature once you have won or even add additional levels.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.