初识box2dweb

box2dweb是box2d的javascript版本,在网上还能找到另外一个box2d的javascript版本,但是只有这个版本相对比较新,详情可以去 box2dweb查看

第一次尝试

首先要引用box2dweb的js文件

<script src="http://files.cnblogs.com/mytree/Box2dWeb-2.1.a.3.js" type="text/javascript"></script>

还需要引用一个animate文件

<script src="http://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                 } 

运行效果

注意:需要支持canvas的浏览器才能看到效果
你的浏览器不支持canvas,请使用支持html5或者canvas的浏览器进行访问

转载于:https://www.cnblogs.com/mytree/archive/2012/11/12/2765866.html