文章詳情頁

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

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

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

JavaScript 代碼

//**************************************** //名稱：Javascript摸擬自由落體與上拋運動! //作者：Gloot //郵箱：[email protected] // QQ：345268267 //網(wǎng)站：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 /> 郵箱：[email protected] <br /> QQ：345268267 <br /> 網(wǎng)站：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();

相當于初始化了一個類，創(chuàng)建了一個對象；

this.a, this.b 相當于類中的成員；

JsFunc.prototype.method 相當于創(chuàng)建這個類下的一個方法函數(shù);

如果這個JsFunc 多次 new 操作的話，其下 this成員，將各自的運行操作，互不影響；

所以當對 JsFunc new 后創(chuàng)建一個新對象時，對這對象的成員或方法進行 setTimeout, setInterval 操作話，就會產(chǎn)生類似于并行操作的效果；

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 表示設(shè)定的高度, 或物體上拋的最高高度;

this.isup 表示正處于上升還是下降狀態(tài)；

this.rn 表示下降距當前頂?shù)奈灰疲蛏蠏伨嚯x初始速度位置的位移;

this.t 下降或上拋的時間;

this.mt 表示從某一高度落體至某一低點所用的時間，或以某一初始速度上拋至零速度所用的時間;

this.timer 表示定時器

this.top, this.left 表示物體相對于容器頂部及左邊的當前偏移；

this.id 表示當前創(chuàng)建方塊的對象id值；

LuoRun.prototype.Po = function(obj) {}

表示物休自由落體及上拋運動的方法；

this.left += 0.3; 表示物體每落體或上拋向左跳動的偏移量(像素);

Po 方法是在定時器 setInterval 下拋行的一個動作，每次執(zhí)行時都會根據(jù)配置偏移量以及自由落體及上拋相關(guān)公式計算當前參數(shù)值變化，并設(shè)定當前物體的位置；

obj.style.left = (this.left)+’px’; 初始化當前步驟的左偏移;

落體狀態(tài)

if (!this.isup) {...} 表示是否是落體狀態(tài);

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 時，表示當前處于落體的最頂點，記錄當前距頂部的偏移值，設(shè)定落體的高度，以及計算此高度落體所用的時間；

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 的最大時間時，將時間設(shè)置為 this.mt 的落體總時間；

this.rh 根據(jù)公式 1/2gt2 得出的位移值，會等于 this.h 的值，或接近于 this.h 的高度值;

this.s 根據(jù) 速度在加速度隨時間變化的公式計算出當前的速度，也即最大帶度，這也是初始的上拋速度；

this.s = this.s-50>0 ? this.s-50 : 0;

這個 50 即為阻尼系數(shù)，即每次上拋所受阻力所減的速度值；

this.isup 設(shè)置 true; 表示進入上拋狀態(tài)；

obj.style.top = (this.rh+this.top)+’px’; 設(shè)置物體本步驟落體的當前位置；

上拋運行

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 這個最大上拋時間時，將時間設(shè)置為 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 毫秒執(zhí)行一次物體偏移移動操作；

當 this.h 小于等于 0 時，清除物體，該對象方塊一個落體與上拋過程結(jié)束；

當鼠標點擊頁面時，就創(chuàng)建一個灰黑底，寬高 22 像素的方塊；

并初始化 (創(chuàng)建新對象) LuoRun 類；

當鼠標松開后，過一秒鐘執(zhí)行 LuoRun的 Go 定時器，開始表現(xiàn)物體的落體與上拋過程；

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

JavaScript

上一條：JavaScript 俄羅斯方塊游戲?qū)崿F(xiàn)方法與代碼解釋下一條：javascript 設(shè)計模式之享元模式原理與應用詳解

相關(guān)文章：

1. python 如何在 Matplotlib 中繪制垂直線2. bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼3. ASP常用日期格式化函數(shù) FormatDate()4. python中@contextmanager實例用法5. html中的form不提交（排除）某些input 原創(chuàng)6. CSS3中Transition屬性詳解以及示例分享7. js select支持手動輸入功能實現(xiàn)代碼8. 如何通過python實現(xiàn)IOU計算代碼實例9. 開發(fā)效率翻倍的Web API使用技巧10. vue使用moment如何將時間戳轉(zhuǎn)為標準日期時間格式

排行榜

					
					Python數(shù)據(jù)相關(guān)系數(shù)矩陣和熱力圖輕松實現(xiàn)教程
如何在PHP中讀寫文件
vue-drag-chart 拖動/縮放圖表組件的實例代碼
PHP正則表達式函數(shù)preg_replace用法實例分析
如何使用repr調(diào)試python程序
php redis setnx分布式鎖簡單原理解析
Java xml數(shù)據(jù)格式返回實現(xiàn)操作
Spring @Primary和@Qualifier注解原理解析
Django使用channels + websocket打造在線聊天室
Spring Boot 功能整合的實現(xiàn)
一個 2 年 Android 開發(fā)者的 18 條忠告
				