新聞中心
Jscex真的能制作憤怒的小鳥?在我沒有接觸Jscex之前,我也不相信!但是只要解決了重力場運動和碰撞的兩大物理問題,Jscex版的憤怒小鳥,那就是囊中之物。

網(wǎng)站設計、成都網(wǎng)站制作,成都做網(wǎng)站公司-創(chuàng)新互聯(lián)公司已向上千企業(yè)提供了,網(wǎng)站設計,網(wǎng)站制作,網(wǎng)絡營銷等服務!設計與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗,合理的價格為您打造企業(yè)品質(zhì)網(wǎng)站。
推薦專題:JavaScript異步編程
如果關(guān)注這個系列的話,在javascript異步編程之Jscex模擬重力場與google蘋果logo的比較中,模擬了蘋果在重力場下的自由落體運動。
那么我們可以輕松的幫它擴展一個水平方向上的速度.
- 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+at
- //重力加速度
- var a_y = 40;
- var speed_Yspeed_YTemp = speed_Y;
- var time = 0;
- while (Math.abs(speed_Y) <= speed_YTemp) {
- $await(Jscex.Async.sleep(50));
- timetime = time + 50;
- speed_Yspeed_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();
- }
可以看得出來,有點生硬,而且位移有點偏差,比如啟始的top:1000,終止的top:1100!主要原因是在結(jié)束while (Math.abs(speed_Y) <= speed_YTemp)的之前那最后一次
循環(huán)帶來的誤差!那么就完善一下while里面的條件,讓它不執(zhí)行最后一次循環(huán)。
- 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+at
- //重力加速度
- var a_y = 40;
- var speed_Yspeed_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));
- timetime = time + 50;
- speed_Yspeed_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;
- }
- }));
最后讓小鳥撞擊地面彈起,然后又撞擊地面彈起···一直循環(huán)下去···
- 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;
- //所用公式?:vt=v0+at
- //重力加速度
- var a_y = 40;
- var speed_Yspeed_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));
- timetime = time + 50;
- speed_Yspeed_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;
- }
- //與地面撞擊,X軸損失一部分速度,Y軸損失一部分速度并且被彈起
- speed_Xspeed_X = speed_X / 2;
- speed_Y = -speed_Y / 3;
- if (speed_X < 6) break;
- }
- }));
因為撞擊的過程當中,X軸損失一部分速度,Y軸損失一部分速度并且被彈起,當speed_X小于6的時候退出循環(huán)。
黃色小鳥:體型較小,重量較輕,殊效為加快,應用進步擊弱,應用掉隊擊中等。進擊木頭較強,進擊玻璃與混凝土很弱。
對,沒有錯,它就這這篇文章的主角!
需求解析:沖鋒陷陣鳥,在不點擊加快的景象下,和紅色小鳥樣,當點擊了加快按鈕,X軸標的目標速度變成本來的3倍,Y軸標的目標變成本來的3倍,
沖鋒狀況下速度不受重力影響。
原理圖:
沖鋒鳥代碼實現(xiàn):
- 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) {
- document.getElementById("hdTag").value = 1;
- e.style.left = startPos.x;
- e.style.top = startPos.y;
- var maxY = startPos.y;
- //重?力|加ó速ù度è
- var a_y = 40;
- var speed_Yspeed_YTemp = speed_Y;
- var speed_Xspeed_XTemp = speed_X;
- var time = 0;
- var addTag = 1;
- while (true) {
- $await(Jscex.Async.sleep(1));
- while ((e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {
- if (document.getElementById("hdTag").value == 1) {
- $await(Jscex.Async.sleep(50));
- timetime = time + 50;
- speed_Yspeed_Y = speed_Y - a_y;
- startPos.y -= (speed_Y * 0.05);
- startPos.x += speed_X * 0.05;
- e.style.top = startPos.y + "px";
- e.style.left = startPos.x + "px";
- }
- else {
- //沖?鋒?狀′態(tài)?
- $await(Jscex.Async.sleep(50));
- timetime = time + 50;
- if (addTag == 1) {
- addTag = 0;
- //速ù度è翻-倍?
- speed_Y = 3 * speed_Y;
- speed_X = 3 * speed_X;
- }
- startPos.y -= (speed_Y * 0.05);
- startPos.x += speed_X * 0.05;
- e.style.top = startPos.y + "px";
- e.style.left = startPos.x + "px";
- }
- }
- if (addTag == 0) {
- addTag = 1; break;
- }
- //與?地?面?撞2擊÷,?X軸á損e失§一?部?分?速ù度è,?Y軸á損e失§一?部?分?速ù度è并¢且ò被?彈ˉ起e
- document.getElementById("hdTag").value = 1;
- speed_Xspeed_X = speed_X / 2;
- speed_Y = -speed_Y / 3;
- if (speed_X < 6) break;
- }
- }));
- function Button1_onclick() {
- var bird = new Bird({ x: 0, y: 500 }, 400, 700, document.getElementById("birdDiv"));
- bird.fly();
- }
- function Button2_onclick() {
- document.getElementById("hdTag").value = 0;
- }
- height: 30px;z-index:10;">
最新的Jscex 庫,請上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載吧····
代碼下載
原文:http://www.cnblogs.com/iamzhanglei/archive/2011/08/24/2151473.html
【系列文章】
- 什么是JavaScript異步編程
- JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI
- JavaScript異步編程之用Jscex畫圓
- Jscex+jQuery UI打造游戲力度條
- Jscex模擬重力場與google蘋果logo的比較
當前題目:JavaScript異步編程之Jscex制作憤怒的小鳥
文章來源:http://www.fisionsoft.com.cn/article/dphchsc.html


咨詢
建站咨詢
