Brick by Brick: Creating a Brickbreaker style game in JavaScript, CSS, and HTML Pt. 2

Building walls and laying paint with CSS

When we left off at the end of part one, we had our basic elements of the game laid out in HTML, but the computer has no idea what they’re supposed to look like so it shows nothing; let’s change that using CSS.

Because everything is contained in the #game div, we should get the design for that laid out first :

#game {
        background-color: black;
        height: 400px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        width: 400px;
  }

Now let’s break down what the code above is telling us:

• background-color: black; this one is pretty straightforward, the background color is going to be black.
• height: 400px; & width: 400px; these are also pretty straightforward and just say that the game area is going to be a 400px square.
• margin: 0 auto; this is saying that there should be no margin on the top or bottom, but the left and right margins should be automatically set. In effect, this is centering our game horizontally.
• overflow: hidden; This line is saying that if something were to move outside of our game(we’ll make sure this can’t happen later, but it’s still good to protect against), it will not display on screen.
• position: relative; This one is a little more complicated, but what we need to know is that any changes made to the games positioning will be relative to its original position

Right about now, you might be saying, “Great, we have a black square, but that’s a far cry from a game” and you’re right! We still need to design the rest of the elements and define how they behave. I’m going to take care of that first part for us now:

#game {
    background-color: black;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 400px;
  }
#paddle{
    background-color: green;
    position: absolute;
    height: 20px;
    width: 40px;
    bottom: 0px;
    left: 180px;
  }
#brickContainer{
    background-color: hotpink;
    height: 133px;
  }
#projectile{
    height: 5px;
    width: 5px;
    background-color: white;
    position: absolute;
}

Let’s take a look at what we have made so far!

As you can see, we have our game area(black) with all of our elements(except bricks): the paddle(green), the projectile(white), the area where the bricks will go(pink).

I know what you’re saying: “This is a game about breaking bricks and we’ve seen no bricks! What gives?”

Well, the bricks are coming. In the next article, we’ll set up some JavaScript and get those bricks in there!