HTML5 Game Development Tutorial For Beginners

Box2DWeb

2012-07-16T13:42:00.001+05:30

Was playing with idea of using physics in my game, and found this amazing open source physics gaming engine called Box2D. They have ports of the game engine for javascript and AS3. The only problem being there isn't much documentation out there for js.
I will be using the Box2D-Web port of Box 2D since this version is kept up to date.

here is the code,

    var world;
    var   b2Vec2 = Box2D.Common.Math.b2Vec2
             ,    b2BodyDef = Box2D.Dynamics.b2BodyDef
             ,    b2Body = Box2D.Dynamics.b2Body
             ,    b2FixtureDef = Box2D.Dynamics.b2FixtureDef
             ,    b2Fixture = Box2D.Dynamics.b2Fixture
             ,    b2World = Box2D.Dynamics.b2World
             ,    b2MassData = Box2D.Collision.Shapes.b2MassData
             ,    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
             ,    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
             ,    b2DebugDraw = Box2D.Dynamics.b2DebugDraw
            ,   b2Vec2 = Box2D.Common.Math.b2Vec2
            ;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var mouseX, mouseY, isMouseDown;
    function init() {
        world = new b2World(
               new b2Vec2(0, 10)    //gravity
            , true                 //allow sleep
        );
        setupWorld() ;
        //setup debug draw
        var debugDraw = new b2DebugDraw();
            debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
            debugDraw.SetDrawScale(1.0);
            debugDraw.SetFillAlpha(0.3);
            debugDraw.SetLineThickness(1.0);
            debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
        world.SetDebugDraw(debugDraw);
        window.setInterval(update, 1000 / 60);
      };
    function setupWorld() {
        setupGround();
           addBouncingBall();
    }
    function setupGround() {
        var fixDef = new b2FixtureDef;
         fixDef.density = 1.0;
         fixDef.friction = 0.5;
         fixDef.restitution = 0.2;
         var bodyDef = new b2BodyDef;
         //create ground
         bodyDef.type = b2Body.b2_staticBody;
         bodyDef.position.x = 300;
         bodyDef.position.y = 400;
         fixDef.shape = new b2PolygonShape;
         fixDef.shape.SetAsBox(290, 10);
         world.CreateBody(bodyDef).CreateFixture(fixDef);
    }
    function addBouncingBall() {
        var fixDef = new b2FixtureDef;
         fixDef.density = 1.0;
         fixDef.friction = 1.0;
         fixDef.restitution = 0.1;
         var bBallbodyDef = new b2BodyDef;
         bBallbodyDef.type = b2Body.b2_dynamicBody;
        fixDef.shape = new b2CircleShape(Math.random() + 30);
         bBallbodyDef.position.x = Math.random() * 300;
         bBallbodyDef.position.y = Math.random() * 300;
         obj = new Object();
        obj.val = "Ball";
        bBallbodyDef.userData = obj;
         bBallBody = world.CreateBody(bBallbodyDef).CreateFixture(fixDef);
    };
    document.addEventListener("mousedown", handleMouseMove, true);
    function handleMouseMove(e) {
        isMouseDown = true;
        mouseX = e.clientX;
          mouseY = e.clientY;
      };
    function redraw_world(){
        if(isMouseDown)
        {
            for (b = world.GetBodyList() ; b; b = b.GetNext()) {
                if( b.GetUserData() != null)
                {
                    if(b.GetUserData().val == "Ball")
                    {
                        var force = new b2Vec2(4000,4000);
                            var point = new b2Vec2(100,100);
                            b.ApplyForce(force, point);
                    }
                }
            }
        isMouseDown = false;
           }
    };
      function update() {
        redraw_world();
           world.Step(1 / 2, 5, 5);
           world.DrawDebugData();
           world.ClearForces();
      };

Most of the code above is from online tutorials and I am sure you have come across it already if you are interested in Box2D, check the links in the Reference if you haven't. Well the bummers in this code was figuring out which body should be moved. Online there are a zillion questions posted on usage of GetUserData()/SetUserData(), even i posted one, but no definite answer for js

Initially i was doing it as

