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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
JS二分查找算法详解
Nov 01 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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
PHP的面向对象编程
2006/10/09 PHP
laravel请求参数校验方法
2019/10/10 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python如何操作mysql
2020/08/17 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
西式婚礼主持词
2014/03/13 职场文书
通用自荐信范文
2014/03/14 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
如何写辞职书
2015/02/26 职场文书
市级三好生竞选稿
2015/11/21 职场文书
妇产科护理心得体会
2016/01/22 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
如何在C++中调用Python
2021/05/21 Python