<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>自由落体运动-Created by RayLee</title>
<style type="text/css">
<!--
#ballDiv {
position:absolute;
top:60px;
}
.brokenBall{
left:450px;
width:20px;
height:10px;
z-index:10;
background-color: #FF0000;
}
.goodBall{
left:455px;
width:10px;
height:10px;
z-index:10;
background-color: #FF0000;
}
#containerDiv {
position:absolute;
left:300px;
top:60px;
width:300px;
height:400px;
z-index:2;
background-color: #FFFFFF;
border-bottom:#000 solid 2px;
border-left:#000 solid 2px;
border-top:#000 dotted 1px;
}
#information{
position:absolute;
font-size:small;
WIDTH:250px;
left: 31px;
top: 61px;
}
-->
</style>
</head>
<script language=javascript type=text/javascript>
var FF = (navigator.userAgent.indexOf("Firefox")!=-1);
var IE = (navigator.userAgent.indexOf("MSIE")!=-1);
var vt = 0;//方块当前速度
var a = 0.98;//重力加速度
var interval = 1;//时间间隔用于控制小球运动的快慢
var t = 0.1;//单位时间方块运动的距离,px
var h = 60;//方块的当前y轴位置px
var bottom = 450;//地面在距离顶端的距离px
var timeControl=null;//控制window.setInterval句柄
//小块发生碰撞之后速度变为原来的百分比
var vParam = 6/7;
var miniVelocity=1000;
var minimumSpace = 1000;
var status = "stopped";
var init = function(){
vt = 0;//方块当前速度
a = 0.98;//重力加速度
interval = document.getElementById("interval").value;//时间间隔用于控制小球运动的快慢
t = document.getElementById("velocity").value;//单位时间方块运动的距离,px
h = 60;//方块的当前y轴位置px
bottom = 450;//地面在距离顶端的距离px
timeControl=null;//控制window.setInterval句柄
//小块发生碰撞之后速度变为原来的百分比
vParam = 6/7;
miniVelocity=1000;
minimumSpace = 1000;
document.getElementById("cV").innerHTML = vt;
document.getElementById("cH").innerHTML = h;
document.getElementById("cH").innerHTML = h;
}
var run = function(){
//单位时间内小块运动的距离
d = vt*t+a*t*t/2;
//小块当前的速度
vt= vt+a*t;
//小块在屏幕上的实际位置
h = d+h;
//如果小块距离屏幕顶端的距离大于bottom,则表示小块超过了地面
if(h>=bottom){
//将小块的速度调整为原来的vParam,并改变运动方向
vt=-1*vt*vParam;
h=bottom;
//小块撞击地面后发生形变
//document.getElementById("ballDiv").className = "brokenBall";
}else{
//恢复小块的原始形状
//document.getElementById("ballDiv").className = "goodBall";
}
miniVelocity = Math.min(Math.abs(miniVelocity),Math.abs(vt));
if(Math.abs(vt)<=0.02)
minimumSpace = Math.min(Math.abs(minimumSpace),Math.abs(h-bottom));
if(Math.abs(h-bottom)<=2.8201&&Math.abs(vt)<=0.0007){
h=bottom;
window.clearInterval(timeControl);
}
document.getElementById("cV").innerHTML = vt;
document.getElementById("cH").innerHTML = h;
document.getElementById("minV").innerHTML = miniVelocity;
document.getElementById("minH").innerHTML = minimumSpace;
document.getElementById("ballDiv").style.top = h+"px";
};
var stopRunning = function(){
if(timeControl){
window.clearInterval(timeControl);
timeControl = null;
}
document.getElementById("btnStop").disabled = true;
document.getElementById("btnStart").disabled = false;
}
var startRunning = function(){
timeControl = window.setInterval(run,interval);
document.getElementById("btnStart").disabled = true;
document.getElementById("btnStop").disabled = false;
}
window.onload = function(){
init();
document.getElementById("btnStart").onclick = function(){
startRunning();
}
document.getElementById("btnStop").onclick = function(){
stopRunning();
}
document.getElementById("velocity").onkeyup = function(){
t = document.getElementById("velocity").value;
}
document.getElementById("interval").onkeyup = function(){
interval = document.getElementById("interval").value;
window.clearInterval(timeControl);
timeControl = window.setInterval(run,interval);
}
document.getElementById("btnReStart").onclick = function(){
stopRunning();
init();
startRunning();
document.getElementById("btnStart").disabled = true;
document.getElementById("btnStop").disabled = false;
}
}
</script>
<body>
<div id="ballDiv" class="goodBall"></div>
<div id="containerDiv"></div>
<div id="information">
<table>
<tr>
<th align="left" nowrap>当前速度:</th>
<td nowrap><span id="cV"></span></td></tr>
<tr>
<th align="left" nowrap>当前高度:</th>
<td nowrap><span id="cH"></span></td></tr>
<tr>
<th align="left" nowrap>最小速度:</th><td nowrap><span id="minV"></span></td></tr>
<tr>
<th align="left" nowrap>距地面最小距离:</th>
<td nowrap><span id="minH"></span></td></tr>
<tr>
<th align="left" nowrap>下落速度:</th>
<td nowrap><input id="velocity" type="text" value="0.2" size="4" maxlength="4">
像素/单位时间</td></tr>
<tr>
<th align="left" nowrap>单位时间:</th>
<td nowrap><input id="interval" type="text" value="1" size="4" maxlength="4">
毫秒</td></tr>
<tr><td colspan="2" nowrap><input id="btnStart" name="btnStart" type="button" value="开始">
<input id="btnStop" name="btnStop" type="button" value="暂停">
<input type="button" name="btnReStart" id="btnReStart" value="重新开始">
<tr><td colspan="2"><span id="result"></span></td></tr>
</table>
</div>
<div style="position:absolute; left: 33px; top: 475px; width: 571px; height: 82px;">
<p>August 13, 2009 Created By Ray Lee. <br>
Email:raymondlxx@gmail.com. <br>
All rights Reserved. </p>
</div>
</body>
</html>
Javascript模拟物体自由落体、反弹运动
5星 · 超过95%的资源 需积分: 28 29 浏览量
2009-08-13
11:27:04
上传
评论
收藏 2KB RAR 举报
genius760
- 粉丝: 0
- 资源: 6