function addBouncingBall(){

....

bBallbodyDef.userData = obj;

bBallBody = world.CreateBody(bBallbodyDef).CreateFixture(fixDef); // note: bBallBody is declared global

bBallBody.SetUserData(obj);

....

So
redraw_world()
{
...
console.log(bBallBody.GetsUserData().val); // Was on the money, and it printed "Ball" to the console

for (b = world.GetBodyList() ; b; b = b.GetNext()) {
...
console.log(b.GetsUserData()); //returned null everytime.
...
}

Finally after much Googling and ogling, found out that the userdata can be assigned to the bodydef as follows, and that solved most of the problems,

bBallbodyDef.userData = obj;

There is lack of documentation for javascript port of Box2D, but you can refer the documentation for Box2dFlash. They are almost the same.

Resources:
Box2DWeb

http://blog.sethladd.com/2011/08/box2d-orientation-for-javascript.html

Box2dflash Documentation

Adding Event Handling to HTML5 Doc

2012-05-11T11:48:00.003+05:30

We will covering how to add events to the html5 Doc

Keyboard Controls
Iam using the jquery plugin jquery.hotkeys plugin to add and remove handlers for keyboard events.This makes handling keyboard events across browsers much easier.
We can escape from writing code that looks like,

if (Netscape) {

use Netscape model

}

else if (Explorer) {

use Microsoft model

}

In this example, we will be adding a simple object with Texture to the HTML5 doc and make it move based on the keyboard event.

Creating an object and adding texture to it,

// object player
var player= {
          color: "#00A",
          x: 50,
          y: 50,
          width: 20,
          height: 20

          draw: function() {
            canvas.fillStyle = this.color;
            canvas.fillRect(this.x, this.y, this.width, this.height);
          }
        };
        player.sprite = Sprite("images/player.png");
        player.draw = function() {
                this.sprite.draw(canvas, this.x, this.y);
        };

Adding Events to the object,

function update() {

.....

// Add collision detection code here

        if(keydown.left ) {
                player.x -= 2;
          }
          if(keydown.right ) {
                player.x += 2;
          }
        if(keydown.down ) {
                player.y += 2;
          }
        if(keydown.up ) {
                player.y -= 2;
          }
        ....

}

p.s. JavaScript is a language. jQuery is a framework built with JavaScript to help JavaScript programmers who are doing common web tasks.

Hello World

2012-05-03T10:35:00.001+05:30

This blog is my notes as I learn to develop Games in HTML5. Like all good programmers, I'm beginning with the simple "Hello World".

For this Chapter, you need to know two basic concepts,

1. Canvas will be the basic building block for all the games(with a graphic interface) you develop in HTML5.

2. JavaScript does most of your dirty work.

There are 2ways you can initialize the canvas, using the <canvas> element in HTML5, or thru Javascript, for this tutorial iam doing it thru Javascript.

The code can be broken as follows,

Canvas Initialization

var CANVAS_WIDTH = 480;

var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");

var canvas = canvasElement.get(0).getContext("2d");

canvasElement.appendTo('body');

This initializes the canvas and adds it to the body of the HTML.

Game Loop

var FPS = 30;

setInterval(function() {

update();

draw();

}, 1000/FPS);

The Frame rates refers to the speed at which the image is refreshed. The Game loop continuously redraws the graphics in the canvas to give effect of smooth transition of the objects being animated.

Draw and update

var textX = 0;

var textY = 0;

function update() {

textX += 1;

textY += 0.5;

}

function draw() {

canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

canvas.fillStyle = "#000";

canvas.fillText("Hello World!", textX , textY);

}

The update method gives the new position of the "Hello World" text, while the draw() method clears the old contents of the canvas and paints the new "Hello World" text in the new position.

Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Hello World Demo</title>

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

</head>

<body>

<h1>Hello World Demo</h1>

<script type='text/javascript'>

//<![CDATA[

var CANVAS_WIDTH = 480;

var CANVAS_HEIGHT = 320;

var FPS = 30;

var textX = 0;

var textY = 0;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");

var canvas = canvasElement.get(0).getContext("2d");

canvasElement.appendTo('body');

setInterval(function() {

update();

draw();

}, 1000/FPS);

function update() {

textX += 1;

textY += 0.5;

}

function draw() {

canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

canvas.fillStyle = "#000";

canvas.fillText("Hello World!", textX , textY);

}

//]]>

</script>

</body>

</html>

My 2Cents, one thing I find most useful in writing HTML code is constant testing, its better to test the code after each change rather then do a zillion rollback later to find where the issue started.

Reference
http://www.html5rocks.com/en/tutorials/canvas/notearsgame/