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

Installing Light Switches - Creating a Response to User Interaction

Ok, so we have all of the elements showing on screen in their proper places and some of them are even being generated by JavaScript that we wrote. While seeing your code work is one of the best feelings, it’s even better to have working code that you can interact with! today, we’ll be focusing mainly on the paddle and getting it responsive to our input.

In the interest of the readability and usability of our code, we’re going to create a class for the paddle. Classes allow us to keep all of the information and functions(called methods when inside of a class) together and relevant to the class itself, so first lets create a class and put the first things we know we’ll need to access in there: the DOM node that corresponds to the paddle as well as the width and height of the paddle.

You might be wondering why we’re not including the positioning of the paddle as well; that’s because the paddles positioning will be changing frequently, so we’ll want a function to find the actual coordinates whenever we need to use them. Another reason to use a function is that we will have to reference the position of the paddle quite a bit and we can cut down significantly on the code we are writing if we put it into a method that we can call over and over again. I think you’ll see what I mean when you take a look at the functions:

As you can see, if you wanted to get the x coordinate of the paddle, for example, you would have to type that line of code every time and on top of that not being an efficient way to use your time, it is also not very readable. Now, whenever we need to get the paddle’s x coordinate, we just need to do something like paddle.getXCoordinate() which is much easier to type and read!

Now that we can easily and efficiently access some information about the paddle, let’s learn how to use that information to move the paddle! In the code above, you’ll notice that we have set methods(setters) and get methods(getters). We’ll be using both of them to create a methods that we can move the paddle with:

As you can see, each method is doing more or less the same thing:

1. Checking to see if moving the paddle would move it outside of the bounds of the game.
2. If there is still room to move, then the coordinate gets added or subtracted 10 pixels depending on which direction the paddle will be moving.

That sounds good to me, all we need to do is declare an instance of paddle and we should be have a moving paddle, right? Well, not yet, but we’re close. We still need to tell the game to listen for a key to be pressed, which keys to look out for, and what needs to happen when their pressed. We’ll have a function created for this which will run at the beginning of every game(like the generateBricks() function we made earlier)

As you can see, we tell our document to listen for a key to be pressed down and then if it’s any of the four directional keys, it will move the paddle in the corresponding direction. Now if we call that function and pass in our paddle, then we’ll notice that the paddle moves when we tell it to, how exciting! in case something isn’t working correctly, this is how your code should look so far:

This code works, but is still a little less than organized. In the next article, we’ll discuss tidying up the code a bit and and then getting that projectile moving!