HTML5 Game Development Tutorial: Breakout Part II – Animation and Keyboard Input

Breakout v0.6 ScreenshotThis is the second in a series of tutorials on developing a full featured version of Breakout.

In the first tutorial we covered drawing primitive objects on the screen using the Canvas element and developing the basic game screen.

In this tutorial, we will use setInterval() to add some animation and capture keydown and keyup events to respond to user input (so we can move the paddle).

We will use the code from the last tutorial as our starting point.

Lets get started.

To animate objects in the game, we need to draw them, move them a little, and then redraw them. To do this, we create an animate() function and place our calls to the drawing functions inside it. For now, lets focus on only the paddle and the ball.

Now we need to figure out a way to call animate() repeatedly at regular intervals. Luckily, Javascript has a function called setInterval() which keeps calling a given function repeatedly at fixed time intervals until the clearInterval() function is called.

We create two functions called startGame() and endGame() to begin the animation and end it. We can also use startGame() to do any pre-game initialization of variables.

Now that the game loop is setup, we need to start moving the elements during the loop.
We start by creating a moveBall() function and calling it from within animate().

The moveBall() function adjusts the ball coordinates by adding the ball speed. We initalize balldeltaX and ballDeltaY when the game starts.

Now that everything is in place, the ball should start moving.
However when we open the file in a browser, we see something weird.

Instead of a moving ball, we have a long black line. The ball keeps moving, however the old balls stay behind, leaving a long trail along the path. We need to clear the earlier objects before drawing new ones.

To do this, we can use the clearRect() method.

This line clears the entire canvas at the beginning of the animation loop. When we run the code now, it looks like a moving ball instead of a long snake.

The next problem is that our ball doesn’t bounce off the walls. It keeps moving past the edge of the canvas and disappears. To fix that, lets add some conditions to check when the ball is moving outside the boundary.

Great! Now the ball is bouncing off the walls properly and when it touches the ground the game ends.

Now lets animate the paddle. To move the paddle, we need to first track the left and right keys and keep track of where the paddle should move during the next animate(). We do this by using the keydown() and keyup() jQuery methods to assign event handlers for these events.

The event handlers check if the key pressed or key released is Left (key code 39) or Right (key code 37) and stores this in a paddleMove variable. We will check this variable every time we animate to see where the paddle needs to move next.

The next thing we need to do is define another movePaddle() function that is called just like moveBall().

We now call this new movePaddle() function from animate() as well.

Great! Now the paddle moves to the left and right when we use the cursor keys.

The last thing we need to do is make the ball bounce if it hits the paddle. We just need to add a condition to the other collision checks in moveBall().

And thats it! The paddle moves perfectly, the ball bounces off the wall and the paddle, and if the ball hits the ground, the game ends.

We have come a long way from an empty rectangle on the browser. Of course, this game is still a little boring with just a ball and paddle.

In the next tutorial, we will bring back the bricks that we drew before, handle the ball colliding with these bricks, and finally increase the score when a brick gets destroyed.

You can download the finished source code for this tutorial below.

Continue to part 3 of this series. HTML5 Game Development Tutorial: Breakout Part III – Collisions, Scoring and Sound