JavaScript method for simulating parabolic motion under gravity
- 2020-05-10 17:41:06
- OfStack
In this paper, an example is given to describe the method of JavaScript to simulate parabolic motion under gravity state. Share with you for your reference. The specific analysis is as follows:
This JavaScript code simulates parabolic motion in the state of gravity. The following parameters can be set: horizontal initial velocity, vertical initial velocity, gravitational acceleration (if this acceleration is a value varying with time, it can achieve the effect of other non-uniformly accelerated motion), animation interval, etc., which are relatively professional
<!doctype html>
<html>
<head>
<title>js Parabolic movement </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> Simulate parabolic motion under gravity 1px==1mm ) </h3>
<p> Transverse initial velocity: <input id="Vx" type="text" value="2" />px/ms</p>
<p> Longitudinal initial velocity: <input id="Vy" type="text" value="-2" />px/ms</p>
<p> Gravitational acceleration: <input id="a" type="text" value="0.0098" />px/ square ms</p>
<p> If the acceleration is zero 1 With the change of time, we can achieve the effect of other non-uniformly accelerated motion. </p>
<p> Unit time: <input id="t" type="text" value="10" /> (record the time interval of exercise)
<p><input type="button" value=" demo " onclick="demo(document.getElementById('Vx').value, document.getElementById('Vy').value, document.getElementById('a').value, document.getElementById('t').value)"/></p>
<div class="wrap">
<div id="fall">o</div>
</div>
</body>
<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);
}
</script>
</html>
I hope this article is helpful for you to design javascript program.