首页

源码搜藏网

首页 > 开发教程 > html5教程 >

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

创建时间：2014-05-07 08:57  

一，鼠标拖拽刚体

使用lufylegend.js库件后，拖拽刚体变得很简单，只需调用LSprite的setBodyMouseJoint(true);方法即可，修改上一节中的add方法如下

 

[javascript] view plaincopy
 
  1. function add(){  
  2.     var rand = Math.random();  
  3.     if(rand < 0.33){  
  4.         cLayer = new LSprite();  
  5.         cLayer.x = 50 + Math.random()*700;  
  6.         cLayer.y = 50;  
  7.         backLayer.addChild(cLayer);  
  8.         bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  9.         cLayer.addChild(bitmap);  
  10.         cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  11.         cLayer.setBodyMouseJoint(true);  
  12.     }else if(rand < 0.66){  
  13.         cLayer = new LSprite();  
  14.         backLayer.addChild(cLayer);  
  15.         bitmap = new LBitmap(new LBitmapData(imglist["bird2"]));  
  16.         cLayer.addChild(bitmap);  
  17.         var shapeArray = [  
  18.             [[0,54],[27,0],[54,54]]  
  19.         ];  
  20.         cLayer.addBodyVertices(shapeArray,27,27,1,.5,.4,.5);  
  21.         cLayer.box2dBody.SetPosition(new LGlobal.box2d.b2Vec2((50 + Math.random()*700)/LGlobal.box2d.drawScale,50/LGlobal.box2d.drawScale));  
  22.         cLayer.setBodyMouseJoint(true);  
  23.     }else{  
  24.         cLayer = new LSprite();  
  25.         cLayer.x = 50 + Math.random()*700;  
  26.         cLayer.y = 50;  
  27.         backLayer.addChild(cLayer);  
  28.         bitmap = new LBitmap(new LBitmapData(imglist["stage01"]));  
  29.         cLayer.addChild(bitmap);  
  30.         cLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,5,.4,.2);  
  31.     }  
  32. }  
可以看到，我只在加入小鸟的时候，加入了鼠标拖拽，下面是测试连接

 

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index4.html

 

二，碰撞检测

使用如下代码来加入碰撞检测事件

 

[javascript] view plaincopy
 
  1. LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);  
这时候的碰撞是所有刚体之间的碰撞，包括静止的和动态的

 

为了方便，我这里使用lufylegend.js中的debug方法来验证

 

[javascript] view plaincopy
 
  1. function beginContact(contact){  
  2.     if(contact.GetFixtureA().GetBody().GetUserData().name == "bird" &&   
  3.             contact.GetFixtureB().GetBody().GetUserData().name == "bird"){  
  4.         trace("bird and bird");  
  5.     }  
  6.     trace("bird and other");  
  7. };  

以上方法就是碰撞的检测，意思是当两只小鸟之间发生碰撞的时候，输出"bird and bird"，小鸟和其他刚体，或者其他刚体之间发生碰撞的时候输出"bird and other"

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index5.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接


三，刚体之间的各种链接

最后，我们来看看刚体之间的各种连接，这部分目前没有封装在lufylegend.js里，以后会陆续封装进去，不过现在我们先来看看如何手动实现这些连接

1,距离链接(b2DistanceJointDef)

b2DistanceJointDef可以用来约束两个body之间的距离,用法如下

[javascript] view plaincopy
 
  1. function add(){  
  2.     cLayer = new LSprite();  
  3.     cLayer.name = "bird";  
  4.     cLayer.x = 50 + Math.random()*700;  
  5.     cLayer.y = 50;  
  6.     backLayer.addChild(cLayer);  
  7.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  8.     cLayer.addChild(bitmap);  
  9.     cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  10.     cLayer.setBodyMouseJoint(true);  
  11.     return cLayer;  
  12. }  
  13. var bird1 = add();  
  14. var bird2 = add();  
  15. var distanceJointDef = new LGlobal.box2d.b2DistanceJointDef();  
  16. distanceJointDef.Initialize(bird1.box2dBody, bird2.box2dBody, bird1.box2dBody.GetWorldCenter(), bird2.box2dBody.GetWorldCenter());  
  17. LGlobal.box2d.world.CreateJoint(distanceJointDef);   

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index6.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

 

