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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
npm全局环境变量配置详解
Dec 15 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
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
js计数器代码
2006/11/04 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Django多数据库联用实现方法解析
2020/11/12 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
后勤工作职责
2013/12/22 职场文书
公积金接收函格式
2015/01/30 职场文书
遗失说明具结保证书
2015/02/26 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
MySQL update set 和 and的区别
2021/05/08 MySQL
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Python实现双向链表
2022/05/25 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python