文章詳情頁

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

瀏覽：103日期：2023-11-05 13:59:22

本文實例講述了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 樣式

<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 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 時，清除物體，該對象方塊一個落體與上拋過程結束；

當鼠標點擊頁面時，就創建一個灰黑底，寬高 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 設計模式之享元模式原理與應用詳解

相關文章：

1. HTTP協議常用的請求頭和響應頭響應詳解說明（學習）2. HTML DOM setInterval和clearInterval方法案例詳解3. 不要在HTML中濫用div4. React優雅的封裝SvgIcon組件示例5. CSS清除浮動方法匯總6. react實現組件狀態緩存的示例代碼7. HTML5 Canvas繪制圖形從入門到精通8. Electron調用外接攝像頭并拍照上傳實現詳解9. HTML5實戰與剖析之觸摸事件(touchstart、touchmove和touchend)10. Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑

排行榜

					
					QuickTime流媒體和Java
使用Python實現批量ping操作方法
JavaScript函數重載操作實例淺析
PHP擴展之壓縮與歸檔擴展1——Bzip2
Android實現動態改變shape.xml中圖形的顏色
python GUI庫圖形界面開發之PyQt5滑塊條控件QSlider詳細使用方法與實例
Java用BigDecimal解決double類型相減時可能存在的誤差
Java基于注解實現的鎖實例解析
老虎身上的斑紋－－－正確使用JAVA1.5里的Annotation
python使用ctypes庫調用DLL動態鏈接庫
解決Vue中的生命周期beforeDestory不觸發的問題
				