JavaScript实现重力下落与弹性效果的方法分析
本文实例讲述了javascript实现重力下落与弹性效果的方法。分享给大家供大家参考，具体如下：
这里利用js语言在html页面中实现重力作用下落地后弹起的效果，如下所示：
在此例中主要涉及以下几个问题：
1.给球体一个释放初速度，如何实现越向下运动且在接触边缘之前，竖直方向上的速度speedy越大的效果？
答案：可以在计时器中，每及时一次，竖直方向上的速度speedy自增一个固定值来实现，下面代码中speedy += 6;就是实现这个效果。
2.球体接触地面（此例中指浏览器下边缘）后，如何实现速度反向效果？
答案：接触地面后，将方向速度置为当前速度的反方向即可，代码if (iw >= w||iw <= 0){speedx = -speedx;}if中条件表示如果超出运动范围，实现水平方向接触边缘后运动方向相反，代码if (ih >= h||ih <= 0){speedy = -speedy;}则表示y方向接触边缘后速度变反。
3.球体接触地面反弹后，如何实现再次上升的高度低于上一次高度的效果？
答案：在接触地面后，速度变为负值，计时器开始执行下一个间隔，立即执行了speedy += 6，弹起速度立刻减小了6，其大小相对接触地面前一瞬间小，因此球体不会弹跳到原来的高度。
4.如何实现球体竖直方向上的速度绝对值越来越小直至逼近于0的效果？
答案：事实上，仅利用speedy += 6;此例中竖直方向上速度speedy不可能达到0，因为在该函数设置好了初速度的前提下，某一次落地速度不可能为6（通过后来打印速度每次执行结果可以确定），所以下一次执行不可能为0，那么究竟是怎样实现落到地面静止的效果的呢？实际上，当把speedy增加值设置为6时，当球体某一次落地瞬间它的速度是1，2，3，4，5中的任何一个值是，经加上6后反弹瞬时速度分别为-5，-4，-3，-2，-1，经过一个计时器周期（此例中为30毫秒），速度再加6立刻变为1，2，3，4，5，下一次速度变为-5，-4，-3，-2，-1......，由于speedy += 6在计时器的头处，因此最终结果将总是在加6之前，停留在-5，-4，-3，-2，-1.中的任何一个数值，且计时器始终处于动态，最终球体显示在底部。
5.当球体释放后，也具备有个横向速度speedx，如何使横向速度也逐渐减小值0？
答案：此例中不需要考虑x方向的碰撞，因此每次计时可将speedx乘以一个小于1的数，最终的speedx值将无限趋近于0，显示为静止。
当拖动窗口时如何实现不出现滚动条的效果？
答案：拖动后浏览器窗口后，对球体设置新的运动范围即可。
实现代码及解析如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性运动</title>
<style type="text/css">
#div {
width: 100px;
height: 100px;
background: green;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<script type="text/javascript">
//window.onload表示等页面标签内容加载完之后再加载window.onload里面的内容
window.onload = function(){
//分别设置div在x和y方向的的初速度
var speedx = 2;
var speedy = 3;
//获取div标签
var div = document.getelementbyid("div");
//获取按钮
var btn = document.getelementbyid("btn");
//定义点击事件
btn.onclick = function(){
startmove();
};
//定义一个空的定时器，防止上次事件定时器的返回值叠加
var timer = null;
//定义点击事件函数
function startmove(){
//内部清空计时器，防止上次返回值叠加
clearinterval(timer);
//设置计时器
timer = setinterval(function(){
//竖直方向上反向运动时速度为负值，为了达到反弹逐渐速度逐渐减小的效果，可以在向下碰撞后速度加上一个正值
speedy += 6;
//分别获取div距离左边距和上边距的动态距离
var iw = div.offsetleft + speedx;
var ih = div.offsettop + speedy;
//获取div水平方向运动的最大距离，即不包含边框的浏览器窗口的宽度clientwidth减去div的宽度
var w = document.documentelement.clientwidth - div.offsetwidth;
//获取div垂直方向运动的最大距离
var h = document.documentelement.clientheight - div.offsetheight;
//当动态宽度达到div最大运动宽度范围时，立刻转换速度为反方向负值，同时把w的值负值给iw，因为w是可视窗口范围，当w缩小时，iw保存的还是上一次窗口条件下的距离左边距的距离
if (iw >= w||iw <= 0){speedx = -speedx;iw = w;}
//当动态高度达到div最大运动高度范围时，立刻转向速度，同时将x方向速度乘以0.8，使之速度逐渐减小
if (ih >= h||ih <= 0){speedy = -speedy;ih = h;speedx *= 0.95;}
//由于div.style.left和div.style.top还储存这上一次或第一次的计时后的值，此次计时后应把新的值储存起来，使div出现动态效果
div.style.left = iw + "px";
div.style.top = ih + "px";
console.log(speedx);
},30);
}
}
</script>
<input type="button" name="btn" id="btn" value="开始运动" />
<div id="div"></div>
</body>
</html>
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript运动效果与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
下一篇： 使用Python生成url短链接的方法