Html5 game development-Angry Birds-Open Source lecture (1)-jump into the pop-up birds

Angry Birds are a popular puzzle game. Now I try to use the lufylegend library and Box2dWeb physical engine to see how to make such a classic physical game in html5.

Prerequisites 1

First, you need to download the lufylegend library 1.4.1

For how to use the lufylegend library, you can take a look at some of my previous articles and tutorials or the following api instructions.

Preparation 2

Due to the author's mistakes, did not pass the function of Box2dWeb, to make a physical game, have to make some extensions to the lufylegend-1.4.1, you can download this extension file, these extensions will be added when the 1.5 version of the library is released next time.

 

After completing the above preparations, let's take a step-by-step try with the author.

1. Rotating birds

First, create a bird.

[Javascript]
Function Bird (){
Base (this, LSprite, []);
Var self = this;
Var bitmap = new LBitmap (new LBitmapData (imglist ["bird1"]);
Self. addChild (bitmap );
}
With this class, it is easy to display it on the screen.
[Javascript]
BackLayer = new LSprite ();
AddChild (backLayer );
Bird = new Bird ();
Bird. rotate = 0;
Bird. x = 200;
Bird. y = 430;
Bird. yspeed =-5;
BackLayer. addChild (bird );
Friends who have played Angry Birds know that at the beginning of the game, when the birds jumped onto the slingshot, there was a rotation action. I now use the LTweenLite easing class of the lufylegend library to implement this function.
[Javascript]
LTweenLite. to (bird, 1,
{
X: 100,
Yspeed: 5,
Delay: 1,
Rotate:-360,
OnUpdate: function (){
Bird. y + = bird. yspeed;
},
OnComplete: function (){
Start ();
},
Authorization: Sine. easeIn
}
);
Through the code above, we can see that the LTweenLite class can not only change some common attributes of LSprite objects, but can actually change any custom attributes. above, we changed the yspeed from-5 to through LTweenLite, then, onUpdate is used to change the y coordinate of the bird.
2. Pop-up birds

Next, add a slingshot to the position after the bird is up.

[Javascript]
Bitmap = new LBitmap (new LBitmapData (imglist ["slingshot1"]);
Bitmap. x = 215;
Bitmap. y = 290;
BackLayer. addChild (bitmap );
 
Bird = new LSprite ();
Bird. name = "bird01 ";
BackLayer. addChild (bird );
Bitmap = new LBitmap (new LBitmapData (imglist ["bird1"]);
Bird. addChild (bitmap );
 
Bitmap = new LBitmap (new LBitmapData (imglist ["slingshot2"]);
Bitmap. x = 190;
Bitmap. y = 290;
BackLayer. addChild (bitmap );
Effect

 

The code above adds the two forks before and after the slingshot to the screen.
Drag the bird with the mouse, and add the mouse to press the event.
[Javascript]
BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, downStart );
StartX = bird. x + bird. getWidth () * 0.5;
StartY = bird. y + bird. getHeight () * 0.5;
The above Code adds a mouse event and records the center of the bird as the center of the slingshot.
When you press the mouse, you can determine whether the mouse has clicked the bird. Then, you can remove the mouse clicking event and add the mouse moving event and the mouse clicking event.
[Javascript]
Function downStart (event ){
If (event. offsetX> bird. x & event. offsetX <bird. x + bird. getWidth ()&&
Event. offsetY> bird. y & event. offsetY <bird. y + bird. getHeight ()){
BackLayer. removeEventListener (LMouseEvent. MOUSE_DOWN, downStart );
BackLayer. addEventListener (LMouseEvent. MOUSE_MOVE, downMove );
BackLayer. addEventListener (LMouseEvent. MOUSE_UP, downOver );
}
}
Let's move the mouse down and let the bird follow the mouse.
[Javascript]
Unction downMove (event ){
Var r = Math. sqrt (Math. pow (startX-event. selfX), 2) + Math. pow (startY-event. selfY), 2 ));
If (r> 100) r = 100;
Var angle = Math. atan2 (event. selfY-startY, event. selfX-startX );
Bird. x = Math. cos (angle) * r + startX-bird. getWidth () * 0.5;
Bird. y = Math. sin (angle) * r + startY-bird. getHeight () * 0.5;
}
Explain the above Code. First, calculate the distance between the mouse position and the center position of the slingshot. When the distance is greater than 100, make it equal to 100. Then calculate the angle of the mouse drag, and then use this angle to calculate and set the coordinates of the bird.
Next, let's take a look at the function after the mouse pops up. The code above does not use box2dweb. I changed the bird into a box2d rigid body, and then added a force to the bird, to let the birds fly out.

[Javascript]
Function downOver (event ){
BackLayer. removeEventListener (LMouseEvent. MOUSE_UP, downOver );
BackLayer. removeEventListener (LMouseEvent. MOUSE_MOVE, downMove );

Var startX2 = bird. x + bird. getWidth () * 0.5;
Var startY2 = bird. y + bird. getHeight () * 0.5;
Var r = Math. sqrt (Math. pow (startX-startX2), 2) + Math. pow (startY-startY2), 2 ));
Var angle = Math. atan2 (startY2-startY, startX2-startX );

Bird. addBodyCircle (bird. getWidth () * 0.5, bird. getHeight () * 0.5, bird. getWidth () * 0.5, 1,. 5,. 4,. 5 );
Var force = 7;
Var vec = new LGlobal. box2d. b2Vec2 (-force * r * Math. cos (angle),-force * r * Math. sin (angle ));
Bird. box2dBody. ApplyForce (vec, bird. box2dBody. GetWorldCenter ());
}
The code above calculates the drag distance of the bird and the drag angle.
AddBodyCircle adds the body to the bird to make it a rigid body.

ApplyForce adds a force to the rigid body.

All right, click the link below for testing. Drag the bird and let it fly out.

 

The following is the source code of this tutorial. Of course, you need to download and configure the lufylegend library and box2dweb by yourself.
Author: lufy_Legend