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 – creating the world with ramps


Carry out the following steps to create a ramp in the physics world:

  1. We open the game logic JavaScript file.

  2. In the createGround function, we update the function to take four arguments. The changed code is highlighted as follows:

    function createGround(x, y, width, height, rotation) {
      var bodyDef = new b2BodyDef;
      var fixDef = new b2FixtureDef;
    
      bodyDef.type = b2Body.b2_staticBody;
      bodyDef.position.x = x /pxPerMeter;
      bodyDef.position.y = y /pxPerMeter;
      bodyDef.angle = rotation * Math.PI / 180;
    
      fixDef.shape = new b2PolygonShape();
      fixDef.shape.SetAsBox(width/pxPerMeter, height/pxPerMeter);
      fixDef.restitution = 0.4;
      fixDef.friction = 3.5;
    
      // create the body from the definition.
      var body = carGame.world.CreateBody(bodyDef);
      body.CreateFixture(fixDef);
    
      return body;
    }
  3. Now, we have a function to create the ground body. We will now replace the ground creation code in the page loaded handler function with the following code...