导航

【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果

Posted on 2014-02-05 21:05  ghostll  阅读(1018)  评论(0)  编辑  收藏  举报

最近开始研究Box2dweb，Box2dweb是一款物理引擎，主要是对物理刚体和关节连接进行了封装，box2dweb很强大当然也有些复杂，不过幸好lufylegend.js做了这方面的封装，在制作时如果用lufylegend配合Box2dweb，那就简单多了。要学习box2dWeb我还是给大家推荐拉登大叔的博客，地址：http://www.ladeng6666.com/blog，写得相当好，话说他的文章中还运用了相当多的修辞手法呢，看他的文章边学技术，边学写作，哈哈。顺便也提一提，本次实现的效果也是模仿拉登大叔一篇文章中的效果，不过大叔的是ActionScript版本的，我是Js版的。

最后还是祝大家新年快乐吧~虽然这祝福来晚了，不过还是满含我的诚意……偷笑

好了，费话不多说，直接进入正题。

首先看截图吧，如下：

测试链接：http://game.h5stars.com/20141952ee70ee9c117/

接下来就来讲一讲实现步骤。

 

一，准备工作

首先你需要下载lufylegend和box2dweb 这两个引擎。

box2dweb可以到这里下载：

http://code.google.com/p/box2dweb/downloads/list

lufylegend可以到这里：

http://lufylegend.com/lufylegend

关于lufylegend怎么用，可以到这里看看API文档：

http://lufylegend.com/lufylegend/api

box2dWeb怎么用？其实我也不太清楚，这次主要用lufylegend封装的API，用到原生API的时候我自己来讲讲吧，讲的差不要骂喔~

 

二，原理

这个小demo的原来其实很简单，就是将几块矩形小刚体用旋转关节连接起来。当然，说起来很容易，其实做起来还是要深究的。在我看到拉登大叔的文章之前，其实我也没有想到什么方法，于是就借鉴了大叔的文章，原理不是我独创的，所以呢，不好直说，免得大叔看到了不高兴，大家看一看拉登大叔的文章就能明白原理了。

文章地址如下：http://www.ladeng6666.com/blog/2012/11/25/create-box2d-linkage-or-bridge-effect-using-b2joint/

 

