js 模拟小球自由落体 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 自由落体运动</title>
<script type="text/javascript">

//我把电脑说明书拿出来看了下 我的显示器1px=1/4000 (m)
//由于重力加速度g太他妈大了 速度快得根本看不见了  改成4 所以后面是2*t*t
var fastHeigh=window.innerHeight-80;  //小球初始高度 以小球底部为质点
var t=0;          //时间
var v=0;          //速度
var fastTop=1;     //初始margin-top值
var movetime;    //运动时间
var height;        //每次弹起的高度
function gotodown(obj){
    if(parseInt(obj.style.marginTop)>=fastHeigh){
        //alert(t);
        v=3.6*t; //每次落地速度损失10%
        if(v<=0.00001){  //无法弹起时候停止
            return;
        }
        height=(v*(t*0.9))-2*(t*0.9)*(t*0.9);//能上升的高度 m
        movetime=0.9*t;
        //alert(4000*height+"px");    // px
        t=0;
        gotoUp();  //运动时间
        //return;
        }else{
        setTimeout('down()',10);    
        }
 }
 
 function down(){ //向下加速
     t=t+0.01;
     if(fastTop+(t*t*2)*4000>=fastHeigh){
         obj.style.marginTop=fastHeigh+"px";
        }else{
             obj.style.marginTop=(fastTop+(t*t*2)*4000)+"px";
         }
         gotodown(obj);
     }
    
function gotoUp(){
    var maxheight=(window.innerHeight-parseInt(obj.style.marginTop))/4000;
     if(t>=movetime||maxheight>=height){
        //alert(t);
        //retuen;
        fastTop=parseInt(obj.style.marginTop);
        v=0;t=0;
        gotodown(obj);
      }else{
        setTimeout('up()',10);    
      }
    }
 function up(){//向上减速
    t=t+0.01;
     obj.style.marginTop=window.innerHeight-(v*t-2*t*t)*4000+"px";
     gotoUp();
     }

    
    window.onload=function(){
            obj=document.getElementById("d");
            gotodown(obj);
        }
        
</script>
<style type="text/css">
body{ padding:0; margin:0;}
</style>
</head>

<body>
<div class="myimg" id="d" style="height:80px; width:80px;/* border:1px solid #000; */position:absolute; background:url(paopao_03.png) no-repeat; margin-top:1px;">
</div>
</body>
</html>









            

            
posted @ 
2012-11-20 10:01 
技安 
阅读(770) 
评论(0) 
 
收藏 
举报