Html5 game development-Angry Birds-the force of collision

In box2d, as long as we set the object density, friction, elasticity and other attributes, they will simulate the real world for collision, if you want to perform some special processing based on these collisions, You need to obtain the force of the collision between them to do what you want based on the force, use the following line of code in the lufylegend repository to detect collisions.

[Javascript]
LGlobal. box2d. setEvent (LEvent. POST_SOLVE, postSolve );
The collision function is as follows. Two parameters are accepted.
[Javascript] view plaincopy
Function postSolve (contact, impulse ){
}
Then impulse. normalImpulses [0] is used to obtain the force generated by the collision.
Next, we will control the pig head status based on the collision force. First, we will prepare the following two figures.

 

Then, create the Pig class as follows:

[Javascript]
Function Pig (){
Base (this, LSprite, []);
Var self = this;
Self. hp = 200;
Self. name = "pig ";
Self. list = ["pig01", "pig02"];
Self. bitmap = new LBitmap (new LBitmapData (imglist [self. list [0]);
Self. addChild (self. bitmap );
Self. addBodyCircle (24, self. bitmap. getHeight () * 0.5, self. bitmap. getWidth () * 0.5, 1, 5,. 4,. 13 );
}
Pig. prototype. hit = function (value ){
Var self = this;
If (value <10) return;
If (self. hp = 200) self. bitmap. bitmapData = new LBitmapData (imglist [self. list [1]);
Self. hp-= value;
}
The above code first sets a healthy picture for the pig head in the constructor, and then changes the picture of the pig head to an injured image in the hit function.
With the Pig class above, as long as the collision between the Pig head and other objects passes in the collision impulse to the hit function, the state of the Pig head and the hp value can be controlled, of course, you can also prepare images of various states for the pig head, such as minor injuries and serious injuries. Then, in the hit function, you can set different display pictures for the pig based on its hpvalue.
In addition, in the Angry Birds game, each object also has a different state. For example, the two pictures below indicate the two States of the wooden bar.

 

To facilitate operations on these objects, we create a Stage class like the above pig, as shown below:

[Javascript]
Function Stage (list, rotate, m, ctrl ){
Base (this, LSprite, []);
Var self = this;
Self. name = "stage ";
Self. ctrl = ctrl;
Self. list = list;
Self. bitmap = new LBitmap (new LBitmapData (imglist [self. list [0]);
Self. hp = 200;
Self. addChild (self. bitmap );
Self. addBodyPolygon (self. bitmap. getWidth (), self. bitmap. getHeight (), 1, m,. 4,. 2 );
If (rotate! = 0) self. setRotate (rotate * Math. PI/180 );
}
Stage. prototype. hit = function (value ){
Var self = this;
If (! Self. ctrl) return;
If (value <1) return;
If (self. hp = 200) self. bitmap. bitmapData = new LBitmapData (imglist [self. list [1]);
Self. hp-= value;
}
The principle is the same as that of the Pig class.
Then, add some objects to the main function, as shown below:
[Javascript]
SetStage (["desk"], 800,430, false );
SetStage (["desk"], 970,430, false );
SetStage (["st11", "st12"], 935,410, 0, 1, true );
SetStage (["st01", "st02"], 905,370, 90,1, true );
SetStage (["st01", "st02"], 965,370, 90,1, true );
SetStage (["st11", "st12"], 935,310, 0, 1, true );
SetStage (["st31", "st32"], 817,370, 90,1, true );
SetStage (["st31", "st32"], 970,370, 90,1, true );
SetStage (["st31", "st32"], 895,250, 0, 1, true );
SetStage (["st21", "st22"], 955,230, true );
SetStage (["st31", "st32"], 858,150, 90,1, true );
SetStage (["st31", "st32"], 925,150, 90,1, true );
SetStage (["st11", "st12"], 935,50, 0, 1, true );
SetStage (["st21", "st22"], 950,30, 90,1, true );
SetStage (["st21", "st22"], 800,430, 90,1, true );
SetStage (["st21", "st22"], 1100,430, 90,1, true );
Var pig = new Pig ();
Pig. x = 950;
Pig. y = 173;
BackLayer. addChild (pig );
The setStage function is as follows to instantiate an object.
[Javascript] view plaincopy
Function setStage (list, x, y, rotate, m, ctrl ){
Var stageLayer = new Stage (list, rotate, m, ctrl );
StageLayer. x = x;
StageLayer. y = y;
BackLayer. addChild (stageLayer );
Return stageLayer;
}
The image generated by the above Code is as follows:

If you have played the Angry Birds game, you should be familiar with the above picture. It is the first screen of Angry Birds.

Next, modify the collision detection function, because I set the UserData of the body to the LSprite object in the lufylegend library, so here we get the LSprite object through GetUserData.

[Javascript]
Function postSolve (contact, impulse ){
If (contact. getFixtureA (). getBody (). getUserData (). hit) contact. getFixtureA (). getBody (). getUserData (). hit (impulse. normalImpulses [0]);
If (contact. getFixtureB (). getBody (). getUserData (). hit) contact. getFixtureB (). getBody (). getUserData (). hit (impulse. normalImpulses [0]);
}
With the above collision, if you run the game now, you can get the following results:

We can see that the pig head and the status of some wood bars have changed. In this way, we have changed the state of the object according to the collision, when the hp of pig's head changes to 0, remove it from the game screen.
When a pig's head disappears, it will have an effect similar to an explosion, such

 

Next we will create a RemoveObject class to achieve this effect.

[Javascript]
Function RemoveObject (){
Base (this, LSprite, []);
Var self = this;
Self. name = "remove ";
Self. index = 0;
Self. bitmap = new LBitmap (new LBitmapData (imglist ["remove"]);
Self. addChild (self. bitmap );
}
RemoveObject. prototype. run = function (){
Var self = this;
If (self. index ++> 20 ){
Self. parent. removeChild (self );
}
}
In the above run function, the reason why it is not removed after 20 cycles is run is to let the above explosion state last for a short period of time and then disappear.
The last processing is to monitor the state of these objects in the loop function to control when they disappear.

[Javascript]
Function onframe (){
If (bird ){
BackLayer. x = LGlobal. width * 0.5-(bird. x + bird. getWidth () * 0.5 );
If (backLayer. x> 0 ){
BackLayer. x = 0;
} Else if (backLayer. x <LGlobal. width-1600 ){
BackLayer. x = LGlobal. width-1600;
}
LGlobal. box2d. synchronous ();
}
Var child;
For (var key in backLayer. childList ){
Child = backLayer. childList [key];
If (child. name = null) continue;
If (child. x <-child. getWidth () | child. x> backLayer. getWidth ()){
BackLayer. removeChild (child );
If (child. name = "bird01 "){
Bird = null;
BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, moveStart );
BackLayer. addEventListener (LMouseEvent. MOUSE_MOVE, moveRun );
BackLayer. addEventListener (LMouseEvent. MOUSE_UP, moveEnd );
}
} Else if (child. name = "stage" | child. name = "pig") & child. hp <= 0 ){
If (child. name = "pig "){
Var removeObj = new RemoveObject ();
RemoveObj. x = child. x;
RemoveObj. y = child. y;
BackLayer. addChild (removeObj );
}
BackLayer. removeChild (child );
} Else if (child. name = "remove "){
Child. run ();
}
}
}
The above code is very simple and I will not explain it. After the bird disappears, I added three events to move the screen and finally gave the complete code. You can take a look.
[Javascript]
BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, moveStart );
BackLayer. addEventListener (LMouseEvent. MOUSE_MOVE, moveRun );
BackLayer. addEventListener (LMouseEvent. MOUSE_UP, moveEnd );

Now, let's test the connection.
 

 
 

 

As you can see, the birds above have cracked the pig head!

Author: lufy_Legend