HTML5 Zone
HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 93 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5 Game Development – Lesson 8

03.07.2012
| 2587 views |
  • submit to reddit

We Recommend These Resources

NOSQL for the Enterprise

This is our next game development article. We continue a series of articles on game development in HTML5 using canvas. Today I will show you how to apply some physics to your project (with using Box2D). Box2D is popular open source engine that simulates 2D physics for applications. 2D Physics Engine is a hot topic in game development. With the help of this physics engine, we can easily create a playable game by just defining an environment and a simple rule.

Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 7.

Here are our demo and downloadable packages:

Live Demo

download in package

Ok, download the example files and let's start coding !

Step 0. Pre-phase

First, you have to download the Box2D library here.

Step 1. HTML

Today we have to link all necessary library files to our project.

index.html
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Game Development - Lesson 8 | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <script src="js/protoclass.js"></script>
        <script src="js/jquery-1.6.min.js"></script>

        <!-- box2djs -->
        <script src="js/box2d/common/b2Settings.js"></script>
        <script src="js/box2d/common/math/b2Vec2.js"></script>
        <script src="js/box2d/common/math/b2Mat22.js"></script>
        <script src="js/box2d/common/math/b2Math.js"></script>
        <script src="js/box2d/collision/b2AABB.js"></script>
        <script src="js/box2d/collision/b2Bound.js"></script>
        <script src="js/box2d/collision/b2BoundValues.js"></script>
        <script src="js/box2d/collision/b2Pair.js"></script>
        <script src="js/box2d/collision/b2PairCallback.js"></script>
        <script src="js/box2d/collision/b2BufferedPair.js"></script>
        <script src="js/box2d/collision/b2PairManager.js"></script>
        <script src="js/box2d/collision/b2BroadPhase.js"></script>
        <script src="js/box2d/collision/b2Collision.js"></script>
        <script src="js/box2d/collision/Features.js"></script>
        <script src="js/box2d/collision/b2ContactID.js"></script>
        <script src="js/box2d/collision/b2ContactPoint.js"></script>
        <script src="js/box2d/collision/b2Distance.js"></script>
        <script src="js/box2d/collision/b2Manifold.js"></script>
        <script src="js/box2d/collision/b2OBB.js"></script>
        <script src="js/box2d/collision/b2Proxy.js"></script>
        <script src="js/box2d/collision/ClipVertex.js"></script>
        <script src="js/box2d/collision/shapes/b2Shape.js"></script>
        <script src="js/box2d/collision/shapes/b2ShapeDef.js"></script>
        <script src="js/box2d/collision/shapes/b2BoxDef.js"></script>
        <script src="js/box2d/collision/shapes/b2CircleDef.js"></script>
        <script src="js/box2d/collision/shapes/b2CircleShape.js"></script>
        <script src="js/box2d/collision/shapes/b2MassData.js"></script>
        <script src="js/box2d/collision/shapes/b2PolyDef.js"></script>
        <script src="js/box2d/collision/shapes/b2PolyShape.js"></script>
        <script src="js/box2d/dynamics/b2Body.js"></script>
        <script src="js/box2d/dynamics/b2BodyDef.js"></script>
        <script src="js/box2d/dynamics/b2CollisionFilter.js"></script>
        <script src="js/box2d/dynamics/b2Island.js"></script>
        <script src="js/box2d/dynamics/b2TimeStep.js"></script>
        <script src="js/box2d/dynamics/contacts/b2ContactNode.js"></script>
        <script src="js/box2d/dynamics/contacts/b2Contact.js"></script>
        <script src="js/box2d/dynamics/contacts/b2ContactConstraint.js"></script>
        <script src="js/box2d/dynamics/contacts/b2ContactConstraintPoint.js"></script>
        <script src="js/box2d/dynamics/contacts/b2ContactRegister.js"></script>
        <script src="js/box2d/dynamics/contacts/b2ContactSolver.js"></script>
        <script src="js/box2d/dynamics/contacts/b2CircleContact.js"></script>
        <script src="js/box2d/dynamics/contacts/b2Conservative.js"></script>
        <script src="js/box2d/dynamics/contacts/b2NullContact.js"></script>
        <script src="js/box2d/dynamics/contacts/b2PolyAndCircleContact.js"></script>
        <script src="js/box2d/dynamics/contacts/b2PolyContact.js"></script>
        <script src="js/box2d/dynamics/b2ContactManager.js"></script>
        <script src="js/box2d/dynamics/b2World.js"></script>
        <script src="js/box2d/dynamics/b2WorldListener.js"></script>
        <script src="js/box2d/dynamics/joints/b2JointNode.js"></script>
        <script src="js/box2d/dynamics/joints/b2Joint.js"></script>
        <script src="js/box2d/dynamics/joints/b2JointDef.js"></script>
        <script src="js/box2d/dynamics/joints/b2DistanceJoint.js"></script>
        <script src="js/box2d/dynamics/joints/b2DistanceJointDef.js"></script>
        <script src="js/box2d/dynamics/joints/b2Jacobian.js"></script>
        <script src="js/box2d/dynamics/joints/b2GearJoint.js"></script>
        <script src="js/box2d/dynamics/joints/b2GearJointDef.js"></script>
        <script src="js/box2d/dynamics/joints/b2MouseJoint.js"></script>
        <script src="js/box2d/dynamics/joints/b2MouseJointDef.js"></script>
        <script src="js/box2d/dynamics/joints/b2PrismaticJoint.js"></script>
        <script src="js/box2d/dynamics/joints/b2PrismaticJointDef.js"></script>
        <script src="js/box2d/dynamics/joints/b2PulleyJoint.js"></script>
        <script src="js/box2d/dynamics/joints/b2PulleyJointDef.js"></script>
        <script src="js/box2d/dynamics/joints/b2RevoluteJoint.js"></script>
        <script src="js/box2d/dynamics/joints/b2RevoluteJointDef.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 Game Development - Lesson 8</h2>
            <a href="http://www.script-tutorials.com/html5-game-development-lesson-8/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <canvas id="game" width="800" height="600"></canvas>
        </div>
    </body>
