JavaScript模擬拋物效果

antzone發表於2018-05-28
JavaScript

本章節分享一段程式碼例項，它模擬實現了物體被丟擲執行軌跡效果。

並且可以調整相應的引數，程式碼其實非常簡單，其實就是一個數學運算過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
body{
  font-size:13px;
  padding:10px;
}
p{margin:2px;}
.wrap{
  position:relative;
  width:1000px;
  height:550px;
  margin:0 auto;
  border:1px solid #ccc;
  margin-top:50px;
}
#fall{
  width:20px;
  font-size:1px;
  height:20px;
  background:#000;
  position:absolute;
  top:0;
  left:0;
}
</style>
<script type="text/javascript">
function demo(x,y,a,t) {
  var f=document.getElementById('fall');
  var Vx=parseInt(x),
  Vy=parseInt(y),
  g=a,
  t=parseInt(t),
  h=0,l=0,Sx=0,Sy=0;
  var i=setInterval(function(){
    if(f){
      Sx+=Vx*t;
      l=Sx;
      Vy+=g*t;
      h+=Vy*t;
      f.style.left=l+'px';
      f.style.top=h+'px';
      if(h>500||l>900)clearInterval(i);
    }
  },t);
}
window.onload=function(){
  var bt=document.getElementById("bt");
  var Vx=document.getElementById("Vx");
  var Vy=document.getElementById("Vy");
  var a=document.getElementById("a");
  var t=document.getElementById("t");
  bt.onclick=function(){
    demo(Vx.value,Vy.value,a.value,t.value)
  }
}
</script>
</head>
<body>
<h3>模擬重力狀態下的拋物運動（假使1px==1mm）</h3>
<p>橫向初速度：<input id="Vx" type="text" value="2" />px/ms</p>
<p>縱向初速度：<input id="Vy" type="text" value="-2" />px/ms</p>
<p>重力加速度：<input id="a" type="text" value="0.0098" />px/平方ms</p>
<p>（如果這個加速度是一個隨時間變化的值，就能達到其他非勻加速運動的效果了。）</p>
<p>單位時間：<input id="t" type="text" value="10" />（記錄運動的時間間隔）</p>
<input id="bt" type="button" value="演示"/>
<div class="wrap">
  <div id="fall">o</div>
</div>
</body>
</html>

相關文章