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 – putting two circles in the world


We will add two circles to the world by carrying out the following steps:

  1. Open the html5games.box2dcargame.js JavaScript file to add the wheel bodies.

  2. Add the following code after the box creation code. This calls the createWheel function which we will write to create a circular shaped body:

    // create two wheels in the world
    createWheel(25, 230);
    createWheel(75, 230);
  3. Now let's work on the createWheel function. We design this function to create a circle-shaped body in the given world at the given x and y coordinates in the world. To do this, put the following function in our JavaScript logic file:

    function createWheel(x, y) {
      var bodyDef = new b2BodyDef;
      var fixDef = new b2FixtureDef;
    
      bodyDef.type = b2Body.b2_dynamicBody;
      bodyDef.position.x = x/pxPerMeter;
      bodyDef.position.y = y/pxPerMeter;
    
      fixDef.shape = new b2CircleShape();
      fixDef.shape.SetRadius(10/pxPerMeter);
    
      fixDef.density = 1.0;
      fixDef.restitution = 0.1;
      fixDef.friction...