Box2D, JavaScript, HTML5 : May 2012

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.

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/

Box2D, JavaScript, HTML5

Friday, May 11, 2012

Adding Event Handling to HTML5 Doc

Thursday, May 3, 2012

Hello World