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,
     }
   };

3. Then, create the following function that handles the mouse's enter, move, and leave events, and place it inside the js/pingpong.js file:

   function handleMouseInputs() {
     // run the game...