首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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摸拟自由落体与上抛运动原理与实现方法详解

- Author -

Weiseditor

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
js单例模式详解实例
Nov 21 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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
复合索引(1) 缓存机制(1) TypeScript(2) http_stub_status_module(1) location(2) BufferPool(1) zabbix(9) text-shadow(1) keeplive_timeout(1) RTMP(1)
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
JavaScript 学习笔记（七）字符串的连接
2009/12/31 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python：socket传输大文件示例
2017/01/18 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
新加坡第一大健康与美容零售商：屈臣氏新加坡（Watsons Singapore）
2020/12/11 全球购物
什么是Deployment descriptors；都有什么类型的部署描述符
2015/07/28 面试题
服装设计师职业生涯规划范文
2014/02/28 职场文书
新春联欢会主持词
2014/03/24 职场文书
同居协议书范本
2014/04/23 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
投资合作意向书范本
2015/05/08 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Django rest framework如何自定义用户表
2021/06/09 Python