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 – placing Ping Pong game elements in the DOM

  1. We will continue from our jQuery installation example, and open the index.html file in a text editor.
  2. Then, we will create the following playground and game objects with DIV nodes in the body. There are two paddles and one ball inside the playground, and the playground is placed inside the game:
    <div id="game">
      <div id="playground">
        <div class="paddle-hand right"></div>
        <div class="paddle-hand left"></div>
        <div id="paddleA" class="paddle"></div>
        <div id="paddleB" class="paddle"></div>
        <div id="ball"></div>
      </div>
    </div>
  3. We now have the structure of the game object ready, and it is time to apply styles to them. We will add the following styles to the pingpong.css file:
    #game { position: relative; ...

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