三，含详细注释的源代码

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>box2d demo</title>  
  6.     <script type="text/javascript" src="./Box2dWeb-2.1.a.3.min.js"></script>  
  7.     <script type="text/javascript" src="./lufylegend-1.8.7.min.js"></script>  
  8.       
  9.     <script type="text/javascript">  
  10.         init(50,"mylegend",600,400,pageInit);  
  11.         function pageInit(){  
  12.             LStage.setDebug(true);  
  13.             LStage.box2d = new LBox2d();  
  14.   
  15.             if(LStage.canTouch == true){  
  16.                 document.body.style.margin = "0px 0px";  
  17.                 LStage.stageScale = LStageScaleMode.SHOW_ALL;  
  18.                 LSystem.screen(LStage.FULL_SCREEN);  
  19.             }  
  20.   
  21.             var mainObj = new Main();  
  22.             addChild(mainObj);  
  23.         }  
  24.   
  25.         /** 
  26.          *Main 
  27.          *@author: Yorhom 
  28.          *@http://blog.csdn.net/yorhomwang 
  29.         */  
  30.         function Main(){  
  31.             var s = this;  
  32.             base(s,LSprite,[]);  
  33.   
  34.             /**加入围墙*/  
  35.             s.addWall();  
  36.             /**加入锁链桥*/  
  37.             s.addBridge();  
  38.             /**随机加入其他物体*/  
  39.             s.addRandomObj();  
  40.         }  
  41.         Main.prototype.addWall = function(){  
  42.             var s = this;  
  43.               
  44.             //设置围墙大小  
  45.             var wallSize = 10;  
  46.             //设置围墙数据  
  47.             var wallList = [  
  48.                 //左边  
  49.                 [wallSize*0.5, LStage.height*0.5, wallSize, LStage.height],  
  50.                 //右边  
  51.                 [LStage.width-wallSize*0.5, LStage.height*0.5, wallSize, LStage.height],  
  52.                 //上面  
  53.                 [LStage.width*0.5, wallSize*0.5, LStage.width, wallSize],                 
  54.                 //下面  
  55.                 [LStage.width*0.5, LStage.height-wallSize*0.5, LStage.width, wallSize],  
  56.             ];  
  57.             //通过遍历围墙数据，添加四面围墙  
  58.             for(var key in wallList){  
  59.                 //获取数据  
  60.                 var item = wallList[key];  
  61.                 //创建围墙对象  
  62.                 var wallLayer = new LSprite();  
  63.                 //设定对象位置  
  64.                 wallLayer.x = item[0];  
  65.                 wallLayer.y = item[1];  
  66.                 //加入刚体  
  67.                 wallLayer.addBodyPolygon(item[2],item[3],0);  
  68.                 //加入显示列表  
  69.                 s.addChild(wallLayer);  
  70.             }  
  71.         };  
  72.         Main.prototype.addBridge = function(){  
  73.             var s = this;  
  74.   
  75.             //关节向量  
  76.             var vec = new LStage.box2d.b2Vec2();  
  77.             //添加对象数量  
  78.             var amount = 6;  
  79.             //设置对象宽度和高度  
  80.             var bw=50,bh=15;  
  81.             //获取锁链桥总长度  
  82.             var bridgeWidth = bw*amount;  
  83.             //设置锁链桥开始位置  
  84.             var initX=(LStage.width-bridgeWidth)*0.5,  
  85.                 initY=(LStage.height-bh)*0.5+30;  
  86.             //设置用于固定锁链桥的定点半径  
  87.             var anchorR = 15;  
  88.   
  89.             /**用于固定锁链桥的定点A*/  
  90.             var anchorA = new LSprite();  
  91.             anchorA.x = initX-anchorR;  
  92.             anchorA.y = initY-anchorR;  
  93.             anchorA.addBodyCircle(anchorR,anchorR,anchorR,0);  
  94.             s.addChild(anchorA);  
  95.             /**用于固定锁链桥的定点B*/  
  96.             var anchorB = new LSprite();  
  97.             anchorB.x = bridgeWidth+initX-anchorR;  
  98.             anchorB.y = initY-anchorR;  
  99.             anchorB.addBodyCircle(anchorR,anchorR,anchorR,0);  
  100.             s.addChild(anchorB);  
  101.   
  102.             //上一个对象  
  103.             var previousBlock = anchorA;  
  104.   
  105.             /**循环添加刚体*/  
  106.             for(var i=0; i<amount; i++){  
  107.                 //实例化对象  
  108.                 var block = new LSprite();  
  109.                 //设定对象位置  
  110.                 block.x = initX+i*bw+bw*0.5;  
  111.                 block.y = initY;  
  112.                 //加入刚体  
  113.                 block.addBodyPolygon(bw,bh,1);  
  114.                 //设置鼠标拖动  
  115.                 block.setBodyMouseJoint(true);  
  116.                 //加入显示列表  
  117.                 s.addChild(block);  
  118.                 //加入关节  
  119.                 var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();  
  120.                 vec.Set((initX+i*bw)/30, initY/30);  
  121.                 revoluteJoint.Initialize(previousBlock.box2dBody,block.box2dBody,vec);  
  122.                 LStage.box2d.world.CreateJoint(revoluteJoint);  
  123.                 //更改上一个对象  
  124.                 previousBlock = block;  
  125.             }  
  126.             //将最后一个刚体固定  
  127.             var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();  
  128.             vec.Set((initX+i*bw)/30, initY/30);  
  129.             revoluteJoint.Initialize(previousBlock.box2dBody,anchorB.box2dBody,vec);  
  130.             LStage.box2d.world.CreateJoint(revoluteJoint);  
  131.         };  
  132.         Main.prototype.addRandomObj = function(){  
  133.             var s = this;  
  134.             for(var i=0; i<10; i++){  
  135.                 //创建对象  
  136.                 var obj = new LSprite();  
  137.                 //设置对象位置  
  138.                 obj.x = Math.floor(Math.random()*(400-200+1)+200);  
  139.                 obj.y = 0;  
  140.                 //加入显示列表  
  141.                 s.addChild(obj);  
  142.                 //根据随机数添加不同的刚体  
  143.                 if(Math.random() > 0.5){  
  144.                     //获取随机宽度和高度  
  145.                     var w = Math.floor(Math.random()*10)+25;  
  146.                     var h = Math.floor(Math.random()*10)+25;  
  147.                     //重现设置y坐标  
  148.                     obj.y += h*0.5;  
  149.                     //添加矩形刚体  
  150.                     obj.addBodyPolygon(w,h,1);  
  151.                 }else{  
  152.                     //获取随机半径  
  153.                     var r = Math.floor(Math.random()*20)+5;  
  154.                     //重现设置y坐标  
  155.                     obj.y += r;  
  156.                     //添加圆形刚体  
  157.                     obj.addBodyCircle(r,r,r,1);  
  158.                 }  
  159.                 //设置鼠标拖动  
  160.                 obj.setBodyMouseJoint(true);  
  161.             }  
  162.         };  
  163.     </script>  
  164. </head>  
  165. <body>  
  166.     <div id="mylegend"></div>  
  167. </body>  
  168. </html>  

