Book Image

HTML5 Games Development by Example: Beginner's Guide

By : Makzan
Book Image

HTML5 Games Development by Example: Beginner's Guide

By: Makzan

Overview of this book

<p>HTML5 promises to be the hot new platform for online games. HTML5 games work on computers, smartphones, and tablets – including iPhones and iPads. Be one of the first developers to build HTML5 games today and be ready for tomorrow!</p> <p>The book will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.</p> <p>HTML5, CSS3 and related JavaScript API is the latest hot topic in Web. These standards bring us the new game market, HTML5 Games. With the new power from them, we can design games with HTML5 elements, CSS3 properties and JavaScript to play in browsers.</p> <p>The book divides into 9 chapters with each one focusing on one topic. We will create 6 games in the book and specifically learn how we draw game objects, animate them, adding audio, connecting players and building physics game with Box2D physics engine.</p>
Table of Contents (16 chapters)
HTML5 Games Development by Example
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Time for action Connecting the box and two circles with revolute joint


Carry out the following steps:

  1. 1. We are still working only on the logic part. Open our JavaScript logic file in a text editor.

  2. 2. Add the following global variable at the top of the document to reference the car body:

    var car;
    
  3. 3. Create a function named createCarAt which takes the coordinate as arguments. Then, we move the body and the wheel creation code in this function. Afterwards, add the following highlighted Joint creation code. At last, return the car body:

    function createCarAt(x, y) {
    // the car box definition
    var boxSd = new b2BoxDef();
    boxSd.density = 1.0;
    boxSd.friction = 1.5;
    boxSd.restitution = .4;
    boxSd.extents.Set(40, 20);
    // the car body definition
    var boxBd = new b2BodyDef();
    boxBd.AddShape(boxSd);
    boxBd.position.Set(x,y);
    var carBody = carGame.world.CreateBody(boxBd);
    // creating the wheels
    var wheelBody1 = createWheel(carGame.world, x-25, y+20);
    var wheelBody2 = createWheel(carGame.world, x+25,...