Jscex真的能制作憤怒的小鳥(niǎo)?在我沒(méi)有接觸Jscex之前，我也不相信!但是只要解決了重力場(chǎng)運(yùn)動(dòng)和碰撞的兩大物理問(wèn)題，Jscex版的憤怒小鳥(niǎo)，那就是囊中之物。

如果關(guān)注這個(gè)系列的話，在javascript異步編程之Jscex模擬重力場(chǎng)與google蘋果logo的比較中，模擬了蘋果在重力場(chǎng)下的自由落體運(yùn)動(dòng)。

那么我們可以輕松的幫它擴(kuò)展一個(gè)水平方向上的速度.

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+at
14. //重力加速度
15. var a_y = 40;
16. var speed_Yspeed_YTemp = speed_Y;
17. var time = 0;
18. while (Math.abs(speed_Y) <= speed_YTemp) {
19. $await(Jscex.Async.sleep(50));
20. timetime = time + 50;
21. speed_Yspeed_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=“發(fā)￠射?” onclick=“return Button1_onclick()” />
34. <div id=“birdDiv” style=“left: 0px; top: 300px; position: absolute;”>
35. <img id=“bird” src=“bird.jpg” alt=“” />
36. </div>

可以看得出來(lái)，有點(diǎn)生硬，而且位移有點(diǎn)偏差，比如啟始的top:1000,終止的top:1100!主要原因是在結(jié)束while (Math.abs(speed_Y) <= speed_YTemp)的之前那最后一次

循環(huán)帶來(lái)的誤差!那么就完善一下while里面的條件，讓它不執(zhí)行最后一次循環(huán)。

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+at
5. //重力加速度
6. var a_y = 40;
7. var speed_Yspeed_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. timetime = time + 50;
13. speed_Yspeed_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. }));

最后讓小鳥(niǎo)撞擊地面彈起，然后又撞擊地面彈起···一直循環(huán)下去···

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. //所用公式?:vt=v0+at
6. //重力加速度
7. var a_y = 40;
8. var speed_Yspeed_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. timetime = time + 50;
15. speed_Yspeed_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. //與地面撞擊，X軸損失一部分速度，Y軸損失一部分速度并且被彈起
22. speed_Xspeed_X = speed_X / 2;
23. speed_Y = -speed_Y / 3;
24. if (speed_X < 6) break;
25. }
26. }));

因?yàn)樽矒舻倪^(guò)程當(dāng)中，X軸損失一部分速度，Y軸損失一部分速度并且被彈起,當(dāng)speed_X小于6的時(shí)候退出循環(huán)。

黃色小鳥(niǎo)：體型較小，重量較輕，殊效為加快，應(yīng)用進(jìn)步擊弱，應(yīng)用掉隊(duì)擊中等。進(jìn)擊木頭較強(qiáng)，進(jìn)擊玻璃與混凝土很弱。

對(duì)，沒(méi)有錯(cuò)，它就這這篇文章的主角!

需求解析：沖鋒陷陣?guó)B，在不點(diǎn)擊加快的景象下，和紅色小鳥(niǎo)樣，當(dāng)點(diǎn)擊了加快按鈕，X軸標(biāo)的目標(biāo)速度變成本來(lái)的3倍，Y軸標(biāo)的目標(biāo)變成本來(lái)的3倍，

沖鋒狀況下速度不受重力影響。

原理圖：

沖鋒鳥(niǎo)代碼實(shí)現(xiàn)：

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. document.getElementById(“hdTag”).value = 1;
12. e.style.left = startPos.x;
13. e.style.top = startPos.y;
14. var maxY = startPos.y;
15. //重?力|加ó速ù度è
16. var a_y = 40;
17. var speed_Yspeed_YTemp = speed_Y;
18. var speed_Xspeed_XTemp = speed_X;
19. var time = 0;
20. var addTag = 1;
21. while (true) {
22. $await(Jscex.Async.sleep(1));
23. while ((e.offsetTop – (speed_Y – a_y) * 0.05 <= maxY)) {
24. if (document.getElementById(“hdTag”).value == 1) {
25. $await(Jscex.Async.sleep(50));
26. timetime = time + 50;
27. speed_Yspeed_Y = speed_Y – a_y;
28. startPos.y –= (speed_Y * 0.05);
29. startPos.x += speed_X * 0.05;
30. e.style.top = startPos.y + “px”;
31. e.style.left = startPos.x + “px”;
32. }
33. else {
34. //沖?鋒?狀′態(tài)?
35. $await(Jscex.Async.sleep(50));
36. timetime = time + 50;
37. if (addTag == 1) {
38. addTag = 0;
39. //速ù度è翻-倍?
40. speed_Y = 3 * speed_Y;
41. speed_X = 3 * speed_X;
42. }
43. startPos.y –= (speed_Y * 0.05);
44. startPos.x += speed_X * 0.05;
45. e.style.top = startPos.y + “px”;
46. e.style.left = startPos.x + “px”;
47. }
48. }
49. if (addTag == 0) {
50. addTag = 1; break;
51. }
52. //與?地?面?撞2擊÷，?X軸á損e失§一?部?分?速ù度è，?Y軸á損e失§一?部?分?速ù度è并￠且ò被?彈ˉ起e
53. document.getElementById(“hdTag”).value = 1;
54. speed_Xspeed_X = speed_X / 2;
55. speed_Y = -speed_Y / 3;
56. if (speed_X < 6) break;
57. }
58. }));
59. function Button1_onclick() {
60. var bird = new Bird({ x: 0, y: 500 }, 400, 700, document.getElementById(“birdDiv”));
61. bird.fly();
62. }
63. function Button2_onclick() {
64. document.getElementById(“hdTag”).value = 0;
65. }
66. </script>
67. <div >
68. <input id=“hdTag” value=“1” type=“hidden” />
69. <input id=“Button1” type=“button” value=“發(fā)￠射?” onclick=“return Button1_onclick()” />
70. <input id=“Button2” type=“button” value=“加ó速ù” onclick=“return Button2_onclick()” />
71. <div id=“birdDiv” style=”left: 0px; top: 500px; position: absolute; width: 20px;
72. height: 30px;z-index:10;”>
73. <img src=“yellowbird.png” alt=“”/>
74. </div>
75. </div>

代碼下載