HTML5 Game Development by Example(Second Edition)

Time for action – Moving the ball with JavaScript Interval

We will use the function to create a timer. The timer moves the ball a little bit every 30 milliseconds. We are going to also change the direction of the ball movement once it hits the playground edge. Let's make the ball move now:

1. We will use our last example, listening to multiple keyboard inputs, as the starting point.
2. Open the js/pingpong.js file in the text editor.
3. In the existing pingpong.playground object, we change to the following code that adds height and width to the playground.

   playground: {
     offsetTop: $("#playground").offset().top,
     height: parseInt($("#playground").height()),
     width: parseInt($("#playground").width()),
   },

4. We are now moving the ball, and we need to store the ball's ...