JS 비동기 프로 그래 밍 2: 자유 낙하

중력 장: 지구 중력 작용 의 공간.이 공간 에서 모든 점 은 유일한 중력 벡터 와 대응 된다.
각종 온라인 게임 은 3D 든 첫 번 째 시각 이 든 횡 판 게임 (예 를 들 어 모험 도) 이 든 중력 장 을 모 의 하 는 것 이 필수 적 이다.
구 글 의 뉴턴 탄생 을 돌 이 켜 보면 로 고 는 자유 낙하 애플 로 바 뀌 었 다.


  
  
  
  
   
   
   
   <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 는 정말 힘 에 부친 다!
하면, 만약, 만약... ,너 는 많은 반전 순환 에 빠 져 죽 고 싶 을 것 이다!물론 당신 이 매우 시원 하 다 고 생각한다 면, 당신 은 이해 할 수 있 고, 다른 사람 에 게 알 리 고 싶 지 않다 면, 그것 은 또 다른 일이 다.
말 도 안 돼 - 코드 는 다른 사람 에 게 보 여 주 는 거 야.
코드 다운로드
원본 링크:http://www.cnblogs.com/iamzhanglei/archive/2011/08/19/2145239.html
[편집 추천]

JS 비동기 프로 그래 밍 1: JScex 로 원 그리 기

JS 비동기 프로 그래 밍 3: JScex 상처 없 이 jQUI

JS 비동기 프로 그래 밍 4: JScex + jQ 게임 강도 게이지 만 들 기

JS 비동기 프로 그래 밍 5: JScex 앵 그리 버드 만 들 기

JavaScript 가 페이지 자체 적응 을 어떻게 실현 하 는 지 보기

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JS 비동기 프로 그래 밍 2: 자유 낙하

좋은 웹페이지 즐겨찾기