Движение тела, брошенного под углом к горизонту
/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.html4strict.geshi_code {font-family:monospace;}
.html4strict.geshi_code .imp {font-weight: bold; color: red;}
.html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;}
.html4strict.geshi_code .kw3 {color: #000066;}
.html4strict.geshi_code .es0 {color: #000099; font-weight: bold;}
.html4strict.geshi_code .br0 {color: #66cc66;}
.html4strict.geshi_code .sy0 {color: #66cc66;}
.html4strict.geshi_code .st0 {color: #ff0000;}
.html4strict.geshi_code .nu0 {color: #cc66cc;}
.html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;}
.html4strict.geshi_code .sc0 {color: #00bbdd;}
.html4strict.geshi_code .sc1 {color: #ddbb00;}
.html4strict.geshi_code .sc2 {color: #009900;}
.html4strict.geshi_code span.xtra { display:block; }
<html>
<head>
<title>Движение тела, брошенного под углом к горизонту</title>
<script language="javascript" type="text/javascript" src="/jquery/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
function GO(){
var Angle = parseFloat($("#Angle").val()) * (Math.PI / 180); // Угол в радианах
var Speed = parseFloat($("#Speed").val()); // Скорость
var G = 9.81; // Свободное падение
var ySpeed = 0;
var Time = 0;
var x = 0;
var y = 0;
var TimeA = ((Speed * Math.sin(Angle)) / G); // Длительнось полета до вехней точки
var Point = $("#Point");
var Move = function(){
x = Speed * Math.cos(Angle) * Time;
if(Time < TimeA){
ySpeed = (Speed * Math.sin(Angle)) - (G*Time);
}
y = (ySpeed * Math.sin(Angle) * Time) - ((G*(Time^2))/2);
//console.log(x,y);
Point.stop().animate({
'left' : x,
'bottom' : y
}, 99);
$("#Area").append(Point);
Time += 0.1;
if(Time > (TimeA*2)){
return;
}
window.setTimeout(Move, 100);
}
Move();
}
</script>
<style type="text/css">
#Point {
position:absolute;
left:0;
bottom:0;
width:5px;
height:5px;
background-color:#000;
border-radius:3px;
}
</style>
</head>
<body style="background-color:#666;">
<div id="Area" style="background-color:#FFF; position:absolute; top:100px; left:100px; right:100px; bottom:100px;">
<div id="Point"></div>
</div>
<input type="text" id="Angle" value="45" style="width:30px; position:absolute; top:110px; left:110px;" />
<input type="text" id="Speed" value="100" style="width:30px; position:absolute; top:110px; left:150px;" />
<input type="button" value="GO" onclick="GO();" style="width:30px; position:absolute; top:110px; left:190px;" />
</body>
</html>
Вот сижу пытаюсь сделать анимацию точки, но получается как-то криво
<html>
<head>
<title>Движение тела, брошенного под углом к горизонту</title>
<script language="javascript" type="text/javascript" src="/jquery/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
function GO(){
var Angle = parseFloat($("#Angle").val()) * (Math.PI / 180); // Угол в радианах
var Speed = parseFloat($("#Speed").val()); // Скорость
var G = 9.81; // Свободное падение
var ySpeed = 0;
var Time = 0;
var x = 0;
var y = 0;
var TimeA = ((Speed * Math.sin(Angle)) / G); // Длительнось полета до вехней точки
var Point = $("#Point");
var Move = function(){
x = Speed * Math.cos(Angle) * Time;
if(Time < TimeA){
ySpeed = (Speed * Math.sin(Angle)) - (G*Time);
}
y = (ySpeed * Math.sin(Angle) * Time) - ((G*(Time^2))/2);
//console.log(x,y);
Point.stop().animate({
'left' : x,
'bottom' : y
}, 99);
$("#Area").append(Point);
Time += 0.1;
if(Time > (TimeA*2)){
return;
}
window.setTimeout(Move, 100);
}
Move();
}
</script>
<style type="text/css">
#Point {
position:absolute;
left:0;
bottom:0;
width:5px;
height:5px;
background-color:#000;
border-radius:3px;
}
</style>
</head>
<body style="background-color:#666;">
<div id="Area" style="background-color:#FFF; position:absolute; top:100px; left:100px; right:100px; bottom:100px;">
<div id="Point"></div>
</div>
<input type="text" id="Angle" value="45" style="width:30px; position:absolute; top:110px; left:110px;" />
<input type="text" id="Speed" value="100" style="width:30px; position:absolute; top:110px; left:150px;" />
<input type="button" value="GO" onclick="GO();" style="width:30px; position:absolute; top:110px; left:190px;" />
</body>
</html>
Вот сижу пытаюсь сделать анимацию точки, но получается как-то криво