Jscex模擬重力場與google蘋果logo的比較
作者：zhanglei
各種網絡游戲，不管是3D的還是第一視角的，或者橫版游戲(如冒險島)，模擬一個重力場是必須的。本節與大家分享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>
- <div id="fall" style="position: relative; right: -300px; bottom: -46px">
- apple
- </div>
- </body>
- </html>
可以看到setTimeout和setInterval!不去仔細琢磨邏輯，光從代碼語意上，是非常令人費解的。
在沒有口語編程之前，我非常想把代碼寫成這樣：
- <html>
- <script language="javascript">
- function drop() {
- //自由落體
- code here
- //撞擊地面之后
- code here
- //蘋果摔爛
- code here
- }
- </script>
- <body>
- <div id="fall" style="position: relative; right: -300px; bottom: -46px">
- apple
- </div>
- <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) {
- //自由落體
- timetime = time + 50;
- speedYspeedY = speedY + g;
- startPos.y += speedY * 0.05;
- e.style.top = startPos.y;
- }
- else {
- //撞擊地面
- if (speedY > 0 && tag == 0) {
- tag = 1;
- speedY = -speedY;
- speedYspeedY = speedY / 3;
- }
- timetime = time + 50;
- speedYspeedY = 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>
- <div id="dropBox" style="position: absolute; top: 20;">
- <img id="heart" src="heart.gif" alt="" />
- </div>
- <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】 ,你會陷入一大堆回調循環當中，痛不欲生!當然如果你覺得很爽，你能想明白，又不想讓別人看明白，那又是另外一回事了。
不過話說----代碼是寫給別人看的。
***的【jxcex】 庫，請上https://github.com/JeffreyZhao/jscex 或者http://www.sndacode.com/projects/jscex/wiki下載吧····
原文：http://www.cnblogs.com/iamzhanglei/archive/2011/08/19/2145239.html
【編輯推薦】
責任編輯：陳貽新
來源：
zhanglei的博客
