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

Work site organization: Restructuring the code in preparation for a fully functioning game.

In the last article, I said that we would be getting the projectile moving in this one. I might have lied, forgive me. There’s quite a bit that we have to do to before we get there, and there will not be many noticeable changes to the game until then.

You may be wondering what the big deal is, why we can’t just create a class for the projectile and have it move like we did with the paddle. Well, we’re not going to be controlling the projectile which means that the game will have to tell it where to move and how fast, which means we’ll need to interact with the game, which means that we need a game class.

Let’s start by thinking about what the class should include:

1. The paddle — The game is going to need to access the paddle if we want ti to be able to tell if the projectile and paddle have collided.
2. Bricks — Just like the paddle, we’ll need the game to have access to the bricks if we want it to detect collisions with the projectile and make the necessary changes
3. The Projectile — As we discussed above, the game will be controlling the projectile for us, so it will definitely need access to the projectile

As you can see, this is a pretty simple game so that should take care of all of the members of the game class, but what about methods? Well, the first thing we know it’s going to need to do is control the projectile, which can be broken down into a few different subtasks:

1. Get the velocity of the projectile and add it to the current position of the projectile
2. Check to see if the projectile has run into anything
3. If not, move it again
4. If the projectile has run into something, change the velocity of the projectile
5. If the projectile ran into a brick, take the brick out

Now that we know how the game will be interacting with the projectile, we can create a class for it. There are different ways to do it, but this is what i came up with:

As you can see, we really just need the projectile to keep track of and change its velocity and positioning, everything else will be handled by the game. You should also notice that a fair bit of the class is a duplicate of the paddle class. In programming, you typically want to avoid rewriting code as much as possible so we’ll create a base class for these classes to inherit their shared properties from which should look like this:

Now, our class definition should look like:

If you notice, the code above is a little more than a class definition, it also includes a constructor method. Constructor methods are methods that execute whenever an instance of the class is creating it. In this case, we’re using it to run a single command: super() which calls the constructor of the class that it is inheriting from. In the code above, we’re taking the id of the element we want to instantiate a class of and pass it in so that it knows which node to work with. We also need to make the same changes we made to paddle to projectile:

Now that we have these two set up, we can start getting the framework of our game class set up. We’ll take care of that in the next article, as well as getting that projectile moving. We almost have functioning game, how exciting!