|
|
本文將以一個有趣的小程序為開端，介紹JavaScript的基本語法與功能。此趣味程序為小球碰撞仿真程序，它可仿真彈性碰撞和動能有損的不完全恢復(fù)碰撞。你若想了解此例程中的球間碰撞處理程序，需熟悉矢量的坐標旋轉(zhuǎn)和一些基本的物理學(xué)知識。如果你對此一竅不通，也沒什么關(guān)系，因為對于小球之間的碰撞程序僅為幾個函數(shù)，你只管調(diào)用就是了，這并不影響我們對JavaScript 的學(xué)習(xí)。之所以要寫這樣一個帶點旁門左道的趣味例程，只是希望你對JavaScript多增加一分興趣。
廢話就不多說，現(xiàn)在開始吧。
第一步：材料的準備
制作兩張小球圖片，紅球 、藍球 各一張。圖片格式為 GIF。你可先用3D軟件制作出立體球圖片，然后再將其轉(zhuǎn)為GIF格式，這樣程序動畫會顯得更加逼真。需注意的是圖片背景一定要透明，不然就會讓人看出破綻。最后還需一張背景圖，圖片格式同上。
第二步：編寫主頁骨架
1. 在NETObject ScriptBuilder 中用New 命令生成一個HTML文件的骨架。順便在新生成的HTML文件中，將TITLE標志之間的文字改為"小球碰撞仿真演示程序"。
2. 加入背景圖案和小球圖片資源。
將BODY標志改為，此語句中的background 屬性指定window.gif 為背景圖案。
為加載小球圖片資源，在標志與間添加以下兩句
這兩句HTML腳本的含義完全相同，標志IMG用于加入圖片資源，其中SRC屬性指明加入的圖片文件名。ID屬性指出圖片的對象名稱，這是個重要屬性，因為以后在JavaScript 編程中要使用它。如第一句中，指明BallBlue為圖片資源的對象名稱（你可以把它想象成變量名）。STYLE屬性指明圖片在瀏覽器中的風格，其中"position" 開關(guān)設(shè)為"absolute"，這樣圖片在窗口中的定位就可使用絕對坐標模式，而非文本行模式。
HTML 部分的編寫到此完成。接下來該用JavaScript 讓圖片動起來了。
第三步：編寫JavaScript 程序
1．仿真程序使用窗口對象的SetTimeout（）方法循環(huán)調(diào)用Move_Step()函數(shù)，達到移動圖片的目的，而Move_Step()根據(jù)速度矢量來計算移動一步的長度和方向。碰撞處理分為兩部分，第一是球?qū)Ρ诘呐鲎蔡幚恚涮幚砗瘮?shù)為Ball_Crash_Wall()，第二是球體之間的碰撞處理，其處理函數(shù)為Ball_Crash_Ball()。還需設(shè)置一些碰撞標志變量，記錄當前碰撞狀態(tài)，以避免仿真誤差帶來的錯誤，也許現(xiàn)在你還不明白為什么誤差會導(dǎo)致錯誤，不要緊，后面會慢慢告訴你。
2．圖片對象使用屬性 style.pixelLeft、style.pixelTop 指定圖片在窗口上的位
置，這兩個屬性是圖片運動的關(guān)鍵。不過在計算圖片移動位置時并不用它，而是用數(shù)組變量BallCoord 記錄圖片當前坐標位置，因為屬性 style.pixelLeft、style.pixelTop 是整型變量，而在計算碰撞中有小數(shù)生成，這樣如果直接用 style.pixelLeft、style.pixelTop 記錄位置，除了有誤差，最重要的是在窗口邊緣發(fā)生某些類型的球間碰撞時，會產(chǎn)生小球被撞出屏幕的錯誤。而數(shù)組變量可為浮點型，用于存放小數(shù)，從而避免了錯誤的發(fā)生。
（一）變量定義與程序的初始化
JavaScript 語句可放在HTML文件的主體（BODY區(qū)）中或文件頭（HEAD區(qū)）中，區(qū)別是HEAD 區(qū)一般擺放預(yù)制好的函數(shù)和全局變量，以供BODY區(qū)的語句調(diào)用，而BODY區(qū)一般放入程序初始語句。JavsScript 的變量定義比較自由，但仍需滿足先定義后使用的基本規(guī)則。
1．在HEAD區(qū)中定義全局變量：
Window_Top = 22 //窗口頂端位置。
Window_Left = 22 //窗口左端位置。
Window_Bottom = 294 //窗口底端位置。
Window_Right = 590 //窗口右端位置。
Setp_Proportion = 3.00 //速度放大比率。
BallCoord = new Array(new Array(2),new Array(2)) //定義一個二維數(shù)組，用于記錄兩球的當前坐標。
BallDiametre = new Array(66,92) //定義一維數(shù)組，存放兩球的直徑，其值分別為66和92。
BallMoveVector = new Array(new Array(2,1),new Array(1,-2))//定義一個二維數(shù)組，用于記錄兩球的速度向量，第二維分別存放X與Y軸的速度。
CrashingWall = new Array(new Array(false,false,false,false),new Array(false,false,false,false))//數(shù)組 CrashingWall 用于避免墻壁碰撞的二次計算,值為 true ,表明當前處于碰撞狀態(tài)。初值為 false。
2．在BODY區(qū)中完成程序的初始工作。其內(nèi)容如下：
這里你已經(jīng)看見了一個JavaScript 程序的框架。標志SCRIPT 告訴瀏覽器，下面的內(nèi)容為腳本程序，用LANGUAGE="JavaScript" 指明程序語言為JavaScript。不管是在BODY區(qū)，還是HEAD區(qū)中，任何JavaScript程序必須放在 標志之間。程序中用 new Array（） 定義了一個數(shù)組Balls，以便以后存放圖片對象。接下來的語句Balls[0] = BallBlue 將圖片對象BallBlue 賦給Balls[0]，如果你細心，你會發(fā)現(xiàn)BallBlue正是加載圖片資源語句中指定的對象名。語句Balls[0].style.pixelTop = BallCoord[0][0] = 100，同時將值100賦給數(shù)組變量BallCoord[0][0]和圖片對象的style.pixelTop屬性。從而坐標數(shù)組變量BallCoord[0][0]得到了初值并且指定了球1的初始頂端位置。其余語句的含義雷同。最后一句調(diào)用函數(shù)Move_Step()將小球移動一步。
（二） 單步移動函數(shù)Move_Step()講解
在HTML文件的HEAD區(qū)中編寫Move_Step() 函數(shù)其內(nèi)容如下：
function Move_Step() {
Ball_Crash_Ball() //調(diào)用球間碰狀處理函數(shù)
Balls_Crash_Wall(0) //調(diào)用藍球碰墻處理函數(shù)
Balls_Crash_Wall(1) //調(diào)用紅球碰墻處理函數(shù)
//計算移動步長
BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion
BallCoord[0][1] += BallMoveVector[0][1] * Setp_Proportion
BallCoord[1][0] += BallMoveVector[1][0] * Setp_Proportion
BallCoord[1][1] += BallMoveVector[1][1] * Setp_Proportion
//移動一步
Balls[0].style.pixelTop = BallCoord[0][0]
Balls[0].style.pixelLeft = BallCoord[0][1]
Balls[1].style.pixelTop = BallCoord[1][0]
Balls[1].style.pixelLeft = BallCoord[1][1]
window.setTimeout("Move_Step()",100) //100毫秒后再次調(diào)用Move_Step()函數(shù)
}
該函數(shù)的大部分含義，你可看其中的注釋，這里只對幾點加以說明。
1在語句BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion中， BallMoveVector數(shù)組存放著速度向量。Setp_Proportion 變量存放步長放大比率，BallMoveVector[0][0] 乘以Setp_Proportion 得到移動一步的長度。最后該語句加上BallCoord[0][0]原值后再賦給BallCoord[0][0]本身，得到移動位置。
2．語句window.setTimeout("Move_Step()",100) 表示100毫秒后再次調(diào)用Move_Step()函數(shù)。現(xiàn)在有了setTimeout（）方法，程序就不斷的循環(huán)起來了。
Ball_Crash_Ball()是小球之間的碰撞處理函數(shù)， 你只管調(diào)用就是了，如果你不使用它，程序一樣能運行，只是少了處理球間碰撞的功能。（在Ball_Crash_Ball()函數(shù)中調(diào)用了函數(shù)CrashEnd_Speed() 與atan360(x,y)，以及使用了全局變量CrashingBalls，因而要正確使用它，必須將以上所說的函數(shù)與變量都拷入你的程序中）
（三） 在HEAD區(qū)中編寫墻壁碰撞處理函數(shù)Balls_Crash_Wall()
一個簡化的函數(shù)如下：
function Balls_Crash_Wall(i) {
if( BallCoord[i][0] <= Window_Top)
BallMoveVector[i][0] = - BallMoveVector[i][0]
if ( BallCoord[i][1] <= Window_Left)
BallMoveVector[i][1] = - BallMoveVector[i][1]
if ( BallCoord[i][0] + BallDiametre[i] >= Window_Bottom)
BallMoveVector[i][0] = - BallMoveVector[i][0]
if ( BallCoord[i][1] + BallDiametre[i] >= Window_Right)
BallMoveVector[i][1] = - BallMoveVector[i][1]
}
函數(shù)首先判斷是否球已經(jīng)碰到了墻壁，如是就將相應(yīng)方向上的速度方向反向，而大小不變。但這個函數(shù)有可能發(fā)生錯誤（錯誤發(fā)生的原因有些復(fù)雜，這里只梢作提示。由于小球移動的步長往往大于1個點，而仿真又是離散進行的，從而在有些情況下會發(fā)生錯誤）。需用數(shù)組變量CrashingWall 來標識碰撞狀態(tài)，使得小球與墻壁處于碰撞狀態(tài)時不能再發(fā)生第二次小球與墻壁的碰撞，相應(yīng)的語句也要更改，如第一句改為
if( BallCoord[i][0] <= Window_Top)
{ if (!CrashingWall[i][0]) { BallMoveVector[i][0] = - BallMoveVector[i][0] }
CrashingWall[i][0] = true
} else CrashingWall[i][0] = false
語句中CrahingWall數(shù)組的類型為邏輯型，記錄球與墻壁是否正在發(fā)生碰撞。當為碰撞狀態(tài)時，就不必再將球的運動方向反向。
到此程序的編寫基本完成，其它詳細內(nèi)容見光盤的原程序及說明。現(xiàn)在在NETObject ScriptBuilder 中選擇菜單Preview 項，運行程序。
附注：
1. 運行本例程需先安裝IE4.0以上瀏覽器 或NETscape Navigator 4.0以上瀏覽器
2. 球間碰撞處理提示：當兩球發(fā)生碰撞時，計算兩球圓心連線與X軸的夾角。在依據(jù)此夾角對坐標進行旋轉(zhuǎn)。將原速度矢量映射到旋轉(zhuǎn)后的坐標中。從而將球間的任意碰撞轉(zhuǎn)變?yōu)檎龑π呐鲎病Ｓ脹_量定理可推出碰后的速度計算公式。然后再將坐標旋轉(zhuǎn)成原始坐標。可得碰撞后的速度矢量。看了上面的文字是不是有些煩人，其實并非如此，程序中只用了11行語句就完成了全部計算。
JavaScript技術(shù)：輕輕松松學(xué)習(xí)JavaScript，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
