广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

深圳抖音微信小程序_JavaScript完成重力下落与弹性

日期:2021-01-11 浏览:
JavaScript实现重力下落与弹性效果的方法分析       这篇文章主要介绍了JavaScript实现重力下落与弹性效果的方法,结合实例形式分析了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程序设计有所帮助。




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系