JavaScript 的歷史雖短,但卻發(fā)展迅速。最初NetScape開(kāi)發(fā)了LiveScript語(yǔ)言，使得它的Navigator和Web 服務(wù)器產(chǎn)品有了基本的腳本編寫(xiě)功能。當(dāng) Navigator 2.0中加入了Java小程序后，NetScape才把LiveScript變成了JavaScript，至此JavaScript誕生。  

本文將以一個(gè)有趣的小程序?yàn)殚_(kāi)端，介紹JavaScript的基本語(yǔ)法與功能。此趣味程序?yàn)樾∏蚺鲎卜抡娉绦?，它可仿真彈性碰撞和?dòng)能有損的不完全恢復(fù)碰撞。你若想了解此例程中的球間碰撞處理程序，需熟悉矢量的坐標(biāo)旋轉(zhuǎn)和一些基本的物理學(xué)知識(shí)。如果你對(duì)此一竅不通，也沒(méi)什么關(guān)系，因?yàn)閷?duì)于小球之間的碰撞程序僅為幾個(gè)函數(shù)，你只管調(diào)用就是了，這并不影響我們對(duì)JavaScript 的學(xué)習(xí)。之所以要寫(xiě)這樣一個(gè)帶點(diǎn)旁門(mén)左道的趣味例程，只是希望你對(duì)JavaScript多增加一分興趣。  

廢話就不多說(shuō)，現(xiàn)在開(kāi)始吧。  

第一步：材料的準(zhǔn)備  

制作兩張小球圖片，紅球 、藍(lán)球 各一張。圖片格式為 GIF。你可先用3D軟件制作出立體球圖片，然后再將其轉(zhuǎn)為GIF格式，這樣程序動(dòng)畫(huà)會(huì)顯得更加逼真。需注意的是圖片背景一定要透明，不然就會(huì)讓人看出破綻。最后還需一張背景圖，圖片格式同上。  

第二步：編寫(xiě)主頁(yè)骨架  

1. 在NetObject ScriptBuilder 中用New 命令生成一個(gè)HTML文件的骨架。順便在新生成的HTML文件中，將TITLE標(biāo)志之間的文字改為"小球碰撞仿真演示程序"。  

2. 加入背景圖案和小球圖片資源。  
將BODY標(biāo)志改為，此語(yǔ)句中的background 屬性指定window.gif 為背景圖案。  

為加載小球圖片資源，在標(biāo)志與間添加以下兩句  

 

這兩句HTML腳本的含義完全相同，標(biāo)志IMG用于加入圖片資源，其中SRC屬性指明加入的圖片文件名。ID屬性指出圖片的對(duì)象名稱，這是個(gè)重要屬性，因?yàn)橐院笤贘avaScript 編程中要使用它。如第一句中，指明BallBlue為圖片資源的對(duì)象名稱（你可以把它想象成變量名）。STYLE屬性指明圖片在瀏覽器中的風(fēng)格，其中"position" 開(kāi)關(guān)設(shè)為"absolute"，這樣圖片在窗口中的定位就可使用絕對(duì)坐標(biāo)模式，而非文本行模式。  

HTML 部分的編寫(xiě)到此完成。接下來(lái)該用JavaScript 讓圖片動(dòng)起來(lái)了。  


第三步：編寫(xiě)JavaScript 程序  

1．仿真程序使用窗口對(duì)象的SetTimeout（）方法循環(huán)調(diào)用Move_Step()函數(shù)，達(dá)到移動(dòng)圖片的目的，而Move_Step()根據(jù)速度矢量來(lái)計(jì)算移動(dòng)一步的長(zhǎng)度和方向。碰撞處理分為兩部分，第一是球?qū)Ρ诘呐鲎蔡幚?，其處理函?shù)為Ball_Crash_Wall()，第二是球體之間的碰撞處理，其處理函數(shù)為Ball_Crash_Ball()。還需設(shè)置一些碰撞標(biāo)志變量，記錄當(dāng)前碰撞狀態(tài)，以避免仿真誤差帶來(lái)的錯(cuò)誤，也許現(xiàn)在你還不明白為什么誤差會(huì)導(dǎo)致錯(cuò)誤，不要緊，后面會(huì)慢慢告訴你。  

