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 – adding a flag graphic and a car graphic to the game

Carry out the following steps to draw two graphics on our physics objects:

  1. We will first download the graphics we need for this example. To download the graphics, go to http://mak.la/book-assets.
  2. Put the image files for this chapter in the images folder.
  3. Now, it is time to edit the index.html file. Add the following HTML markup to the body section:
    <div id="asset">
      <img id="flag" src='images/flag.png'>
      <img id="bus" src="images/bus.png">
      <img id="wheel" src="images/wheel.png">
    </div>
  4. We want to hide the asset DIV that contains our img tags. Open the cargame.css file and add the following CSS rule to keep the asset DIV out of our sight:
    #asset { position: absolute; top: -9999px; } ...

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