JavaScript实现重力下落与弹性效果的方法分析


Posted in Javascript onDecember 20, 2017

本文实例讲述了JavaScript实现重力下落与弹性效果的方法。分享给大家供大家参考,具体如下:

这里利用JS语言在Html页面中实现重力作用下落地后弹起的效果,如下所示:

JavaScript实现重力下落与弹性效果的方法分析

在此例中主要涉及以下几个问题:

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学习笔记9 prototype封装继承
Jan 11 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 #Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 #Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 #Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 #Javascript
详解vue mixins和extends的巧妙用法
Dec 20 #Javascript
canvas轨迹回放功能实现
Dec 20 #Javascript
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python使用pymysql实现操作mysql
2016/09/13 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
骨干教师培训感言
2014/01/16 职场文书
股份转让协议书
2014/04/12 职场文书
实习生评语
2014/04/26 职场文书
优秀教研组申报材料
2014/12/26 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
逃课检讨书范文
2015/05/06 职场文书
小鞋子观后感
2015/06/05 职场文书
优质服务标语口号
2015/12/26 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android