JS asynchronous programming 5: Jscex making Angry Birds

Can Jscex really make Angry Birds? I don't believe it before I get in touch with Jscex! But as long as the two major physical problems of gravity movement and collision are solved, the Angry Birds of Jscex are in the bag.

If you are interested in this series, in JS asynchronous programming 2: free fall, it simulates Apple's free fall motion in the gravity field.

So we can easily help it expand the speed in a horizontal direction.

 
 

  
  
<Script type = "text/javascript">
  
  
Function Bird (startPos, speed_X, speed_Y, element ){
  
  
This. speed_X = speed_X;
  
  
This. speed_Y = speed_Y;
  
  
This. startPos = startPos;
  
  
This. fly = function (){
  
  
FlyAsync (element, startPos, speed_X, speed_Y). start ();
  
  
}
  
  
}
  
  
Var flyAsync = eval (Jscex. compile ("async", function (e, startPos, speed_X, speed_Y ){
  
  
E. style. left = startPos. x;
  
  
E. style. top = startPos. y;
  
  
// Vt = v0 +
  
  
// Acceleration of gravity
  
  
Var a_y = 40;
  
  
Var speed_YTemp = speed_Y;
  
  
Var time = 0;
  
  
While (Math. abs (speed_Y) <= speed_YTemp ){
  
  
$ Await (Jscex. Async. sleep (50 ));
  
  
Time = time + 50;
  
  
Speed_Y = speed_Y-a_y;
  
  
StartPos. y-= (speed_Y * 0.05 );
  
  
E. style. top = startPos. y;
  
  
StartPos. x + = speed_X * 0.05;
  
  
E. style. left = startPos. x;
  
  
}
  
  
}));
  
  
Function Button1_onclick (){
  
  
Var bird = new Bird ({x: 0, y: 300}, 400,700, document. getElementById ("birdDiv "));
  
  
Bird. fly ();
  
  
}
  
  
</Script>
  
  
<Input id = "Button1" type = "button" value = "sending a reply? "Onclick =" return Button1_onclick () "/>
  
  
<Div id = "birdDiv" style = "left: 0px; top: 300px; position: absolute;">
  
  

  
  
</Div>
 
 

It can be seen that it is a little stiff, and the displacement is somewhat biased. For example, the top: 1000 at the beginning, and the top: 1100 at the end! The main reason is the last time before the while (Math. abs (speed_Y) <= speed_YTemp) is ended.

Errors Caused by loops! Then we can improve the conditions in while so that it does not execute the last loop.

 
 

  
  
Var flyAsync = eval (Jscex. compile ("async", function (e, startPos, speed_X, speed_Y ){
  
  
E. style. left = startPos. x;
  
  
E. style. top = startPos. y;
  
  
// Vt = v0 +
  
  
// Acceleration of gravity
  
  
Var a_y = 40;
  
  
Var speed_YTemp = speed_Y;
  
  
Var time = 0;
  
  
Var maxY = startPos. y
  
  
While (speed_Y> 0? (Math. abs (speed_Y) <= speed_YTemp): (e. offsetTop-(speed_Y-a_y) * 0.05 <= maxY )){
  
  
$ Await (Jscex. Async. sleep (50 ));
  
  
Time = time + 50;
  
  
Speed_Y = speed_Y-a_y;
  
  
StartPos. y-= (speed_Y * 0.05 );
  
  
E. style. top = startPos. y;
  
  
StartPos. x + = speed_X * 0.05;
  
  
E. style. left = startPos. x;
  
  
}
  
  
}));
 
 

Finally, let the birds hit the ground and then hit the ground.

 
 

  
  
Var flyAsync = eval (Jscex. compile ("async", function (e, startPos, speed_X, speed_Y ){
  
  
E. style. left = startPos. x;
  
  
E. style. top = startPos. y;
  
  
Var maxY = startPos. y;
  
  
// Formula used? : Vt = v0 +
  
  
// Acceleration of gravity
  
  
Var a_y = 40;
  
  
Var speed_YTemp = speed_Y;
  
  
Var time = 0;
  
  
While (true ){
  
  
$ Await (Jscex. Async. sleep (1 ));
  
  
While (speed_Y> 0? (Math. abs (speed_Y) <= speed_YTemp): (e. offsetTop-(speed_Y-a_y) * 0.05 <= maxY )){
  
  
$ Await (Jscex. Async. sleep (50 ));
  
  
Time = time + 50;
  
  
Speed_Y = speed_Y-a_y;
  
  
StartPos. y-= (speed_Y * 0.05 );
  
  
E. style. top = startPos. y;
  
  
StartPos. x + = speed_X * 0.05;
  
  
E. style. left = startPos. x;
  
  
}
  
  
// When it hits the ground, the X axis loses part of the speed, and the Y axis loses part of the speed and is played
 
 

 
 

  
  
speed_X = speed_X / 2;  
  
  
speed_Y = -speed_Y / 3;  
  
  
if (speed_X < 6) break;  
  
  
}  
  
  
})); 
 
 

During the impact process, the X axis loses part of the speed, and the Y axis loses part of the speed and is popped up. When the speed_X is less than 6, the loop is exited.

To be continued, please go to work ······

Ps: interested small pot friends can use CSS3, so that the birds are subject to a certain degree of air resistance in the air movement process, resulting in a certain angle of rotation of the birds, after the landing of the birds, as a result, birds scroll forward on the ground, which more realistically reflects the movement of objects in reality.

Code download

Effect Viewing: http://www.cnblogs.com/iamzhanglei/archive/2011/08/24/2151473.html