<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="init();">
<div class="box2d-canvas-container size640x480">
<canvas id="canvas" width="600" height="400" style="background-color:#333;"></canvas>
</div>
<script src="http://box2dweb.googlecode.com/svn/trunk/Box2d.min.js"></script>
<script async>
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
</script>
<script>
function init(){
var b2Vec2 = Box2D.Common.Math.b2Vec2,
b2AABB = Box2D.Collision.b2AABB,
b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2Fixture = Box2D.Dynamics.b2Fixture,
b2World = Box2D.Dynamics.b2World,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef,
world = new b2World(
new b2Vec2(0, 10),
true
),
fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var bodyDef = new b2BodyDef;
//creando el suelo
bodyDef.type = b2Body.b2_staticBody;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(20, 2);
bodyDef.position.Set(10, 400 / 30 + 1.8);
world.CreateBody(bodyDef).CreateFixture(fixDef);
bodyDef.position.Set(10, -1.8);
world.CreateBody(bodyDef).CreateFixture(fixDef);
fixDef.shape.SetAsBox(2, 14);
bodyDef.position.Set(-1.8, 13);
world.CreateBody(bodyDef).CreateFixture(fixDef);
bodyDef.position.Set(21.8, 13);
world.CreateBody(bodyDef).CreateFixture(fixDef);
//haciendo testing con objetos dinámicos
//cuadrado
bodyDef.type = b2Body.b2_dynamicBody;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(1, 1);
bodyDef.position.x = 1;
bodyDef.position.y = 1;
world.CreateBody(bodyDef).CreateFixture(fixDef);
//círculo
fixDef.shape = new b2CircleShape (1);
world.CreateBody(bodyDef).CreateFixture(fixDef);
//triángulo
fixDef.shape = new b2PolygonShape;
var BodyVertices = [
new b2Vec2(0, -1),
new b2Vec2(1, 1),
new b2Vec2(-1, 1)
];
fixDef.shape.SetAsArray(BodyVertices);
world.CreateBody(bodyDef).CreateFixture(fixDef);
//generando el debug draw
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById('canvas').getContext('2d'));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
window.setInterval(update, 1000 / 60 );
//mouse
var mX,
mY,
mPVec,
isMdown,
selectedBody,
mJoint,
canvasPos = getElementPosition(document.getElementById('canvas'));
document.addEventListener('mousedown', function(e){
isMdown = true;
handleMouseMove(e);
document.addEventListener('mousemove', handleMouseMove, true);
}, true);
document.addEventListener('mouseup', function(){
document.removeEventListener('mousemove', handleMouseMove, true);
isMdown = false;
mX = 'undefined';
mY = 'undefined';
}, true);
function handleMouseMove(e){
mX = (e.clientX - canvasPos.x) / 30;
mY = (e.clientY - canvasPos.y) / 30;
};
function getBodyAtMouse(){
mPVec = new b2Vec2(mX, mY);
var aabb = new b2AABB();
aabb.lowerBound.Set(mX - 0.001, mY - 0.001);
aabb.upperBound.Set(mX + 0.001, mY - 0.001);
//consultando al mundo que cubre las figuras
selectedBody = null;
world.QueryAABB(getBodyCB, aabb);
return selectedBody;
};
function getBodyCB(fixture){
if(fixture.GetBody().GetType() != b2Body.b2_staticBody){
if(fixture.GetShape().TestPoint(fixture.GetBody().GetTransform(), mPVec)){
selectedBody = fixture.GetBody();
return false;
}
}
return true;
}
//update
function update(){
if(isMdown && (!mJoint)){
var body = getBodyAtMouse();
if(body){
var md = new b2MouseJointDef();
md.bodyA = world.GetGroundBody();
md.bodyB = body;
md.target.Set(mX, mY);
md.collideConnected = true;
md.maxForce = 300.0 * body.GetMass();
mJoint = world.CreateJoint(md);
body.SetAwake(true);
}
}
if(mJoint){
if(isMdown){
mJoint.SetTarget(new b2Vec2(mX, mY));
}else{
world.DestroyJoint(mJoint);
mJoint = null;
}
}
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
}
//helpers
function getElementPosition(element){
var el= element,
tagname = "",
x = 0,
y = 0;
while((typeof(el) == 'object') && (typeof(el.tagName) != 'undefined')){
y += el.offsetTop;
x += el.offsetLeft;
tagname = el.tagName.toUpperCase();
if(tagname == 'BODY'){
el = 0;
}
if(typeof(el) == 'object'){
if(typeof(el.offsetParent) == 'object'){
el = el.offsetParent;
}
}
};
return {x:x, y:y};
}
}
</script>
</body>
</html>