Javascript摸拟自由落体与上抛运动原理与实现方法详解

2024-10-20 02:53:21

本文实例讲述了Javascript摸拟自由落体与上抛运动原理与实现方法。分享给大家供大家参考，具体如下：

JavaScript 代码

//****************************************
    //名称：Javascript摸拟自由落体与上抛运动!
    //作者：Gloot
    //邮箱：glootz@gmail.com
    // QQ：345268267
    //网站：http://www.cnblogs.com/editor/
    //操作：在页面不同地方点几下
    //***************************************
    var $ = function(el) { return document.getElementById(el); };
    function LuoRun()
    {
      this.h = 0;
      this.s = 0;
      this.g = 9.8;
      this.isup = false;
      this.rh = 0;
      this.t = 0;
      this.timer = null;
      this.mt = 0;
      this.top = 0;
      this.left = 0;
      this.id = null;
    }

    LuoRun.prototype.Po = function(obj) {
      this.left += 0.3;
      obj.style.left = (this.left)+'px';

      if (!this.isup) {
        if (this.t == 0)
        {
          this.top = obj.offsetTop;
          this.h = 570 - 22 - this.top;
          this.mt = Math.sqrt(2*this.h/(this.g*100));
          //alert(mt+' '+isup+' '+t)
        }

        this.t+=0.01;

        if (this.t >= this.mt)
        {
          this.t = this.mt;
          this.rh = (1/2)*this.g*this.t*this.t*100;
          this.s = this.g*this.t*100;
          obj.style.top = (this.rh+this.top)+'px';
          //t = 0;
          this.s = this.s-50>0 ? this.s-50 : 0;
          this.isup = true;
          this.t = 0;
        }
        else
        {
          this.rh = (1/2)*this.g*this.t*this.t*100;
          this.s = this.g*this.t*100;

          obj.style.top = (this.rh+this.top)+'px';
        }
      } else { //up
        //return;

        if (this.s == 0) {
          clearInterval(this.timer);
          this.id.parentNode.removeChild(this.id);
          return;
        }

        if (this.t == 0) {
          this.h = this.s*this.s/(2*this.g*100);
          this.mt = this.s/(this.g*100);
          this.top = obj.offsetTop;
          //alert(mt+' '+isup+' '+t)
        }

        this.t+=0.01;
        if (this.t>=this.mt) {
          this.t = this.mt;

          this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;
          obj.style.top = (this.top - this.rh)+'px';
          this.s = 0;
          this.isup = false;
          this.t = 0;
        }else {
          this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;

          obj.style.top = (this.top - this.rh)+'px';
        }
      }
    }

    LuoRun.prototype.Go = function(obj) {
      var self = this;
      if (obj == null)
        obj = $('box');
      self.timer = setInterval(function() {

        self.Po(obj);

        if (self.h<=0) {
          clearInterval(self.timer);
          self.id.parentNode.removeChild(self.id);
        }
      },10);
    }

    document.onmousedown = function(e) {
      e = e?e:window.event;

      var crtDiv = document.createElement('div');
      crtDiv.style.position = 'absolute';
      crtDiv.style.left = e.clientX + 'px';
      crtDiv.style.top = e.clientY + 'px';
      crtDiv.style.background = '#333';
      crtDiv.style.width = '22px';
      crtDiv.style.height = '22px';

      document.body.appendChild(crtDiv);

      crtDiv.innerHTML = '&nbsp;';
      var C = new LuoRun();
      C.left = e.clientX;
      C.id = crtDiv;
      document.onmouseup = function() {
        document.onmousemove = null;
        window.setTimeout(function() { C.Go(crtDiv); },1000);
      }
    }

Css 样式

