Explication détaillée des exemples de code pour simuler le mouvement parabolique en JavaScript-js tutoriel-php.cn

Explication détaillée des exemples de code pour simuler le mouvement parabolique en JavaScript

黄舟

Libérer： 2017-03-15 14:35:23

original

1809 Les gens l'ont consulté

Le mouvement parabolique est une sorte de mouvement provoqué par l'induction de la gravité. Cet article utilisera un simple code JavaScript pour simuler l'implémentation du mouvement parabolique. Le code suivant nous est très utile pour apprendre JavaScript.

Ce code JavaScript simule le mouvement parabolique sous l'état de gravité Vous pouvez définir les paramètres suivants : vitesse initiale transversale, vitesse initiale longitudinale, accélération de la gravité (si cette accélération est une valeur qui change avec. temps, vous pouvez obtenir l'effet d'un autre mouvement d'accélération non uniforme), animation temps d'intervalle, etc., relativement professionnel, voici le code suivant :

<!doctype html>
<html>
<head>
<title>js抛物运动</title>
<meta charset="utf-8" />
<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>
</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 type="button" value="演示" onclick="demo(document.getElementById(&#39;Vx&#39;).value, document.getElementById(&#39;Vy&#39;).value, 
document.getElementById(&#39;a&#39;).value, document.getElementById(&#39;t&#39;).value)"/></p>
<p class="wrap">
<p id="fall">o</p>
</p>
</body>
<script type="text/javascript">
function demo(x,y,a,t) {
var f=document.getElementById(&#39;fall&#39;);
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+&#39;px&#39;;
f.style.top=h+&#39;px&#39;;
if(h>500||l>900)clearInterval(i);
}
},t);
}
</script>
</html>

Copier après la connexion

Vous pouvez cliquer ici pour voir l'effet de démonstration du mouvement parabolique simulé par JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!