所有代码都在这里了，还是很少的，对吧。看了拉登大叔的原理讲解，再来看我写的js代码就非常容易了。主要是注意以下几个地方。

 

1，添加刚体

在box2dweb中添加刚体超级麻烦，把整个创建过程告诉大家估计大家都会觉得不耐烦，所以，我用到了lufylegend.js添加刚体，这样一来添加刚体就被简化成一步了。非常方便，不是吗？在lufylegend中添加刚体一共有这几个函数：

 

addBodyCircle() 添加原形刚体
addBodyPolygon() 添加矩形刚体
addBodyVertices() 添加不规则图形刚体

 

具体的参数说明和使用举例可以参见lufylegend的API文档中LSprite的API。文档地址已在文章的准备工作一栏写出。

2，添加关节

在lufylegend虽然也有添加关节的封装，但是不能设置关节点。所以我还是用了box2dweb原生方法。添加关节的代码如下：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();  
  2. vec.Set((initX+i*bw)/30, initY/30);  
  3. revoluteJoint.Initialize(previousBlock.box2dBody,block.box2dBody,vec);  
  4. LStage.box2d.world.CreateJoint(revoluteJoint);  

其他的好理解，主要是vec这个变量，它在这里是一个向量对象，实例化代码如下：

 

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var vec = new LStage.box2d.b2Vec2();  

其实这个b2Vec2这个类可以传参数，和它的成员函数Set的参数是一样的。但是这里又多个关节，所以就没有直接设置，而是在后面用Set方法设置。这个向量可以看成一个json吧，传的参数就是设定关节的位置(x,y)。

 

在创建了关节之后，千万别忘记下面的代码：

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. LStage.box2d.world.CreateJoint(revoluteJoint);  

另外，Initialize方法传的参数是box2dweb的刚体对象，在LSprite中的 box2dBody就可以获取该LSprite添加的刚体。

 

3，固定动态刚体

在box2dweb中，刚体分动态和静态。静态刚体比较老实，就呆在原地不动；动态刚体很活泼，不停地在做运动。

拉登大叔其实也写过相关的文章，但是我没怎么看，于是就自己想了一个方法：首先在锁链的两端建立两个圆形静态刚体，然后把锁链两端的两块矩形刚体分别连在附近的圆形静态刚体上，圆形静态刚体就会帮忙把锁链拽着，不让它乱跑。但由于锁链中每个矩形刚体是动态的，所以他们还是可以互相牵扯的。

4，如果你自己在用lufylegend+box2dweb编写时看不到图象，该怎么办？

首先你要检测一下是否在最底层上加了一个LSprite，并且用这个LSprite的graphics画了一个不透明的背景。如果是的话，你可以把这个LSprite去掉，然后再看看有没有。如果还没有，可能有以下几种原因：(1)没有在用之前加入LStage.setDebug(true); (2)没有在使用box2dweb之前加入LStage.box2d = new LBox2d();

 

源代码在上面已经全部给出了，运行时需要配置一下引擎box2dweb和lufylegend，然后把引擎的压缩版本（文件名含.min）放在与html同级的文件目录下即可运行，测试愉快~

 

好了，今天就先讲到这里。如果大家有不懂的地方可以用微博@Yorhom或者用邮箱联系我wangyuehao1999(at)gmail.com（这年头写e-mail地址再不把@换成(at)垃圾邮件多得甚至会把你用的邮件程序弄得黑白不分呢）。希望大家多支持。下次还会继续给大家带来更多有趣的小玩意。敬请期待~

 

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明：转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

我的专栏