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


Posted in Javascript onApril 08, 2020

本文实例讲述了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 = ' ';
      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"> </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/2gt2 得出的位移值,会等于 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 时,表示处于上抛开始点,计算 按落体后的速度及公式: v2/(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)gt2 ;

重置 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 = ' ';
      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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
两个Javascript小tip资料
Nov 23 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 #Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 #Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 #Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 #Javascript
JS async 函数的含义和用法实例总结
Apr 08 #Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 #Javascript
JS co 函数库的含义和用法实例总结
Apr 08 #Javascript
You might like
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python爬虫用mongodb的理由
2020/07/28 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
政法学院毕业生求职信
2014/02/28 职场文书
商务日语专业自荐信
2014/04/17 职场文书
给校长的建议书600字
2014/05/15 职场文书
中文专业自荐书
2014/06/29 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
感恩节寄语2015
2015/03/24 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书