HTML5 Pong Game Tutorial – Part 2

In the first part of the tutorial we set the stage of our game, in this part we are going to add movement so that it starts to feel a bit more like a game and less like a child’s drawing. This tutorial will build upon the coding that was completed in the first tutorial so make sure you have successfully finished that part before moving onto this part.

By the end of this tutorial you should have something that is similar to this – http://jsbin.com/ulowiy/4/

Note: You can move the player paddle on the left by using the up and down arrows on your keyboard. (Remember you must be using a browser that supports HTML5).

The HTML & CSS

Good news - We set the stage so well in the first part of the tutorial that we don’t need to add any additional HTML or CSS. Everything from here on in will involve adding to our JavaScript code to achieve what we want.

The JavaScript

The first thing we want to be able to move is the player paddle so that we can move it up and down on the y axis.  To achieve this we are going to need to attach some event listeners, the two that we are going to use are keydown and keyup. Luckily jQuery makes it easy for us to attach these to our page, all we need to do is add the following lines to our $(document).ready function.

//attach event listeners
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

Once these two lines of code are initialised they will listen out for user interaction through the keyboard. If any of the keys on the keyboard are pressed then a function called onKeyDown will be called. Once that key is let go then a function called onKeyUp is called. We only need to assign event listeners once, they will continuously listen out for the keydown and keyup events until the browser window is closed. Before we go on and define the two functions we are calling on these events we need to set two more global variables.

//flags
var upPressed = false;
var downPressed = false;

These two flags will allow us to keep track of whether or not the up and down keys are pressed or not on the keyboard. Now we can define the two functions that will set and unset these flag variables.

//set upPressed or downPressed if the up or down keys are pressed
function onKeyDown(evt)
{
  if (evt.keyCode == 38)
    {
      upPressed = true;
    }
    else if (evt.keyCode == 40)
      {
        downPressed = true;
      }
}

//unset upPressed or downPressed if the up or down keys are let go
function onKeyUp(evt)
{
  if (evt.keyCode == 38)
    {
      upPressed = false;
    }
    else if (evt.keyCode == 40)
      {
        downPressed = false;
      }
}

Both functions are passed one parameter (evt) which is the event that called them. From this parameter we can find out which key was pressed or released by using the .keyCode attribute. The two key codes we are interested in are 38 (which is the up arrow) and 40 (which is the down arrow). For a full list of JavaScript key codes you can reference this website (http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes). As you can see from the code we are toggling the Boolean values of upPressed and downPressed depending on whether or not each specific key was pressed or released.

In order to emulate the movement of the paddle we are going to have to redraw the canvas multiple times a second, completely wiping it clean first each time. We achieve this by using the setInterval function and we also have a simple function that clears the canvas. Firstly let’s create a global variable for the interval.

//interval variable
var refreshStage;

And within our init() function we need to replace our single call to drawGame() with a new line like so.

//this interval calls the drawGame function below every 100th of
//a second (10ms).
refreshStage = setInterval(drawGame, 10);

This will repeatedly call our drawGame() function every 10 milliseconds. In order to clear the canvas we simply need to create a new function called clearStage().

//This function clears the stage so it is blank
function clearStage()
{
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

We can then call this function as the first thing we do in the drawGame() function; this way we wipe the canvas clean before we redraw everything.

//firstly wipe the old frame
clearStage();

Place that one line just before the drawSideLines() call. Then just after drawBall() line we can add our logic to move the player paddle if the up or down arrow has been pressed on the keyboard.

//check to see if the downPressed flag equals true
if (downPressed == true)
{
  //make sure there is room for the paddle to move further down
  if(playerPaddle + paddleHeight + 20 <= HEIGHT)
    {
      //set the new position of the playerPaddle down 5 pixels
      playerPaddle += 5;
    }
}

//check to see if the upPressed flag equals true
else if (upPressed == true)
{
  //make sure there is room for the paddle to move further up
  if(playerPaddle - 20 >= 0)
    {
      //set the new position of the playerPaddle up 5 pixels
      playerPaddle -= 5;
    }
}

In the above code we first check to see which (if either) flag is set to true. If it is they we need to make sure the paddle is not at the top or the bottom of the y axis. For the bottom we simply add the position of the player paddle to the height of the paddle and the width of the side line and make sure it is less than or equal to the height of the canvas. If it is then we add 5 pixels on to the playerPaddle variable. The logic is similar for the up key. If you run your code now you should be able to make the player paddle move up and down by using the up and down arrows on your keyboard.

Now let’s make the ball move – For this we are going to need two move global variables, one to hold the x direction of the ball and one to hold the y direction of the ball.

var directionX;
var directionY;

We can assign these variables values within the init() function as long as we place it above our new setInterval line. These values will depict the path that the ball will start moving in so feel free to change them about (you can also use negative values).

directionX = 4;
directionY = 6;

You won’t see any movement until we add a couple more lines of code that add to our x and y values with our new directionX and directionY values. This is done at the very bottom of the drawGame() function.

x += directionX;
y += directionY;

If you run your code now you should see the ball move along the canvas, but wait….it isn’t constrained to the boundaries of our canvas and disappears into the ether pretty quickly. Let’s fix that by adding some checks on the position of the ball and making it bounce of the boundaries. Place the following code just above the last two lines we inserted.

//if the x position of the ball added onto the amount we want to move
//the ball on the x axis is greater than or equal to the width of the
//canvas
if (x + directionX  >= WIDTH)
{
  //rebound the ball
  directionX = -directionX;
}

//if the x position of the ball added onto the amount we want to move
//the ball on the x axis is less than or equal to 0
else if (x + directionX <= 0)
{
  //rebound the ball
  directionX = -directionX;
}

//if the ball hits the sides (roof or floor) of the stage
if (y + directionY + ballRadius >= HEIGHT - 13 || y + directionY - ballRadius <= 13)
{
  //rebound the ball
  directionY = -directionY;
}

The above code is checking the ball’s position every time the drawGame() function is called. If the ball hits the left or right hand side of the canvas then we rebound it by negating the directionX value. If the ball hits the roof or floor of the canvas then we rebound it by negating the directionY value.

If you run your code now you should see the ball bouncing around the canvas and you should also be able to move the player paddle on the left up and down by using the up and down arrows on the keyboard.

Code: http://jsbin.com/ulowiy/4/edit

In the next part of the tutorial we will add movement for the computer paddle and add logic to have the ball bounce off the paddles otherwise reset the game if the ball makes it past a paddle.

Mark