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 继承实现例子
Aug 12 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php 面向对象的一个例子
2011/04/12 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python3 字符串知识点学习笔记
2020/02/08 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
实习医生自我评价
2013/09/22 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
汽车广告策划方案
2014/05/31 职场文书
领导干部对照检查材料
2014/08/24 职场文书
感谢信格式范文
2015/01/22 职场文书
离婚协议书范本
2015/01/26 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技