2,旋转链接(b2RevoluteJointDef)

b2RevoluteJointDef可以给两个body设置一个轴心，让两个body绕这个轴心旋转,用法如下

[javascript] view plaincopy
 
  1. var bird = new LSprite();  
  2.     bird.name = "bird";  
  3.     bird.x = 200;  
  4.     bird.y = 200;  
  5.     backLayer.addChild(bird);  
  6.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  7.     bird.addChild(bitmap);  
  8.     bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,0);  
  9.       
  10.     var pig = new LSprite();  
  11.     pig.name = "pig";  
  12.     pig.x = 200;  
  13.     pig.y = 150;  
  14.     backLayer.addChild(pig);  
  15.     bitmap = new LBitmap(new LBitmapData(imglist["pig2"]));  
  16.     pig.addChild(bitmap);  
  17.     pig.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  18.   
  19.     var revoluteJointDef  = new LGlobal.box2d.b2RevoluteJointDef();  
  20.     revoluteJointDef .Initialize(pig.box2dBody, bird.box2dBody, bird.box2dBody.GetWorldCenter());  
  21.     LGlobal.box2d.world.CreateJoint(revoluteJointDef );   

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index7.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

 

3,滑轮链接(b2PulleyJointDef)

b2PulleyJointDef类似滑轮效果,用法如下

[javascript] view plaincopy
 
  1. var bird = new LSprite();  
  2.     bird.name = "bird";  
  3.     bird.x = 200;  
  4.     bird.y = 200;  
  5.     backLayer.addChild(bird);  
  6.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  7.     bird.addChild(bitmap);  
  8.     bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  9.     bird.setBodyMouseJoint(true);  
  10.       
  11.     var bird01 = new LSprite();  
  12.     bird01.name = "bird";  
  13.     bird01.x = 400;  
  14.     bird01.y = 150;  
  15.     backLayer.addChild(bird01);  
  16.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  17.     bird01.addChild(bitmap);  
  18.     bird01.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  19.     bird01.setBodyMouseJoint(true);  
  20.   
  21.     var anchor1 = bird.box2dBody.GetWorldCenter();    
  22.     var anchor2 = bird01.box2dBody.GetWorldCenter();    
  23.   
  24.     var groundAnchor1 = new LGlobal.box2d.b2Vec2(anchor1.x, anchor1.y - (100 / LGlobal.box2d.drawScale));  
  25.     var groundAnchor2 = new LGlobal.box2d.b2Vec2(anchor2.x, anchor2.y - (100 / LGlobal.box2d.drawScale));  
  26.   
  27.     var ratio = 1.0;    
  28.   
  29.     var pulleyJointDef = new LGlobal.box2d.b2PulleyJointDef();    
  30.     pulleyJointDef.Initialize(bird.box2dBody, bird01.box2dBody, groundAnchor1, groundAnchor2, anchor1, anchor2, ratio);    
  31.     pulleyJointDef.maxLengthA = 300 / LGlobal.box2d.drawScale;    
  32.     pulleyJointDef.maxLengthB = 300 / LGlobal.box2d.drawScale;   
  33.   
  34.     LGlobal.box2d.world.CreateJoint(pulleyJointDef);  

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index8.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

其余的连接还有，b2GearJoint，b2PrismaticJoint，b2LineJoint，b2WeldJoint等多种链接，这些等以后封装到lufylegend.js后再详细介绍，这里不细说了，想了解的朋友可以查阅一下相关资料

 

最后给出这两次内容的所有源代码

http://fsanguo.comoj.com/download.phpi=box2d_sample01.rar

注意，上面只是源码，如果想要在本地运行这些源码的话，需要自己下载lufylegend.js库件以及box2dweb，然后进行配置

 

有了上面的介绍，应该可以做一个物理游戏了，相信大家都知道一款非常有名的游戏《愤怒的小鸟》，下次咱们来研究一下如何用html5来实现它

上一篇：HTML5游戏开发开源库件lufylegend1.4.1发布
下一篇：html5游戏开发-简单老虎机

相关内容

热门推荐