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

上次介绍了用box2dweb创建各种刚体，这次来介绍如何用鼠标拖拽刚体，刚体之间的碰撞，以及刚体之间的各种连接。

HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体

http://blog.csdn.net/lufy_legend/article/details/7654607

一，鼠标拖拽刚体

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

function add(){ var rand = Math.random(); if(rand < 0.33){ cLayer = new LSprite(); cLayer.x = 50 + Math.random()*700; cLayer.y = 50; backLayer.addChild(cLayer); bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); cLayer.addChild(bitmap); cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5); cLayer.setBodyMouseJoint(true); }else if(rand < 0.66){ cLayer = new LSprite(); backLayer.addChild(cLayer); bitmap = new LBitmap(new LBitmapData(imglist["bird2"])); cLayer.addChild(bitmap); var shapeArray = [ [[0,54],[27,0],[54,54]] ]; cLayer.addBodyVertices(shapeArray,27,27,1,.5,.4,.5); cLayer.box2dBody.SetPosition(new LGlobal.box2d.b2Vec2((50 + Math.random()*700)/LGlobal.box2d.drawScale,50/LGlobal.box2d.drawScale)); cLayer.setBodyMouseJoint(true); }else{ cLayer = new LSprite(); cLayer.x = 50 + Math.random()*700; cLayer.y = 50; backLayer.addChild(cLayer); bitmap = new LBitmap(new LBitmapData(imglist["stage01"])); cLayer.addChild(bitmap); cLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,5,.4,.2); } }可以看到，我只在加入小鸟的时候，加入了鼠标拖拽，下面是测试连接

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

二，碰撞检测

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

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

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

function beginContact(contact){ if(contact.GetFixtureA().GetBody().GetUserData().name == "bird" && contact.GetFixtureB().GetBody().GetUserData().name == "bird"){ trace("bird and bird"); } trace("bird and other"); };

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

这里是测试连接

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

下面是运行结果

三，刚体之间的各种链接

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

1,距离链接(b2DistanceJointDef)

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

function add(){ cLayer = new LSprite(); cLayer.name = "bird"; cLayer.x = 50 + Math.random()*700; cLayer.y = 50; backLayer.addChild(cLayer); bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); cLayer.addChild(bitmap); cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5); cLayer.setBodyMouseJoint(true); return cLayer; } var bird1 = add(); var bird2 = add(); var distanceJointDef = new LGlobal.box2d.b2DistanceJointDef(); distanceJointDef.Initialize(bird1.box2dBody, bird2.box2dBody, bird1.box2dBody.GetWorldCenter(), bird2.box2dBody.GetWorldCenter()); LGlobal.box2d.world.CreateJoint(distanceJointDef);

这里是测试连接

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

下面是运行结果

2,旋转链接(b2RevoluteJointDef)

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

var bird = new LSprite(); bird.name = "bird"; bird.x = 200; bird.y = 200; backLayer.addChild(bird); bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); bird.addChild(bitmap); bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,0); var pig = new LSprite(); pig.name = "pig"; pig.x = 200; pig.y = 150; backLayer.addChild(pig); bitmap = new LBitmap(new LBitmapData(imglist["pig2"])); pig.addChild(bitmap); pig.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5); var revoluteJointDef = new LGlobal.box2d.b2RevoluteJointDef(); revoluteJointDef .Initialize(pig.box2dBody, bird.box2dBody, bird.box2dBody.GetWorldCenter()); LGlobal.box2d.world.CreateJoint(revoluteJointDef );

这里是测试连接

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

下面是运行结果

3,滑轮链接(b2PulleyJointDef)

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

var bird = new LSprite(); bird.name = "bird"; bird.x = 200; bird.y = 200; backLayer.addChild(bird); bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); bird.addChild(bitmap); bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5); bird.setBodyMouseJoint(true); var bird01 = new LSprite(); bird01.name = "bird"; bird01.x = 400; bird01.y = 150; backLayer.addChild(bird01); bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); bird01.addChild(bitmap); bird01.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5); bird01.setBodyMouseJoint(true); var anchor1 = bird.box2dBody.GetWorldCenter(); var anchor2 = bird01.box2dBody.GetWorldCenter(); var groundAnchor1 = new LGlobal.box2d.b2Vec2(anchor1.x, anchor1.y - (100 / LGlobal.box2d.drawScale)); var groundAnchor2 = new LGlobal.box2d.b2Vec2(anchor2.x, anchor2.y - (100 / LGlobal.box2d.drawScale)); var ratio = 1.0; var pulleyJointDef = new LGlobal.box2d.b2PulleyJointDef(); pulleyJointDef.Initialize(bird.box2dBody, bird01.box2dBody, groundAnchor1, groundAnchor2, anchor1, anchor2, ratio); pulleyJointDef.maxLengthA = 300 / LGlobal.box2d.drawScale; pulleyJointDef.maxLengthB = 300 / LGlobal.box2d.drawScale; LGlobal.box2d.world.CreateJoint(pulleyJointDef);

这里是测试连接

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

下面是运行结果

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

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

http://fsanguo.comoj.com/download.php?i=box2d_sample01.rar

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

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