2．圖片對(duì)象使用屬性 style.pixelLeft、style.pixelTop 指定圖片在窗口上的位  
置，這兩個(gè)屬性是圖片運(yùn)動(dòng)的關(guān)鍵。不過(guò)在計(jì)算圖片移動(dòng)位置時(shí)并不用它，而是用數(shù)組變量BallCoord 記錄圖片當(dāng)前坐標(biāo)位置，因?yàn)閷傩?nbsp;style.pixelLeft、style.pixelTop 是整型變量，而在計(jì)算碰撞中有小數(shù)生成，這樣如果直接用 style.pixelLeft、style.pixelTop 記錄位置，除了有誤差，最重要的是在窗口邊緣發(fā)生某些類(lèi)型的球間碰撞時(shí)，會(huì)產(chǎn)生小球被撞出屏幕的錯(cuò)誤。而數(shù)組變量可為浮點(diǎn)型，用于存放小數(shù)，從而避免了錯(cuò)誤的發(fā)生。  

（一）變量定義與程序的初始化  

JavaScript 語(yǔ)句可放在HTML文件的主體（BODY區(qū)）中或文件頭（HEAD區(qū)）中，區(qū)別是HEAD 區(qū)一般擺放預(yù)制好的函數(shù)和全局變量，以供BODY區(qū)的語(yǔ)句調(diào)用，而B(niǎo)ODY區(qū)一般放入程序初始語(yǔ)句。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)) //定義一個(gè)二維數(shù)組，用于記錄兩球的當(dāng)前坐標(biāo)。  

BallDiametre = new Array(66,92) //定義一維數(shù)組，存放兩球的直徑，其值分別為66和92。  

BallMoveVector = new Array(new Array(2,1),new Array(1,-2))//定義一個(gè)二維數(shù)組，用于記錄兩球的速度向量，第二維分別存放X與Y軸的速度。  

CrashingWall = new Array(new Array(false,false,false,false),new Array(false,false,false,false))//數(shù)組 CrashingWall 用于避免墻壁碰撞的二次計(jì)算,值為 true ,表明當(dāng)前處于碰撞狀態(tài)。初值為 false。  

2．在BODY區(qū)中完成程序的初始工作。其內(nèi)容如下：  

這里你已經(jīng)看見(jiàn)了一個(gè)JavaScript 程序的框架。標(biāo)志SCRIPT 告訴瀏覽器，下面的內(nèi)容為腳本程序，用LANGUAGE="JavaScript" 指明程序語(yǔ)言為JavaScript。不管是在BODY區(qū)，還是HEAD區(qū)中，任何JavaScript程序必須放在 標(biāo)志之間。程序中用 new Array（） 定義了一個(gè)數(shù)組Balls，以便以后存放圖片對(duì)象。接下來(lái)的語(yǔ)句Balls[0] = BallBlue 將圖片對(duì)象BallBlue 賦給Balls[0]，如果你細(xì)心，你會(huì)發(fā)現(xiàn)BallBlue正是加載圖片資源語(yǔ)句中指定的對(duì)象名。語(yǔ)句Balls[0].style.pixelTop = BallCoord[0][0] = 100，同時(shí)將值100賦給數(shù)組變量BallCoord[0][0]和圖片對(duì)象的style.pixelTop屬性。從而坐標(biāo)數(shù)組變量BallCoord[0][0]得到了初值并且指定了球1的初始頂端位置。其余語(yǔ)句的含義雷同。最后一句調(diào)用函數(shù)Move_Step()將小球移動(dòng)一步。  

（二） 單步移動(dòng)函數(shù)Move_Step()講解  

