javascript異步編程系列——Jscex模擬重力場與google蘋果logo的比較

重力場:地球重力作用的空間。在該空間中,每一點都有惟一的一個重力矢量與之相對應。
各種網絡遊戲,不管是3D的還是第一視角的,或者橫版遊戲(如冒險島),模擬一個重力場是必須的。
先回顧一下谷歌在牛頓誕辰,logo換成瞭自由落體的蘋果。

<html>
<script language="javascript">
    var h = 0, v = 1;
    window.setTimeout(aa, 2000);
    function aa() {
        var i = self.setInterval("bb()", 25);
    }
    function bb() {
        var f = document.getElementById('fall');
        var r = parseInt(f.style.right) + h;
        var b = parseInt(f.style.bottom) – v;
        f.style.right = r + 'px';
        f.style.bottom = b + 'px';
        if (b > -210) {
            v += 2;
        } else {
            h = (v > 9) ? v * 0.1 : 0;
            v *= (v > 9) ? -0.3 : 0;
        }
    }
</script>
<body>
    <p id="fall" style="position: relative; right: -300px; bottom: -46px">
       apple
    </p>
</body>
</html>
可以看到setTimeout和setInterval!不去仔細琢磨邏輯,光從代碼語意上,是非常令人費解的。

在沒有口語編程之前,我非常想把代碼寫成這樣:

<html>
<script language="javascript">
        function drop() {
             //自由落體
             code  here
             //撞擊地面之後
             code  here
             //蘋果摔爛
             code  here
        }
        </script>
<body>
    <p id="fall" style="position: relative; right: -300px; bottom: -46px">
       apple
    </p>
<script language="javascript">
drop();
</script>
</body>
</html>
 也隻有這樣的代碼才能調用以後的口語編程接口!那麼怎麼才能寫出這樣漂亮的代碼?

這個時候【jxcex】 閃亮登場!

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Jscex Animation</title>
    <script language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.builderBase.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.async.js"></script>
    <!–[if IE]>
    <script language="javascript" type="text/javascript" src="http://www.cnblogs.com/lib/json2.js"></script>
    <script language="javascript">
        Jscex.config.codeGenerator = function (code) { return "false || " + code; }
    </script>
    <![endif]–>
    <script type="text/javascript">
        var dropAsync = eval(Jscex.compile("async", function (e, startPos, speedY, duration) {
            $await(Jscex.Async.sleep(2000));
            //e.style.left = startPos.x;
            //重力加速度
            var g = 50;
            var time = 0;
            var tag = 0;
            while (time < duration) {
                $await(Jscex.Async.sleep(25));
                if (time < 800) {
                    //自由落體
                    time = time + 50;
                    speedY = speedY + g;
                    startPos.y += speedY * 0.05;
                    e.style.top = startPos.y;
                }
                else {
                    //撞擊地面                
                    if (speedY > 0 && tag == 0) {
                        tag = 1;
                        speedY = -speedY;
                        speedY = speedY / 3;
                    }
                    time = time + 50;
                    speedY = speedY + g;
                    startPos.y += speedY * 0.05;
                    e.style.top = startPos.y;
                }
            }
        }));
        var changeImageAsync = eval(Jscex.compile("async", function () {
            document.getElementById("heart").src = "grieve.gif";
        }));
        var executeAsync = eval(Jscex.compile("async", function () {
            //自由落體並撞擊地面
            $await(dropAsync(document.getElementById("dropBox"), { x: 0, y: 20 }, 0, 1350));
            //❤碎
            $await(changeImageAsync());
        }));
     
    </script>
</head>
<body>
    <p id="dropBox" style="position: absolute; top: 20;">
        <img id="heart" src="heart.gif" alt="" />
    </p>
    <script type="text/javascript">
        executeAsync().start();
    </script>
</body>
</html>
Jquery的animate可以用來制作一些動畫效果,但僅限於勻速的直線運動,或者勻速的漸變,當然你可以用下面這種費解的方式去實現變速運動,而且要通過大量的計算才能減少與真實運動的差別。

 var i =0 ;
        var time = 0;
        var z = 100;
        function drop() {
            if (time <7000) {
                i += 5;
                z -=1;
                $(".block").animate({ top: i }, z);
                time += 50;
                drop();
            }
        }
如果是拋物線呢?對於這種變速運動Jquery的animate真是力不從心啊!

如果不用【jxcex】 ,你會陷入一大堆回調循環當中,痛不欲生!當然如果你覺得很爽,你能想明白,又不想讓別人看明白,那又是另外一回事瞭。

不過話說—-代碼是寫給別人看的。

發佈留言