</html>

Step 2. CSS

css/main.css

I won’t publish CSS styles today; there are only a few page layout styles. You can find this file in our package.

Step 3. JS

js/jquery-1.6.min.js and js/protoclass.js

Both libraries available in our package. Next file is the most important – it is the main code of our game:

js/script.js
var canvas, ctx;
var canvasWidth;
var canvasHeight;
var world;
var iBorder = 5;

// get rand number between X and Y
function getRand(x, y) {
    return Math.floor(Math.random()*y)+x;
}

$(function() {
    // create the world
    world = createWorld();

    // get canvas and context
    canvas = document.getElementById('game');
    ctx = canvas.getContext('2d');
    canvasWidth = parseInt(canvas.width);
    canvasHeight = parseInt(canvas.height);

    // create the ground
    createGround(canvasWidth / 2, canvasHeight - iBorder, canvasWidth / 2, iBorder, 0);
    createGround(iBorder, canvasHeight / 2, iBorder, canvasHeight / 2, 0); // left border
    createGround(canvasWidth - iBorder, canvasHeight / 2, iBorder, canvasHeight / 2, 0); // right border

    // add first rand object
    addObjects();

    // draw frame
    frame();
});

// add random objects
function addObjects() {
    var iVar = getRand(1, 2);

    if (iVar == 1) {
        var x = getRand(100, 600);
        var y = 0;
        var r = getRand(10, 40);
        createCircleAt(x, y, r);
    } else if (iVar == 2) {
        var x = getRand(100, 600);
        var y = 0;
        var w = getRand(5, 40);
        var h = getRand(5, 40);
        createBoxAt(x, y, w, h);
    }

    // set timer
    setTimeout(addObjects, 500);
}

// draw frame
function frame() {
    world.Step(1.0 / 60, 1);
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // draw world
    drawWorld(world, ctx);

    // set timer
    setTimeout(frame, 10);
}

// create world
function createWorld() {

    // set the size of the world
    var worldAABB = new b2AABB();
    worldAABB.minVertex.Set(-1000, -1000);
    worldAABB.maxVertex.Set(1000, 1000);

    // Define the gravity
    var gravity = new b2Vec2(0, 200);

    // set to ignore sleeping object
    var doSleep = false;

    // finally create the world with the size, graivty and sleep object parameter.
    return new b2World(worldAABB, gravity, doSleep);
}

// create ground (box-type object)
function createGround(x, y, width, height, rotation) {
    // box shape definition
    var groundSd = new b2BoxDef();
    groundSd.extents.Set(width, height);
    groundSd.restitution = 0.4;

    var groundBd = new b2BodyDef();
    groundBd.AddShape(groundSd);
    groundBd.position.Set(x, y);
    groundBd.rotation = rotation * Math.PI / 180;
    return world.CreateBody(groundBd);
}

// create box
function createBoxAt(x, y, w, h) {
    var boxSd = new b2BoxDef();
    boxSd.density = 1.0;
    boxSd.friction = 1.0;
    boxSd.restitution = .5;
    boxSd.extents.Set(w, h);

    // add to world as shape
    var boxBd = new b2BodyDef();
    boxBd.AddShape(boxSd);
    boxBd.position.Set(x,y);
    return world.CreateBody(boxBd);
}

// create circle
function createCircleAt(x, y, r) {
    var boxSd = new b2CircleDef();
    boxSd.density = 1.0;
    boxSd.friction = 1.0;
    boxSd.restitution = .5;
    boxSd.radius = r;

    // add to world as shape
    var boxBd = new b2BodyDef();
    boxBd.AddShape(boxSd);
    boxBd.position.Set(x,y);
    return world.CreateBody(boxBd);
}

// draw world
function drawWorld(world, context) {
    for (var b = world.m_bodyList; b != null; b = b.m_next) {
        for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
            drawShape(s, context);
        }
    }
}

// draw shapes
function drawShape(shape, context) {
    context.strokeStyle = '#0000ff';
    context.fillStyle = 'rgba(100, 100, 255, 0.8)';
    context.beginPath();

    switch (shape.m_type) {
        case b2Shape.e_circleShape:
            var circle = shape;
            var pos = circle.m_position;
            var r = circle.m_radius;
            var segments = 16.0;
            var theta = 0.0;
            var dtheta = 2.0 * Math.PI / segments;
            context.moveTo(pos.x + r, pos.y);
            for (var i = 0; i < segments; i++) {
                var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
                var v = b2Math.AddVV(pos, d);
                context.lineTo(v.x, v.y);
                theta += dtheta;
            }
            context.lineTo(pos.x + r, pos.y);
            context.moveTo(pos.x, pos.y);
            var ax = circle.m_R.col1;
            var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
            context.lineTo(pos2.x, pos2.y);
            break;
        case b2Shape.e_polyShape:
            var poly = shape;
            var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
            context.moveTo(tV.x, tV.y);
            for (var i = 0; i < poly.m_vertexCount; i++) {
                var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
                context.lineTo(v.x, v.y);
            }
            context.lineTo(tV.x, tV.y);
            break;
    }
    context.fill();
    context.stroke();
}

I have added my comments everywhere. Hope that all this code is pretty understandable.

Live Demo

download in package

Conclusion

And that’s it! You have just completed our new lesson with HTML5 and Box2D. Congratulations!

 

Published at DZone with permission of Andrey Prikaznov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers