西天取经第一步——制作自己的HTML5游戏

　　废话不说，直入主题：这是一个休闲益智类游戏，与愤怒的小鸟类似采用Box2dWeb引擎。再开发游戏之前，首先我要把Box2dWeb给总结一下方便以后调用

大家可以在http://code.google.com/p/box2dweb/找到最新的源代码和文档、在http://www.box2dflash.org/docs/找到API

基本对象：

• world：主对象

• body：刚性的物体，有一个或多个形状组成，这些形状通过载具添加到物体上
• shape：二维形状，如圆或多边形
• fixture：载具，用来向物体上添加形状以检测碰撞，载具还包括一些属性，如摩擦系数--friction、碰撞系数和碰撞阀值
• joint：结合点

使用方法：定义world对象——>使用载具添加物体和形状——>操作body对象确定位置和状态——>绘制body对象

一、定义world对象：

代码：

//将最常用的对象定义为快捷变量
var b2Vec2 = Box2D.Common.Math.b2Vec2;
var b2BodyDef = Box2D.Dynamics.b2BodyDef;
var b2Body = Box2D.Dynamics.b2Body;
var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
var b2Fixture = Box2D.Dynamics.b2Fixture;
var b2World = Box2D.Dynamics.b2World;
var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
var b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef;

var world;
//canvas上的30像素表示Box2d中的一米
var scale=30;
function init(){
var gravity = new b2Vec2(0,9.8);//重力加速度为9.8m/s^2，方向向下
var allowSleep = true;//允许静止的物体进入休眠状态，休眠物体不参与物理仿真计算
world = new b2World(gravity,allowSleep);

}

*注意　　Box2d使用矩阵系统进行所有的计算，当物体的尺寸在0.1~10m之间时，运算效果最好。

二、添加物体步骤：

1. 使用b2BodyDef声明一个body的预定义对象。该对象包含了物体的位置和类型（静态或动态）
2. 使用b2FixtureDef声明一个fixture的预定义对象。该对象包含了指定形状的密度、摩擦系数和弹性恢复系数
3. 设置载具指定的形状
4. 将物体的预定义对象传入createBody（）方法中，返回一个body对象
5. 将载具的预定义对象传入createFixture（）方法中，为物体指定形状

代码：

function createFloor(){
bodyDef.type = b2Body.b2_staticBody;
bodyDef.position.x = 640/2/scale;
bodyDef.position.y = 450/scale;

//fixture用来向body添加shape以实现碰撞检测，fixture的预定义对象，用来建立fixture
var fixtureDef = new b2FixtureDef;
fixtureDef.density = 1.0;
fixtureDef.friction = 0.5;
fixtureDef.restitution = 0.2;

fixtureDef.shape = new b2PolygonShape;
fixtureDef.shape.SetAsBox(320/scale,10/scale);//640像素宽，20像素高

var body = world.CreateBody(bodyDef);
var fixture = body.CreateFixture(fixtureDef);

}

三、绘制世界：调试绘图模式

使用DrawDebugData（）方法能用最简单的几何图形绘制世界中的物体，很方便我们进行调试

代码：

var context;
function setupDebugDraw(){
context = document.getElementById('canvas').getContext('2d');
var debugDraw = new b2DebugDraw();
//绘制调试画面
debugDraw.SetSprite(context);
//设置绘图比例
debugDraw.SetDrawScale(scale);
//填充的透明度为0.3
debugDraw.SetFillAlpha(0.3);
//线条的宽度为1
debugDraw.SetLineThickness(1.0);
//绘制所有的shape和joint
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
//设置调制绘图模式
world.SetDebugDraw(debugDraw);

}

四、动画步骤：
1、告诉box2d在很短的时间间隔（如典型的1/60秒）进行一次模拟，使用world.step()
2、使用world.clearForces（）方法清除作用在物体上的力
3、将所有物体重新绘制在新的位置。使用world.DrawDebugData（）
下面在自己的animate（）方法中实现上面的步骤
var timeStep = 1/60;
//建议的迭代数，速度是8，位置是3
var velocityIterations = 8;
var positionIterations = 3;
function animate(){
world.Step(timeStep,velocityIterations,positionIterations);
world.ClearForces();

world.DrawDebugData();

setTimeout(animate,timeStep);
}
*注意 当时间间隔至少为60Hz或者1/60秒的时候，引擎的运行效果较好。最好将时间间隔设置为恒定且不随帧频变化，否则，会很难调试。同样，速度迭代数是8，位置迭代数是3是较好的数据设置。使用较少的迭代数会提高运行速度，但准确性会降低；反之，使用较大的迭代数会降低运行速度，提高模拟的准确性。