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

Laying the Brickwork

Ok, today is the day! we’re putting bricks into our Brickbreaker game. As mentioned in previous articles in this series, We’ll be creating the bricks in JavaScript; Here’s the code that does it.

function generateBricks(){
    const numberOfBricks = 60;
    let brickContainer = document.getElementById("brickContainer"); 
    for( let i = 0; i < numberOfBricks; i++){
        let brick = document.createElement('div');
        brick.classList.add('brick'); 
        let red = Math.floor(Math.random() * 255); 
        let blue = Math.floor(Math.random() * 255); 
        let green = Math.floor(Math.random() * 255); 
        brick.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`; 
        brickContainer.appendChild(brick); 
    }
}
generateBricks();

I know there’s a lot going on here, but we can pretty easily translate it to plain English:

1. Set the total number of bricks(here it is 60 because the game area is 10 bricks wide and 6 bricks high).
2. Grab the brick container and store it as a variable to make it easier to work with in the future.
3. (The following steps are completed for each brick) Create a div and store it as a variable.
4. Give the brick the class of ‘brick’.
5. Generate a random color and turn the brick that color.
6. Add the newly colored brick and add it to the brick container.
7. Run the function.

Now if we load the page, assuming the JS has been linked correctly, we should have bricks, right?

“Hey, what gives? Where are the blocks?” I’m sure you’re asking. Well, we still haven’t said what size they should be yet. The bricks are there, they just have no size. Here you might be tempted to set the height and width using CSS, but there is a much better option. Since we know we want the bricks laid out in a grid, we can use CSS grids!

Using CSS grids, we can tell the browser how many columns we want as well as how big they should be, and the browser will handle the rest! In order to do this, we need to head back over to our stylesheet and add the next two lines to the CSS for our #brickContainer:

display: grid;
grid-template-columns: repeat(10, auto);

The first line is telling our browser that everything inside of the brick container, and the next one is telling the browser that there will be 10 columns and they all can be automatically sized. The repeat here is literally just saving you from writing the word ‘auto’ 10 times; the following code will work just as well:

grid-template-columns: auto auto auto auto auto auto auto auto auto auto;

If you haven’t caught the pattern, you create a new column by adding a new measurement and each column can have their own size as well. We can do the same thing for rows, but we don’t really need it here so let’s skip to the part with the bricks:

It doesn’t look great, but it’s there; we have bricks! Now that we have all of the visual elements of the game laid out, we can focus on making them do stuff. In the next article, we’ll get to moving the paddle.