在HTML文件的HEAD區(qū)中編寫(xiě)Move_Step() 函數(shù)其內(nèi)容如下：  
function Move_Step() {  
Ball_Crash_Ball() //調(diào)用球間碰狀處理函數(shù)  

Balls_Crash_Wall(0) //調(diào)用藍(lán)球碰墻處理函數(shù)  
Balls_Crash_Wall(1) //調(diào)用紅球碰墻處理函數(shù)  

//計(jì)算移動(dòng)步長(zhǎng)  
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  
//移動(dòng)一步  
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ù)的大部分含義，你可看其中的注釋，這里只對(duì)幾點(diǎn)加以說(shuō)明。  

1在語(yǔ)句BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion中， BallMoveVector數(shù)組存放著速度向量。Setp_Proportion 變量存放步長(zhǎng)放大比率，BallMoveVector[0][0] 乘以Setp_Proportion 得到移動(dòng)一步的長(zhǎng)度。最后該語(yǔ)句加上BallCoord[0][0]原值后再賦給BallCoord[0][0]本身，得到移動(dòng)位置。  

2．語(yǔ)句window.setTimeout("Move_Step()",100) 表示100毫秒后再次調(diào)用Move_Step()函數(shù)?，F(xiàn)在有了setTimeout（）方法，程序就不斷的循環(huán)起來(lái)了。  

Ball_Crash_Ball()是小球之間的碰撞處理函數(shù)， 你只管調(diào)用就是了，如果你不使用它，程序一樣能運(yùn)行，只是少了處理球間碰撞的功能。（在Ball_Crash_Ball()函數(shù)中調(diào)用了函數(shù)CrashEnd_Speed() 與atan360(x,y)，以及使用了全局變量CrashingBalls，因而要正確使用它，必須將以上所說(shuō)的函數(shù)與變量都拷入你的程序中）  


（三） 在HEAD區(qū)中編寫(xiě)墻壁碰撞處理函數(shù)Balls_Crash_Wall()  

一個(gè)簡(jiǎn)化的函數(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)方向上的速度方向反向，而大小不變。但這個(gè)函數(shù)有可能發(fā)生錯(cuò)誤（錯(cuò)誤發(fā)生的原因有些復(fù)雜，這里只梢作提示。由于小球移動(dòng)的步長(zhǎng)往往大于1個(gè)點(diǎn)，而仿真又是離散進(jìn)行的，從而在有些情況下會(huì)發(fā)生錯(cuò)誤）。需用數(shù)組變量CrashingWall 來(lái)標(biāo)識(shí)碰撞狀態(tài)，使得小球與墻壁處于碰撞狀態(tài)時(shí)不能再發(fā)生第二次小球與墻壁的碰撞，相應(yīng)的語(yǔ)句也要更改，如第一句改為  

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  

語(yǔ)句中CrahingWall數(shù)組的類(lèi)型為邏輯型，記錄球與墻壁是否正在發(fā)生碰撞。當(dāng)為碰撞狀態(tài)時(shí)，就不必再將球的運(yùn)動(dòng)方向反向。  

到此程序的編寫(xiě)基本完成，其它詳細(xì)內(nèi)容見(jiàn)光盤(pán)的原程序及說(shuō)明。現(xiàn)在在NetObject ScriptBuilder 中選擇菜單Preview 項(xiàng)，運(yùn)行程序。  

附注：  
1. 運(yùn)行本例程需先安裝IE4.0以上瀏覽器 或Netscape Navigator 4.0以上瀏覽器  

2. 球間碰撞處理提示：當(dāng)兩球發(fā)生碰撞時(shí)，計(jì)算兩球圓心連線與X軸的夾角。在依據(jù)此夾角對(duì)坐標(biāo)進(jìn)行旋轉(zhuǎn)。將原速度矢量映射到旋轉(zhuǎn)后的坐標(biāo)中。從而將球間的任意碰撞轉(zhuǎn)變?yōu)檎龑?duì)心碰撞。用沖量定理可推出碰后的速度計(jì)算公式。然后再將坐標(biāo)旋轉(zhuǎn)成原始坐標(biāo)?？傻门鲎埠蟮乃俣仁噶?。看了上面的文字是不是有些煩人，其實(shí)并非如此，程序中只用了11行語(yǔ)句就完成了全部計(jì)算。

最新評(píng)論