壁にぶつかって跳ね返る

5164 ワード
JavaScript js。 衝突バウンス
壁にぶつかって跳ね返るということは、実際には違ったレベルでleftとtop値またはmargin値を変えて実現されています.中には一つの点が重要だと思います.一方に行った時に戻ったらどうやってまっすぐにしますか?コードは以下の通りです
  

  
  
  
  
    
   
   
   
   
  1. <body onload="test()"> 
    2. 
   
   
   
   
  2.     <div class="father"> 
    3. 
   
   
   
   
  3.         <div class="son">&nbsp;</div> 
    4. 
   
   
   
   
  4.     </div> 
    5. 
   
   
   
   
  5.     <script type="text/javascript"> 
    6. 
   
   
   
   
  6.             var divs=document.getElementsByTagName("div");       
    7. 
   
   
   
   
  7.             var a=divs[0].clientWidth-divs[1].offsetWidth; 
    8. 
   
   
   
   
  8.             var b=divs[0].clientHeight-divs[1].offsetHeight; 
    9. 
   
   
   
   
  9.             var aa=divs[1].offsetLeft; 
    10. 
   
   
   
   
  10.             var bb=divs[1].offsetTop; 
    11. 
   
   
   
   
  11.             var m1=true; 
    12. 
   
   
   
   
  12.             var m2=true; 
    13. 
   
   
   
   
  13.         function move1(){ 
    14. 
   
   
   
   
  14.             if(m1){ 
    15. 
   
   
   
   
  15.                 if(aa<a){aa++;divs[1].style.left=aa+"px";} 
    16. 
   
   
   
   
  16.                 else m1=false; 
    17. 
   
   
   
   
  17.                 } 
    18. 
   
   
   
   
  18.             else{  
    19. 
   
   
   
   
  19.                 if(aa>0){aa--;divs[1].style.left=aa+"px";} 
    20. 
   
   
   
   
  20.                 else m1=true;            
    21. 
   
   
   
   
  21.                 } 
    22. 
   
   
   
   
  22.         }    
    23. 
   
   
   
   
  23.  
    24. 
   
   
   
   
  24.         function move2(){ 
    25. 
   
   
   
   
  25.             if(m2){ 
    26. 
   
   
   
   
  26.                 if(bb<b){bb++;divs[1].style.top=bb+"px";} 
    27. 
   
   
   
   
  27.                 else m2=false; 
    28. 
   
   
   
   
  28.                 } 
    29. 
   
   
   
   
  29.             else{  
    30. 
   
   
   
   
  30.                 if(bb>0){bb--;divs[1].style.top=bb+"px";} 
    31. 
   
   
   
   
  31.                 else m2=true;            
    32. 
   
   
   
   
  32.                 } 
    33. 
   
   
   
   
  33.         }            
    34. 
   
   
   
   
  34.                      
    35. 
   
   
   
   
  35.         function test(){ 
    36. 
   
   
   
   
  36.                              
    37. 
   
   
   
   
  37.             var time1=setInterval("move1()",10); 
    38. 
   
   
   
   
  38.             var time2=setInterval("move2()",10); 
    39. 
   
   
   
   
  39.         } 
    40. 
   
   
   
   
  40.     </script> 
    41.
Expressミドルウェアのbody-parserが簡単に実現します.