O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required