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


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

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

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

    // create two wheels in the world
    createWheel(carGame.world, 25, 230);
    createWheel(carGame.world, 75, 230);
    
  3. 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. Put the following function in our JavaScript logic file:

    function createWheel(world, x, y) {
    // wheel circle definition
    var ballSd = new b2CircleDef();
    ballSd.density = 1.0;
    ballSd.radius = 10;
    ballSd.restitution = 0.1;
    ballSd.friction = 4.3;
    // body definition
    var ballBd = new b2BodyDef();
    ballBd.AddShape(ballSd);
    ballBd.position.Set(x,y);
    return world.CreateBody(ballBd);
    }
    
  4. 4. We...