Maison > Article > interface Web > Développement de jeux HTML5-Application Box2dWeb (2)-collision et diverses connexions
La dernière fois, j'ai présenté comment utiliser box2dweb pour créer divers corps rigides. Cette fois, je vais vous présenter comment faire glisser des corps rigides avec la souris, la collision entre les corps rigides et les différentes connexions entre les corps rigides. .
1. Faites glisser le corps rigide avec la souris
Utilisez lufylegend Bibliothèque .js Après avoir ajouté le fichier, faire glisser le corps rigide devient très simple. Appelez simplement la méthode setBodyMouseJoint(true); Modifiez la méthode add dans la section précédente comme suit
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); } }
Vous pouvez voir. que je n'ai ajouté que lors de l'ajout de l'oiseau, le glissement de la souris a été ajouté. Ce qui suit est la connexion de test
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index4.html.
Deuxièmement, la détection de collision
Utilisez le code suivant pour ajouter l'événement de détection de collision
LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);
La collision à cette fois, c'est parmi tous les corps rigides Collisions entre objets, y compris statiques et dynamiques
Pour plus de commodité, j'utilise la méthode de débogage dans lufylegend.js pour vérifier
function beginContact(contact){ if(contact.GetFixtureA().GetBody().GetUserData().name == "bird" && contact.GetFixtureB().GetBody().GetUserData().name == "bird"){ trace("bird and bird"); } trace("bird and other"); };
La méthode ci-dessus est la détection de collision , ce qui signifie qu'en cas de collision entre deux oiseaux, "oiseau et oiseau" est affiché. Lorsqu'une collision se produit entre un oiseau et d'autres corps rigides, ou entre d'autres corps rigides, "oiseau et autre" est affiché
<.>Voici la connexion testhttp://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index5.htmlVoici les résultats en coursTrois liens divers entre corps rigides
Enfin, jetons un coup d'œil. Les différentes connexions entre corps rigides ne sont actuellement pas encapsulées dans lufylegend.js, et le seront à l'avenir. Mais voyons maintenant comment implémenter manuellement ces connexions .1, Lien de distance (b2DistanceJointDef)
b2DistanceJointDef peut être utilisé pour contraindre la distance entre deux corps. L'utilisation est la suivanteVoici la connexion de testfunction 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
Voici les résultats en cours d'exécution
Voici les résultats en cours
2, lien de rotation (b2RevoluteJointDef)
b2RevoluteJointDef peut définir un axe pour deux corps et laissez les deux corps tourner autour de cet axe, l'utilisation est la suivante
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 );
Voici la connexion de test
http://lufy.netne.net/lufylegend-js/. lufylegend-1.4/box2d/sample01/index7.html
Voici les résultats en cours d'exécution
3, poulie lien (b2PulleyJointDef)
b2PulleyJointDef est similaire à l'effet poulie, l'utilisation est la suivante
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);
Voici la connexion test
http ://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index8 html
Ce qui suit est le résultat actuel
Notez que ce qui précède n'est que le code source. Si vous souhaitez exécuter ces codes sources localement, vous devez télécharger vous-même la bibliothèque js et box2dweb. configurer
Ce qui précède est l'application de développement de jeux HTML5-Box2dWeb (2) - Contenu de collisions et connexions diverses. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !