HTML5 game development-box2dweb application (2)-collision and various connections

Last time I introduced how to use box2dweb to create various rigid bodies. This time I will introduce how to drag and drop rigid bodies with the mouse, collision between rigid bodies, and various connections between rigid bodies.

HTML5 game development-box2dweb application (I)-create various Rigid Bodies

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

1. Drag the rigid body with the mouse

After using the lufylegend. js repository, it is easy to drag and drop the rigid body. You only need to call the setbodymousejoint (true); method of lsprite. Modify the add method in the previous section as follows:

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);}}

As you can see, I only added the mouse drag when adding the bird. below is the test connection.

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

Ii. Collision Detection

Use the following code to add collision detection events

LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);

At this time, the collision is between all rigid bodies, including static and dynamic

For convenience, I use the Debug Method in lufylegend. js to verify

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

The above method is collision detection, which means that when two birds collide, the output "bird and Bird", the bird and other rigid bodies, or output "bird and other" when other rigid bodies collide"

Here is the test connection

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

The running result is as follows:

3. Various links between rigid bodies

Finally, let's take a look at the various connections between rigid bodies. This part is not currently encapsulated in lufylegend. js and will be encapsulated in the future. But now let's take a look at how to manually implement these connections.

1. Link (b2distancejointdef)

B2distancejointdef can be used to constrain the distance between two bodies. Its usage is as follows:

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); 

Here is the test connection

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

The running result is as follows:

2. Rotate the Link (b2revolutejointdef)

B2revolutejointdef can set an axis for the two bodies to rotate the two bodies around the axis. The usage is as follows:

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 ); 

Here is the test connection

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

The running result is as follows:

3. Pulley Link (b2pulleyjointdef)

B2pulleyjointdef is similar to the pulley effect. Its usage is as follows:

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);

Here is the test connection

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

The running result is as follows:

Other connections include b2gearjoint, b2prismaticjoint, b2linejoint, b2weldjoint, and so on. These links will be encapsulated in lufylegend. JS will be detailed later. I will not elaborate on it here. If you want to know more, please refer to the relevant materials.

Finally, all the source code of the two content is given.

Http://fsanguo.comoj.com/download.php? I =box2d_sample01.rar

Note: The above is only the source code. If you want to run the source code locally, You need to download the lufylegend. js library and box2dweb, and then configure it.

With the above introduction, we should be able to make a physical game. I believe everyone knows a very famous game called Angry Birds. Next time, let's study how to use HTML5 to implement it.