初识box2dweb
box2dweb是box2d的javascript版本,在网上还能找到另外一个box2d的javascript版本,但是只有这个版本相对比较新,详情可以去 box2dweb查看
第一次尝试
首先要引用box2dweb的js文件
<script src="https://files.cnblogs.com/mytree/Box2dWeb-2.1.a.3.js" type="text/javascript"></script>
还需要引用一个animate文件
<script src="https://files.cnblogs.com/mytree/javascript-animate.js" type="text/javascript"></script>
实现代码
1 var canvas = document.getElementById("canvas");
2 if (canvas.getContext) {
3 var ctx = canvas.getContext("2d");
4 var world;
5 var debugdraw;
6 var timer = null;
7 function init() {
8 stop();
9 world = new Box2D.Dynamics.b2World(new Box2D.Common.Math.b2Vec2(0, 10), true);
10 debugdraw = new Box2D.Dynamics.b2DebugDraw();
11 debugdraw.SetSprite(ctx);
12 debugdraw.SetAlpha(0.5);
13 debugdraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit
14 | Box2D.Dynamics.b2DebugDraw.e_centerOfMassBit);
15 debugdraw.SetDrawScale(30);
16 world.SetDebugDraw(debugdraw);
17 var bodyDef = new Box2D.Dynamics.b2BodyDef();
18 bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
19 bodyDef.position.Set(200 / 30, 0);
20 var fixDef = new Box2D.Dynamics.b2FixtureDef();
21 fixDef.density = 1;
22 fixDef.friction = 0.5;
23 fixDef.restitution = 0.2;
24 fixDef.shape = new Box2D.Collision.Shapes.b2CircleShape(10 / 30);
25 world.CreateBody(bodyDef).CreateFixture(fixDef);
26 bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody;
27 bodyDef.position.Set(200 / 30, 295 / 30);
28 fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
29 fixDef.shape.SetAsBox(200 / 30, 5 / 30);
30 world.CreateBody(bodyDef).CreateFixture(fixDef);
31 }
32
33 function update() {
34 world.Step(1 / 60, 10, 8);
35 world.DrawDebugData();
36 world.ClearForces();
37 timer = requestAnimationFrame(update);
38 }
39 function stop() {
40 if (timer) {
41 cancelRequestAnimationFrame(timer);
42 }
43 }
44
45 init();
46 update();
47 }
2 if (canvas.getContext) {
3 var ctx = canvas.getContext("2d");
4 var world;
5 var debugdraw;
6 var timer = null;
7 function init() {
8 stop();
9 world = new Box2D.Dynamics.b2World(new Box2D.Common.Math.b2Vec2(0, 10), true);
10 debugdraw = new Box2D.Dynamics.b2DebugDraw();
11 debugdraw.SetSprite(ctx);
12 debugdraw.SetAlpha(0.5);
13 debugdraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit
14 | Box2D.Dynamics.b2DebugDraw.e_centerOfMassBit);
15 debugdraw.SetDrawScale(30);
16 world.SetDebugDraw(debugdraw);
17 var bodyDef = new Box2D.Dynamics.b2BodyDef();
18 bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
19 bodyDef.position.Set(200 / 30, 0);
20 var fixDef = new Box2D.Dynamics.b2FixtureDef();
21 fixDef.density = 1;
22 fixDef.friction = 0.5;
23 fixDef.restitution = 0.2;
24 fixDef.shape = new Box2D.Collision.Shapes.b2CircleShape(10 / 30);
25 world.CreateBody(bodyDef).CreateFixture(fixDef);
26 bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody;
27 bodyDef.position.Set(200 / 30, 295 / 30);
28 fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
29 fixDef.shape.SetAsBox(200 / 30, 5 / 30);
30 world.CreateBody(bodyDef).CreateFixture(fixDef);
31 }
32
33 function update() {
34 world.Step(1 / 60, 10, 8);
35 world.DrawDebugData();
36 world.ClearForces();
37 timer = requestAnimationFrame(update);
38 }
39 function stop() {
40 if (timer) {
41 cancelRequestAnimationFrame(timer);
42 }
43 }
44
45 init();
46 update();
47 }
运行效果
注意:需要支持canvas的浏览器才能看到效果
