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

Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.