Adventures in TypeScript 04

Welcome back for another day of adventure! Today we will be adding bricks so our ball can smash them to pieces! If you don’t remember our last adventure (Adventures in TypeScript 03), we implemented a paddle and made it so if the ball hits the bottom of the canvas, it resets.

Game.ts – Brick it to me

Now we have our paddle moving about and able to smack the ball around, let’s give the ball something to smash into! We will be using the same iEntity interface for our bricks. So let’s start there, shall we?

Much like the paddle, we need more properties such as the size of the brick as well as what color. I also added a boolean for active. This will let the game know if it has been hit or not. Drawing the brick is pretty much like drawing the paddle, except we aren’t going to stroke it. The update will just check to see if the ball has hit the brick or not. If so, it will bounce the ball and set the brick to be inactive. Let’s also setup a constructor to handle creating the brick.

We are checking to make sure the brick is active on draw and update. We don’t want to show the brick if it has been hit, as well as keep checking for collision every update. Now since we are going to be adding quite a few bricks, we should probably put them in an Array of sorts. While we are at it, since the bricks, ball and paddle are all iEntitys, we will create an array of those.

Now that we have a nice array in place to handle all the updates and draws of our entities, lets add some bricks to smash. To make things easier along down the road, lets come up with a value for each brick, and parse it so we can create a nice brick map. I’m using the character ‘R’ for a red brick, ‘B’ for blue, ‘G’ for green, ‘Y’ for yellow, and ‘W’ for white. Also, let’s figure out a way to know when to start a new row. For this, I am using the ‘|’ character. Let’s create a function that will create new bricks, and add them to the entity_array that we created above.