JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://box2dweb.googlecode.com/svn/trunk/Box2d.min.js"></script>
<canvas id="playground" width="500" height="200" ></canvas>
JavaScript
(function(){
// onload function!
// global shorthands!
var b2Vec2 = Box2D.Common.Math.b2Vec2,
b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2World = Box2D.Dynamics.b2World,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
// global var: wolr
var world = new b2World(
new b2Vec2(0, 10), //gravity vector
true
);
// create the fixtures/blocks
var i;
var link_to_block=[];
for(i=0;i<8;i++)
{
var blocks = new b2FixtureDef; // this is where you hang all your objects?
blocks.shape = new b2PolygonShape;
blocks.density = 1.0;
blocks.friction = 0.5;
blocks.restitution = .5;
blocks.shape.SetAsArray([
new b2Vec2(-1, 0),
new b2Vec2(1, 0),
new b2Vec2(1, 8),
new b2Vec2(-1, 8)],4
); //rectangle shape
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_kinematicBody;
bodyDef.position.Set(i*2, 7);
link_to_block[i]=world.CreateBody(bodyDef);
link_to_block[i].CreateFixture(blocks);
}
// now create a dynamic object that will drop on the blocks!
var bodyDef = new b2BodyDef;
var target_shape = new b2FixtureDef;
bodyDef.type = b2Body.b2_dynamicBody;
target_shape.shape = new b2PolygonShape;//new
target_shape.density = 0.1;
//b2CircleShape(1.5); //circle shape
target_shape.shape.SetAsArray([
new b2Vec2(-4, -1),
new b2Vec2(3, -2),
new b2Vec2(4, -1),
new b2Vec2(4, 1),
new b2Vec2(3, 2),
new b2Vec2(-4, 1)],6
); //rectangle shape
bodyDef.position.Set(7,0);
var body=world.CreateBody(bodyDef);
body.CreateFixture(target_shape);
body.ApplyImpulse(new b2Vec2(i++%2?0.5:-0.5, 0), ...