Heim > Artikel > Web-Frontend > Detaillierte Erläuterung von Codebeispielen zur Simulation parabolischer Bewegungen in JavaScript

Detaillierte Erläuterung von Codebeispielen zur Simulation parabolischer Bewegungen in JavaScript

黄舟Original: 2017-03-15 14:35:231802Durchsuche

Parabelbewegung ist eine Art Bewegung, die durch Schwerkraftinduktion verursacht wird. In diesem Artikel wird einfacher JavaScript-Code verwendet, um die Implementierung einer Parabelbewegung zu simulieren.

Dieser JavaScript-Code simuliert die parabolische Bewegung im Zustand Sie können die folgenden Parameter einstellen: Anfangsgeschwindigkeit in Querrichtung, Anfangsgeschwindigkeit in Längsrichtung, Schwerkraftbeschleunigung (wenn diese Beschleunigung ein Wert ist, der sich mit ändert). Zeit, Sie können den Effekt anderer ungleichmäßiger Beschleunigungsbewegungen erzielen), Animation Intervallzeit usw., relativ professionell, der folgende Code ist:

<!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>

Sie können klicken Hier können Sie den Demonstrationseffekt der JavaScript-simulierten Parabelbewegung sehen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Codebeispielen zur Simulation parabolischer Bewegungen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung von Beispielen für JavaScript-Aufrufe von ActiveX zum Betrieb der Oracle-DatenbankNächster Artikel：Detaillierte Erläuterung von Beispielen für JavaScript-Aufrufe von ActiveX zum Betrieb der Oracle-Datenbank

In Verbindung stehende Artikel

Mehr sehen