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

Putting it all together: Creating the game class and as a result, a game.

Let’s start by thinking about or game class like the game itself. When the game starts, what should it be doing. This question is almost exactly the same as asking what should be in the constructor of our game class. We already know from the last article that we’ll need to create an instance of our paddles as well as the projectile; following on this theme, we will also need the game to run our generate bricks function that we created and assign controls to the paddle. As you can see, we’re having the game handle a lot for us. So far, our game class should look like this:

So we have the game set up with all of our elements and the paddle can still move according to our input, but we still don’t have an easy way of interacting with the bricks, we need a brick class(which means we’ll need to revamp that generate bricks method).

We’ll be basing the brick class off the basicElement class again, so the definition will look like:

class brick extends basicElement{
}

and of course, we’ll need to handle that inheritance in the constructor:

class brick extends basicElement{
    constructor(id){
        super(id);
    }
}

Now, all that we really need the brick to do is disappear when it’s hit with a projectile, so we’ll go ahead and create a disappear method as well as a property to describe whether or not the brick is disappeared.

In order to use this class for our bricks, we’ll need to revamp the generateBricks method to use the brick class instead of just creating a node. Due to our bricks being based off of the baseElement class, we will need to give each brick their own id as well. In order to make accessing the bricks even easier, we will keep the bricks in an array, so we will also be placing the bricks into an array and returning that array.

That’s going to make it much easier to detect when our projectile has hit them as well as making them disappear once they are hit. Now we need to give the projectile a way to hit the bricks, we need to make it move! The way that the projectile is going to move is through the game updating the screen, moving the projectile according to the projectile’s velocity. If we want something to happen at a set interval we use window.setInterval() (surprised?) Due to the way that setInterval interacts with the this keyword, we have to use a helper variable to preserve the original context and then create a callback that returns the function we want to run. This means we will have to create two functions: updateScreen and run. Run will handle all of the fun stuff with the setInterval while updateScreen actually makes the changes to the screen.

now if we call this.run() in our constructor:

The projectile moves! but it goes right through the paddle and off the screen. In the next article, we’ll get collision detection working. We’re almost there!