Adventures in TypeScript 03

Welcome back for another day of adventure! Today we will be adding a paddle to our game so we can smack the ball around more. We will also implement resetting the ball if it falls below the paddle. If you don’t remember our last adventure (Adventures in TypeScript 02), we got the ball on the screen and bounce it around in the canvas.

Game.ts – Paddle goodness

In our last adventure, we created a nice interface for all of our objects to implement called iEntity. Our paddle class will also implement this interface. Let’s start a basic class that implements the interface.

Like the ball, our paddle will need more properties. We should know what color to draw it, as well as how big. Also, since this is being controlled by the player, we should have booleans to know whether we are moving it left or right. Also, let’s add a nice constructor with the basic items we need.

Now that we have most of the properties ready, let’s flesh out the draw function. I added a strokeColor so we have a nice border around the paddle, to give it some flair. We will be filling in a rectangle, then adding a small strokeRect around it.

Ok, the paddle will draw a nice little rectangle when we call the draw function. Now let’s cover the update function. We added a moveLeft and moveRight properties to our cPaddle class. If we press the left or right arrow, we want to set the corresponding property to true, and when we let go of the left or right arrow, we want to set them to false. For now, we are just going to flesh out the update function, and we will set the moveLeft and moveRight in a different area of the code.

Now let’s compile and run. We still don’t see our paddle. Whoops, we need to declare a variable like we did for our ball, and initialize a new paddle. After we do that, we should probably add to the gameLoop function to call the paddle’s update and draw functions. Let’s do that.

Now let’s compile and run again. We see our paddle now on the canvas! But wait, what’s this? We can’t move it. We need to hook into the keyUp and keyDown events and set the paddle’s moveLeft/moveRight properties. And we don’t want to forget to give the paddle a velocity.

Now that is looking better. We can now move the paddle left and right. There is one thing left to do and that is to check for collision with the ball and paddle. Right now the ball will just go thru the paddle and keep on bouncing. Let’s change the ball’s update function to check for collision with the paddle as well as the bottom of the canvas. We want to reset the ball if it hits the bottom of the canvas, and later in the series, we will setup a lives system to keep track to know when it is game over.

public update = (): void => {
// update the balls position
this.x += this.velX;
this.y += this.velY;
// did we hit the left or right bounds?
// if so, lets bounce back the opposite direction.
if(this.x > canvas.width - this.radius || this.x < this.radius) {
this.velX = -this.velX;
}
// did we hit the ceiling?
// if so, let's bounce back down.
if(this.y < this.radius) {
this.velY = -this.velY;
}else if(this.y > paddle.y - this.radius) {
// check to see if the ball is near the height of the paddle
// if so, let's check to see if it is in the same area on the X axis as the paddle,
// and check to see if the ball is still above the paddle.
if(this.y < paddle.y && this.x + this.radius > paddle.x && this.x - this.radius < paddle.x + paddle.width) {
// bounce the ball back up!
// if already going down (if hits paddle at odd angle, and gets stuck, we just want it to go up,
// and not bounce back n forth until out of paddle.)
if(this.velY > 0)
this.velY = -this.velY;
}else if(this.y > canvas.height - this.radius) {
// reset the ball back to start.
this.x = 240;
this.y = 290;
}
}
}

Now when the ball comes in contact with the paddle, it should bounce off of it. If the ball happens to dodge the paddle, it gets reset back to a starting position and continues on. This pretty much wraps up this tutorial, and here is what the game.ts should look like right now.