<style type="text/css">
    td,body {font-size:12px;}
    .css1 {width:240px;display:table;position:absolute;left:20px;top:20px;border:1px solid green;background:#CAF4BD;line-height:18px;padding:3px;}
    .css2 {width:900px;height:22px;border-top:1px solid #333;position:absolute;top:570px;left:60px;}
</style>

Body Html代码

<body>
  <form id="form1">

  <div class="css1">
    名称：Javascript摸拟自由落体与上抛运动!<br />
    作者：Gloot<br />
    邮箱：glootz@gmail.com <br />
     QQ：345268267 <br />
    网站：http://www.cnblogs.com/editor/ <br />
    操作：在页面不同地方点几下
  </div>

  <div id="line" class="css2">&nbsp;</div>
  </form>
</body>

代码说明

function JsFunc() {
  this.a = "";
  this.b = "";
}

JsFunc.prototype.method = function() {
  var me = this;
  me.a = "method";
}

function init() {
  var func = new JsFunc();
  func.method();
}

JsFunc 类当于一个(C#中的)类;

var func = new JsFunc();

相当于初始化了一个类，创建了一个对象；

this.a, this.b 相当于类中的成员；

JsFunc.prototype.method 相当于创建这个类下的一个方法函数;

如果这个JsFunc 多次 new 操作的话，其下 this成员，将各自的运行操作，互不影响；

所以当对 JsFunc new 后创建一个新对象时，对这对象的成员或方法进行 setTimeout, setInterval 操作话，就会产生类似于并行操作的效果；

function LuoRun()
{
  this.h = 0;
  this.s = 0;
  this.g = 9.8;
  this.isup = false;
  this.rh = 0;
  this.t = 0;
  this.timer = null;
  this.mt = 0;
  this.top = 0;
  this.left = 0;
  this.id = null;
}

this.s 表示速度;

this.h 表示设定的高度, 或物体上抛的最高高度;

this.isup 表示正处于上升还是下降状态；

this.rn 表示下降距当前顶的位移，或上抛距离初始速度位置的位移;

this.t 下降或上抛的时间;

this.mt 表示从某一高度落体至某一低点所用的时间，或以某一初始速度上抛至零速度所用的时间;

this.timer 表示定时器

this.top, this.left 表示物体相对于容器顶部及左边的当前偏移；

this.id 表示当前创建方块的对象id值；

LuoRun.prototype.Po = function(obj) {

}

表示物休自由落体及上抛运动的方法；

this.left += 0.3; 表示物体每落体或上抛向左跳动的偏移量(像素);

Po 方法是在定时器 setInterval 下抛行的一个动作，每次执行时都会根据配置偏移量以及自由落体及上抛相关公式计算当前参数值变化，并设定当前物体的位置；

obj.style.left = (this.left)+'px'; 初始化当前步骤的左偏移;

落体状态

if (!this.isup) {...} 表示是否是落体状态;

if (this.t == 0)
{
     this.top = obj.offsetTop;
     this.h = 570 - 22 - this.top;
     this.mt = Math.sqrt(2*this.h/(this.g*100));
     //alert(mt+' '+isup+' '+t)
}

当时间为 0 时，表示当前处于落体的最顶点，记录当前距顶部的偏移值，设定落体的高度，以及计算此高度落体所用的时间；

if (this.t >= this.mt)
{
    this.t = this.mt;
    this.rh = (1/2)*this.g*this.t*this.t*100;
    this.s = this.g*this.t*100;
    obj.style.top = (this.rh+this.top)+'px';
    //t = 0;
     this.s = this.s-50>0 ? this.s-50 : 0;
     this.isup = true;
     this.t = 0;
}

当落体所用时间，大于 this.mt 的最大时间时，将时间设置为 this.mt 的落体总时间；

this.rh 根据公式 1/2gt² 得出的位移值，会等于 this.h 的值，或接近于 this.h 的高度值;

this.s 根据速度在加速度随时间变化的公式计算出当前的速度，也即最大带度，这也是初始的上抛速度；

this.s = this.s-50>0 ? this.s-50 : 0;

这个 50 即为阻尼系数，即每次上抛所受阻力所减的速度值；

this.isup 设置 true; 表示进入上抛状态；

obj.style.top = (this.rh+this.top)+'px'; 设置物体本步骤落体的当前位置；

上抛运行

if (this.t == 0) {
   this.h = this.s*this.s/(2*this.g*100);
   this.mt = this.s/(this.g*100);
   this.top = obj.offsetTop;
   //alert(mt+' '+isup+' '+t)
}

当时间为 0 时，表示处于上抛开始点，计算按落体后的速度及公式: v²/(2g) 上升的最大高度 this.h; 最大上升时间 this.mt; 保存当前距顶部的偏移 this.top;

 if (this.t>=this.mt) {
    this.t = this.mt;

    this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;
    obj.style.top = (this.top - this.rh)+'px';
    this.s = 0;
    this.isup = false;
    this.t = 0;
}

当时间 this.t 大于 this.mt 这个最大上抛时间时，将时间设置为 this.mt;

this.rh 表示上抛的高度; 公式: vt - (1/2)gt² ;

重置 this.t及this.s 时间与速度，并将 this.isup 置为 false，开始落体动作；

LuoRun.prototype.Go = function(obj) {
      var self = this;
      if (obj == null)
        obj = $('box');
      self.timer = setInterval(function() {

        self.Po(obj);

        if (self.h<=0) {
          clearInterval(self.timer);
          self.id.parentNode.removeChild(self.id);
        }
      },10);
}

Go 是个定时器，10 毫秒执行一次物体偏移移动操作；

当 this.h 小于等于 0 时，清除物体，该对象方块一个落体与上抛过程结束；

document.onmousedown = function(e) {
      e = e?e:window.event;

      var crtDiv = document.createElement('div');
      crtDiv.style.position = 'absolute';
      crtDiv.style.left = e.clientX + 'px';
      crtDiv.style.top = e.clientY + 'px';
      crtDiv.style.background = '#333';
      crtDiv.style.width = '22px';
      crtDiv.style.height = '22px';

      document.body.appendChild(crtDiv);

      crtDiv.innerHTML = '&nbsp;';
      var C = new LuoRun();
      C.left = e.clientX;
      C.id = crtDiv;
      document.onmouseup = function() {
        document.onmousemove = null;
        window.setTimeout(function() { C.Go(crtDiv);             },1000);
      }
    }

当鼠标点击页面时，就创建一个灰黑底，宽高 22 像素的方块；

并初始化 (创建新对象) LuoRun 类；

当鼠标松开后，过一秒钟执行 LuoRun的 Go 定时器，开始表现物体的落体与上抛过程；

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS抛物线动画实例制作

在做无人便利小程序的项目中,某一天产品说要像某产商产品学习,给添加购物车增加抛物线小球动画.好吧,产品你最大,做! 先给大家看下效果图分析这种不固定起始位置的动画,自然不能用 gif 图,所以只能用原生代码实现那我们有什么工具来实现动画呢? 小程序提供了 JS API createAnimation 来创建动画 CSS animation 工具有了,我们再看一下什么是抛物线. 这里我们只讨论水平抛物线,水平抛物线从数学原理上来说就是[水平匀速.垂直加速的运动],转换成代码层面就是在动画效果
js弹性势能动画之抛物线运动实例详解

抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-
JS实现的抛物线运动效果示例

本文实例讲述了JS实现的抛物线运动效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!doctype html > <html> <head> <meta charset="utf-8"/> <title>抛物线运动</title> <style> .pwx_rect{position:absolute;left:10px;top:300px;background-color
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】

本文实例讲述了原生javascript运动函数的封装.分享给大家供大家参考,具体如下: //封装匀速运动 //参数: // 1.dom对象 // 2.样式属性(top,left,width,height,opacity等等) // 3.起始位置,结束位置 // 4.速度:时间间隔,步长 // 5.方向: //返回值 function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) { let currValue
javascript 实现自由落体的方块效果

你可以试着按下鼠标左键,然后拖拽出一个方块后释放,看效果 Simple xhtml page div.container{ position:absolute; border:1px solid #333; font-size:0px; filter: alpha(opacity=60); opacity: 0.6; } =dc-dh){clearInterval(self.dropId);self.fade();} self.node.style.top = Math.min(dt+(++se
JavaScript模拟实现自由落体效果

本文实例为大家分享了js实现自由落体效果的具体代码,供大家参考,具体内容如下 1.效果图 2.实现分析利用Canvas画圆球.地面: 1.下落过程物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能重力势能 Ep = mgh 动能 Ek = (1/2)mv^2 速度右0增加至gt 此间需要计算浏览器每次渲染的圆球y坐标 y = (1/2)gt^2 2.反弹过程动能转化成重力势能速度是逐渐减少直至为0 本打算设置 y = (1/2)g(t-t1)^2,t1为下落或者反弹消耗的时长
js绘制购物车抛物线动画

天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的demo而言),向右的速度匀速,向上的速度递减,减到0后再反方向递增,元素的left和top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了. 之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗
js+html5实现的自由落体运动效果代码

本文实例讲述了js+html5实现的自由落体运动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/x
JS小球抛物线轨迹运动的两种实现方法详解

本文实例讲述了JS小球抛物线轨迹运动的两种实现方法.分享给大家供大家参考,具体如下: js实现小球抛物轨迹运动的大致思路: 1.用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果 2.绘制小球和运动区域,运动区域可通过flex布局实现垂直居中 3.用物理公式S(y)=1/2*g*t*t,S(x)=V(x)t来计算路径现确定V(x)=4m/s,刷新的时间间隔设置为0.1s.原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm.但浏览器
JavaScript模拟重力状态下抛物运动的方法

本文实例讲述了JavaScript模拟重力状态下抛物运动的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码模拟重力状态下的抛物运动,可设置以下参数:横向初速度.纵向初速度.重力加速度(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了).动画间隔时间等,相对专业 <!doctype html> <html> <head> <title>js抛物运动</title> <meta charset=&qu