溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Javascript如何實現摸擬自由落體與上拋運動的原理與方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Javascript如何實現摸擬自由落體與上拋運動的原理與方法”吧!
Java的特點有哪些 1.Java語言作為靜態面向對象編程語言的代表，實現了面向對象理論，允許程序員以優雅的思維方式進行復雜的編程。 2.Java具有簡單性、面向對象、分布式、安全性、平臺獨立與可移植性、動態性等特點。 3.使用Java可以編寫桌面應用程序、Web應用程序、分布式系統和嵌入式系統應用程序等。
//****************************************
//名稱：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);
}
}<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> <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 定時器，開始表現物體的落體與上拋過程；
到此，相信大家對“Javascript如何實現摸擬自由落體與上拋運動的原理與方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
