JS asynchronous programming 5: Jscex making Angry Birds

Source: Internet
Author: User

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.

 
 
  1. <Script type = "text/javascript">
  2. Function Bird (startPos, speed_X, speed_Y, element ){
  3. This. speed_X = speed_X;
  4. This. speed_Y = speed_Y;
  5. This. startPos = startPos;
  6. This. fly = function (){
  7. FlyAsync (element, startPos, speed_X, speed_Y). start ();
  8. }
  9. }
  10. Var flyAsync = eval (Jscex. compile ("async", function (e, startPos, speed_X, speed_Y ){
  11. E. style. left = startPos. x;
  12. E. style. top = startPos. y;
  13. // Vt = v0 +
  14. // Acceleration of gravity
  15. Var a_y = 40;
  16. Var speed_YTemp = speed_Y;
  17. Var time = 0;
  18. While (Math. abs (speed_Y) <= speed_YTemp ){
  19. $ Await (Jscex. Async. sleep (50 ));
  20. Time = time + 50;
  21. Speed_Y = speed_Y-a_y;
  22. StartPos. y-= (speed_Y * 0.05 );
  23. E. style. top = startPos. y;
  24. StartPos. x + = speed_X * 0.05;
  25. E. style. left = startPos. x;
  26. }
  27. }));
  28. Function Button1_onclick (){
  29. Var bird = new Bird ({x: 0, y: 300}, 400,700, document. getElementById ("birdDiv "));
  30. Bird. fly ();
  31. }
  32. </Script>
  33. <Input id = "Button1" type = "button" value = "sending a reply? "Onclick =" return Button1_onclick () "/>
  34. <Div id = "birdDiv" style = "left: 0px; top: 300px; position: absolute;">
  35. </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.

 
 
  1. Var flyAsync = eval (Jscex. compile ("async", function (e, startPos, speed_X, speed_Y ){
  2. E. style. left = startPos. x;
  3. E. style. top = startPos. y;
  4. // Vt = v0 +
  5. // Acceleration of gravity
  6. Var a_y = 40;
  7. Var speed_YTemp = speed_Y;
  8. Var time = 0;
  9. Var maxY = startPos. y
  10. While (speed_Y> 0? (Math. abs (speed_Y) <= speed_YTemp): (e. offsetTop-(speed_Y-a_y) * 0.05 <= maxY )){
  11. $ Await (Jscex. Async. sleep (50 ));
  12. Time = time + 50;
  13. Speed_Y = speed_Y-a_y;
  14. StartPos. y-= (speed_Y * 0.05 );
  15. E. style. top = startPos. y;
  16. StartPos. x + = speed_X * 0.05;
  17. E. style. left = startPos. x;
  18. }
  19. }));

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

 
 
  1. Var flyAsync = eval (Jscex. compile ("async", function (e, startPos, speed_X, speed_Y ){
  2. E. style. left = startPos. x;
  3. E. style. top = startPos. y;
  4. Var maxY = startPos. y;
  5. // Formula used? : Vt = v0 +
  6. // Acceleration of gravity
  7. Var a_y = 40;
  8. Var speed_YTemp = speed_Y;
  9. Var time = 0;
  10. While (true ){
  11. $ Await (Jscex. Async. sleep (1 ));
  12. While (speed_Y> 0? (Math. abs (speed_Y) <= speed_YTemp): (e. offsetTop-(speed_Y-a_y) * 0.05 <= maxY )){
  13. $ Await (Jscex. Async. sleep (50 ));
  14. Time = time + 50;
  15. Speed_Y = speed_Y-a_y;
  16. StartPos. y-= (speed_Y * 0.05 );
  17. E. style. top = startPos. y;
  18. StartPos. x + = speed_X * 0.05;
  19. E. style. left = startPos. x;
  20. }
  21. // 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
 
 
  1. speed_X = speed_X / 2;  
  2. speed_Y = -speed_Y / 3;  
  3. if (speed_X < 6) break;  
  4. }  
  5. })); 

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.