Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

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;
    }
  5. We will now move on to the logic part. Open the box2dcargame.js JavaScript file.

  6. In the restartGame function, add the highlighted code to assign the reference of the flag image to the winning destination flag:

    if...