2. 程式人生 > 程式設計 >Javascript摸擬自由落體與上拋運動原理與實現方法詳解

Javascript摸擬自由落體與上拋運動原理與實現方法詳解

阿新 • • 發佈：2020-04-09

本文例項講述了Javascript摸擬自由落體與上拋運動原理與實現方法。分享給大家供大家參考，具體如下：

JavaScript 程式碼

//****************************************
    //名稱：Javascript摸擬自由落體與上拋運動!
    //作者：Gloot
    //郵箱：[email protected]
    // 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 />
    郵箱：[email protected] <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/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 = '&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程式設計有所幫助。

相關推薦

Javascript摸擬自由落體與上拋運動原理與實現方法詳解

本文例項講述了Javascript摸擬自由落體與上拋運動原理與實現方法。分享給大家供大家參考，具體如下：

JavaScript鏈式呼叫原理與實現方法詳解

本文例項講述了JavaScript鏈式呼叫原理與實現方法。分享給大家供大家參考，具體如下：

python雙向連結串列原理與實現方法詳解

本文例項講述了python雙向連結串列原理與實現方法。分享給大家供大家參考，具體如下：

Python中順序表原理與實現方法詳解

本文例項講述了Python中順序表原理與實現方法。分享給大家供大家參考，具體如下：

Mysql賬戶管理原理與實現方法詳解

本文例項講述了Mysql賬戶管理原理與實現方法。分享給大家供大家參考，具體如下：

PHP高階程式設計之訊息佇列原理與實現方法詳解

本文例項講述了PHP高階程式設計之訊息佇列原理與實現方法。分享給大家供大家參考，具體如下：

Python通過TensorFLow進行線性模型訓練原理與實現方法詳解

本文例項講述了Python通過TensorFLow進行線性模型訓練原理與實現方法。分享給大家供大家參考，具體如下：

Python雙鏈表原理與實現方法詳解

本文例項講述了Python雙鏈表原理與實現方法。分享給大家供大家參考，具體如下：

Python單鏈表原理與實現方法詳解

本文例項講述了Python單鏈表原理與實現方法。分享給大家供大家參考，具體如下：

原生javascript製作的拼圖遊戲實現方法詳解

本文例項講述了原生javascript製作的拼圖遊戲實現方法。分享給大家供大家參考，具體如下：

JS前端面試必備——基本排序演算法原理與實現方法詳解【插入/選擇/歸併/冒泡/快速排序】

本文例項講述了JS前端面試必備——基本排序演算法原理與實現方法。分享給大家供大家參考，具體如下：

Java連結串列中新增元素的原理與實現方法詳解

本文例項講述了Java連結串列中新增元素的原理與實現方法。分享給大家供大家參考，具體如下：

JS前端模組化原理與實現方法詳解

本文例項講述了JS前端模組化原理與實現方法。分享給大家供大家參考，具體如下：

Java二叉搜尋樹基礎原理與實現方法詳解

本文例項講述了Java二叉搜尋樹基礎原理與實現方法。分享給大家供大家參考，具體如下：

JS 圖片壓縮原理與實現方法詳解

本文例項講述了JS 圖片壓縮原理與實現方法。分享給大家供大家參考，具體如下：

JavaScript影象放大鏡效果實現方法詳解

1. 基本四瓣花型圖案 根據四瓣花卉線的引數方程： t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);

JavaScript圖片旋轉效果實現方法詳解

在Canvas API中，上下文CanvasRenderingContext2D物件提供了一個與座標旋轉相關的方法：

JavaScript indexOf()原理及使用方法詳解

定義和用法 indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。 語法

JavaScript動畫例項之粒子文字的實現方法詳解

1．粒子文字的實現原理 粒子文字的實現原理是：使用兩張 canvas，一張是使用者看不到的canvas1，用來繪製文字；另一張是使用者看到的canvas2，用來根據canvas1中繪製的文字資料來生成粒子。

Javascript表單序列化原理及實現程式碼詳解

隨著 Ajax 的出現，表單序列化已經成為一種常見需求。在 JavaScript 中，可 以利用表單欄位的 type 屬性，連同 name 和 value 屬性一起實現對錶單的序列化。在編寫程式碼之前， 有必須先搞清楚在表單提交期間，瀏覽器