HTML5 Game Development by Example : Beginner's Guide - Second Edition

Time for action – moving DOM objects by mouse input

We are going to create a traditional Ping Pong game. There is a paddle on both the left and right sides of the playground. A ball is placed in the middle of the playground. Players can control the right paddle and move it up and down by using the mouse. We will focus on the mouse input and leave the ball movement for a later section:

1. Let's continue with our pingpong directory.
2. Next, add a playground object inside the pingpong data object in the js/pingpong.js file. This stores variables that are related to playground:

   // data definition var pingpong = { paddleA: { x: 50, y: 100, width: 20, height: 70 }, paddleB: { x: 320, y: 100, width: 20, height: 70 }, playground: { offsetTop: $("#playground").offset().top, ...