Brick by Brick: Creating a Brickbreaker style game in JavaScript, CSS, and HTML Pt. 1
Laying the Foundation with HTML
On June 7th, 2021 I started the part time software engineering program with Flatiron School(woohoo!). This is a full stack web developer program, which focuses on Javascript for the client side scripting, so I’m going to use what I learn to create a Brickbreaker-like game to reinforce and expand my already growing knowledge. I find that I learn really well by explaining concepts, so feel free to follow along!
So, where do we start?
Well, we need to start with the HTML file as that’s going to be what we ultimately load the game with. Let’s go ahead and set up the standard HTML skeleton:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>I went ahead and included a JavaScript file and stylesheet, but we’ll leave them empty for now and come back to them later; for now, let’s create the elements of our game. If you break the game down into its components, you will find that there are four basic elements: the paddle, the projectile, the bricks, and the game that contains it all.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./stylesheet.css">
<title>Bricky!</title>
</head>
<body>
<div id="game">
<div id="brickContainer"></div>
<div id="projectile"></div>
<div id="paddle"></div>
</div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>You should be noticing two things about this code that has not been previously mentioned:
- I added a title.
- There are no bricks, just a brick container.
Allow me to explain myself: I added a title because, well, the page needs one and this seemed like as good of a time as any to add it. As far as the brick container and lack of bricks goes, We’re going to be generating the bricks through the JavaScript because there will be many and nobody wants to copy and paste that many identical divs. The container is going to make it easier for us to place the bricks together
If you try to load this code in your browser, you’ll notice that the page is entirely blank and that is because the browser has not been told how these elements are supposed to look. We need to tell the computer the size, color and positioning(amongst other things) in order to see our work pay off, so we’ll work on that in the next section.