《JavaScript程序設(shè)計(jì)教程》項(xiàng)目9：貪食蛇游戲設(shè)計(jì)_第1頁(yè)
《JavaScript程序設(shè)計(jì)教程》項(xiàng)目9：貪食蛇游戲設(shè)計(jì)_第2頁(yè)
《JavaScript程序設(shè)計(jì)教程》項(xiàng)目9：貪食蛇游戲設(shè)計(jì)_第3頁(yè)
《JavaScript程序設(shè)計(jì)教程》項(xiàng)目9：貪食蛇游戲設(shè)計(jì)_第4頁(yè)
《JavaScript程序設(shè)計(jì)教程》項(xiàng)目9：貪食蛇游戲設(shè)計(jì)_第5頁(yè)
已閱讀5頁(yè)，還剩28頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

JavaScript程序設(shè)計(jì)教程項(xiàng)目9：貪食蛇游戲設(shè)計(jì)項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.1功能與技術(shù)分析9.1.1功能分析游戲開(kāi)始后，貪食蛇按照一定的速度移動(dòng)，用戶通過(guò)操控上、下、左、右四個(gè)按鍵改變蛇的運(yùn)動(dòng)方向。當(dāng)蛇頭碰撞到食物時(shí)，吞食食物并將其轉(zhuǎn)變?yōu)樾碌纳哳^，蛇身增長(zhǎng)，同時(shí)游戲分值增加。在游戲期間若蛇頭撞到蛇身或障壁則游戲結(jié)束。游戲人機(jī)交互界面以表格的形式構(gòu)建，整個(gè)界面由兩大部分構(gòu)成，以橫線間隔開(kāi)。

上部為游戲標(biāo)題，下部為游戲區(qū)，游戲區(qū)又由游戲得分及速度等運(yùn)行狀態(tài)區(qū)、游戲運(yùn)行區(qū)和幫助信息提示區(qū)三個(gè)主要部分，運(yùn)行界面如圖9-1所示。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.1功能與技術(shù)分析9.1.2技術(shù)分析項(xiàng)目中主要使用了HTML的表格構(gòu)建游戲的背景，通過(guò)方向鍵按下的事件觸發(fā)游戲開(kāi)始，以時(shí)鐘驅(qū)動(dòng)型任務(wù)維持游戲的運(yùn)行。

在項(xiàng)目中除了HTML和JavaScript基本知識(shí)外，涉及的技術(shù)主要包括是Array對(duì)象、String對(duì)象、Windows對(duì)象和Math對(duì)象。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象字符串是JavaScript中應(yīng)用最廣泛的基本類型之一，無(wú)論是處理用戶的輸入數(shù)據(jù)，還是讀取或設(shè)置DOM對(duì)象的屬性，或者操作cookie等都離不開(kāi)字符串類型。

而JavaScript的字符串對(duì)象，即String對(duì)象提供了一系列的屬性和方法用于字符串及字符串對(duì)象的操作，如分割字符串，改變字符串的大小寫(xiě)，字符串拼接等等。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建1.字符串創(chuàng)建字符串的最簡(jiǎn)單辦法是聲明一個(gè)新的變量，并將一組由引號(hào)包含的字符作為值賦給它。例如：varmyStr1='Hello,Javascript!';對(duì)于上面的字符串的值，可以用單引號(hào)，也可以用雙引號(hào)進(jìn)行包含，但不能混用。因此，上面的聲明也可以寫(xiě)作：varmyStr2

="Hello,Javascript!"

;項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建1.字符串可以使用兩種引號(hào)創(chuàng)建字符串為Javascript的操作提供了非常多的便利，例如將一種引號(hào)嵌入在另一種引號(hào)包含的內(nèi)容之中，實(shí)現(xiàn)Javascript程序與HTML語(yǔ)言的混用。例如：document.write('<imgsrc="smp/sample1.jpg">');另外，創(chuàng)建字符串還可以通過(guò)String(

)函數(shù)來(lái)實(shí)現(xiàn)。例如：varmyStr3

=

String('Hello,Javascript!');當(dāng)然，使用String(

)函數(shù)聲明時(shí)可以賦初值，也可以不賦初值項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建1.字符串當(dāng)然，使用String(

)函數(shù)聲明時(shí)可以賦初值，也可以不賦初值，例如：varmyStr4

=String();varmyStr5

=String

(myStr5);對(duì)于上述聲明的myStr4值為空，而myStr5為undefined。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建2.字符串對(duì)象通過(guò)下面的例子可以發(fā)現(xiàn)，雖然前面創(chuàng)建的字符串本質(zhì)上并不是真正的字符串對(duì)象，但是在JavaScript中，會(huì)把一個(gè)字符串從基本變量類型簡(jiǎn)單地轉(zhuǎn)換成一個(gè)臨時(shí)的String對(duì)象，并使用String對(duì)象的方法，然后再將其轉(zhuǎn)換為字符串類型。

那么，如何去創(chuàng)建一個(gè)真正意義上的字符串對(duì)象呢？項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建2.字符串對(duì)象在Javascript中，可以通過(guò)new運(yùn)算符和String()函數(shù)聯(lián)立使用創(chuàng)建一個(gè)字符串對(duì)象，所創(chuàng)建的字符串對(duì)象具有String類的屬性并可以使用其所有的方法進(jìn)行操作。例如：varmyStrObj1

=

new

String(

);在聲明的同時(shí)，可以對(duì)其賦值，甚至可以前面定義過(guò)的字符串的值。例如：varmyStrObj2

=

new

String('abcd')

;varmyStrObj3

=

new

String(myStr3);項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建2.字符串對(duì)象【例9-1】字符串及字符串對(duì)象創(chuàng)建。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.1字符串及字符串對(duì)象的創(chuàng)建2.字符串對(duì)象【例9-1】字符串及字符串對(duì)象創(chuàng)建。

(1)編寫(xiě)網(wǎng)頁(yè)界面，使用表格來(lái)規(guī)范各項(xiàng)輸出內(nèi)容的大小和位置

(2)在<head></head>標(biāo)記中添加網(wǎng)頁(yè)讀入事件處理器onload()函數(shù)程序運(yùn)行結(jié)果如圖9-2所示。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.2字符串對(duì)象屬性字符串對(duì)象擁有三個(gè)屬性，即constructor、length和prototype，其中，length是最常使用的字符串屬性。字符串屬性描述如表9-1所示：屬性說(shuō)明constructor指定創(chuàng)建一個(gè)對(duì)象的函數(shù)length返回字符串的長(zhǎng)度prototype向?qū)ο筇砑訉傩院头椒?xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.2字符串對(duì)象屬性【例9-2】字符串對(duì)象的length屬性。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.2字符串對(duì)象屬性【例9-2】字符串對(duì)象的length屬性。正如9.2.1所述，在Javascript中不僅字符串對(duì)象可以使用其屬性進(jìn)行描述，字符串也會(huì)被臨時(shí)轉(zhuǎn)換為字符串對(duì)象，從而使用字符串對(duì)象的屬性與方法對(duì)其進(jìn)行描述。

本例即是利用例9-1中生成的字符串及字符串對(duì)象的length屬性返回其字符數(shù)量。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.2字符串對(duì)象屬性【例9-2】字符串對(duì)象的length屬性。(1)編寫(xiě)網(wǎng)頁(yè)界面，使用表格來(lái)規(guī)范各項(xiàng)輸出內(nèi)容的大小和位置

(2)在<head></head>標(biāo)記中添加網(wǎng)頁(yè)讀入事件處理onload()函數(shù)：程序運(yùn)行結(jié)果如圖9-3所示。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法字符串對(duì)象提供豐富的方法用于字符串操作，最常見(jiàn)的方法是加（+）方法，在2.2.3中已經(jīng)介紹過(guò)。其它的一些常見(jiàn)方法參見(jiàn)表9-2所示：方法說(shuō)明big()使用大號(hào)字體顯示字符串small()使用小號(hào)字體顯示字符串fontsize()使用指定的尺寸來(lái)顯示字符串fontcolor()使用指定的顏色來(lái)顯示字符串blink()顯示閃動(dòng)字符串bold()使用粗體顯示字符串italics()使用斜體顯示字符串項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法字符串對(duì)象提供豐富的方法用于字符串操作，最常見(jiàn)的方法是加（+）方法，在2.2.3中已經(jīng)介紹過(guò)。其它的一些常見(jiàn)方法參見(jiàn)表9-2所示：方法說(shuō)明strike()使用刪除線來(lái)顯示字符串sub()把字符串顯示為下標(biāo)sup()把字符串顯示為上標(biāo)concat()連接字符串split()把字符串分割為字符串?dāng)?shù)組*indexOf()檢索字符串lastIndexOf()從后向前搜索字符串項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法字符串對(duì)象提供豐富的方法用于字符串操作，最常見(jiàn)的方法是加（+）方法，在2.2.3中已經(jīng)介紹過(guò)。其它的一些常見(jiàn)方法參見(jiàn)表9-2所示：方法說(shuō)明charAt()返回在指定位置的字符substr()從起始索引號(hào)提取字符串中指定數(shù)目的字符substring()提取字符串中兩個(gè)指定的索引號(hào)之間的字符toLowerCase()把字符串轉(zhuǎn)換為小寫(xiě)toUpperCase()把字符串轉(zhuǎn)換為大寫(xiě)項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法【例9-3】字符串對(duì)象修飾字符串方法的應(yīng)用。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法【例9-3】字符串對(duì)象修飾字符串方法的應(yīng)用。

(1)編寫(xiě)網(wǎng)頁(yè)界面,使用表格來(lái)規(guī)范各項(xiàng)輸出內(nèi)容的大小和位置

(2)在<head></head>標(biāo)記中添加網(wǎng)頁(yè)讀入事件處理onload()函數(shù)程序運(yùn)行結(jié)果如圖9-4所示。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法【例9-4】字符串對(duì)象處理字符串方法的應(yīng)用。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.2字符串對(duì)象9.2.3字符串對(duì)象方法【例9-4】字符串對(duì)象處理字符串方法的應(yīng)用。

(1)編寫(xiě)網(wǎng)頁(yè)界面，使用表格來(lái)規(guī)范各項(xiàng)輸出內(nèi)容的大小和位置

(2)在<head></head>標(biāo)記中添加網(wǎng)頁(yè)讀入事件處理onload()函數(shù)：程序運(yùn)行結(jié)果如圖9-5所示。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)貪食蛇游戲是Array對(duì)象、String對(duì)象、Window對(duì)象和Math對(duì)象等知識(shí)的綜合應(yīng)用，當(dāng)然其中還用到了Document對(duì)象。

貪食蛇游戲要通過(guò)上、下、左、右四個(gè)方向鍵中任意一個(gè)按鍵開(kāi)始，其它按鍵無(wú)效。

游戲的過(guò)程中可以實(shí)現(xiàn)蛇對(duì)食物的吞食，還可以進(jìn)行游戲難度的設(shè)置，以及游戲得分記錄。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.1貪食蛇游戲的界面設(shè)計(jì)與實(shí)現(xiàn)貪食蛇游戲的界面設(shè)計(jì)主要由兩個(gè)分區(qū)構(gòu)成，一個(gè)是標(biāo)題區(qū)，另一個(gè)是游戲區(qū)。而游戲區(qū)又由三個(gè)部分構(gòu)成，分別是游戲運(yùn)行狀態(tài)顯示區(qū)，顯示當(dāng)前的得分及貪食蛇運(yùn)動(dòng)的速度；游戲操作區(qū)是食物隨機(jī)產(chǎn)生以及貪食蛇可以運(yùn)動(dòng)的區(qū)域；幫助信息顯示區(qū)主要提供游戲過(guò)程中可以使用的按鍵信息。

設(shè)計(jì)界面及其分區(qū)如圖9-6所示。運(yùn)行狀態(tài)顯示區(qū)

游戲操作區(qū)

幫助信息顯示區(qū)項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.1貪食蛇游戲的界面設(shè)計(jì)與實(shí)現(xiàn)1.主界面的設(shè)計(jì)與實(shí)現(xiàn)主界面中游戲標(biāo)題、幫助信息通常不會(huì)發(fā)生改變，因此，采用靜態(tài)的頁(yè)面設(shè)計(jì)即可，而游戲運(yùn)行狀態(tài)區(qū)與操作區(qū)顯示的信息需隨游戲的進(jìn)程而不斷變化，因而采用動(dòng)態(tài)頁(yè)面。在代碼實(shí)現(xiàn)上，標(biāo)題采用標(biāo)簽<h2>定義，游戲區(qū)采用表格標(biāo)簽<table>定義，并使用水平分隔線標(biāo)簽<hr>對(duì)標(biāo)題與游戲區(qū)進(jìn)行分割。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.1貪食蛇游戲的界面設(shè)計(jì)與實(shí)現(xiàn)2.游戲狀態(tài)顯示與操作區(qū)的設(shè)計(jì)與實(shí)現(xiàn)貪食蛇游戲中運(yùn)行狀態(tài)顯示區(qū)在主表格的第一行出現(xiàn)，游戲運(yùn)行區(qū)則采用子表格的形式顯示，表格中的單元格邊框可以為用戶的操作提供便利，同時(shí)表格以淡綠色為背景有益于用戶視力保護(hù)。單元格的尺寸與數(shù)量以變量的形式確定，也為后期維護(hù)提供了便利。這一部分的實(shí)現(xiàn)采用函數(shù)形式，定義出相應(yīng)的表格格式、表行格式以及單元格格式等，并采用二重嵌套循環(huán)的形式繪制出表格項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.1貪食蛇游戲的界面設(shè)計(jì)與實(shí)現(xiàn)2.游戲狀態(tài)顯示與操作區(qū)的設(shè)計(jì)與實(shí)現(xiàn)表格畫(huà)出后即依次調(diào)用初始化蛇頭函數(shù)initSnake()和初始化食物函數(shù)initFood()。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.2貪食蛇游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)貪食蛇游戲首先是初始化，包括主界面、食物和蛇身的初始化。初始化完成后，只有當(dāng)用戶鍵入上、下、左、右四個(gè)方向鍵時(shí)才開(kāi)始游戲，游戲初始或進(jìn)行過(guò)程中用戶可以按下F(f)鍵、S(s)鍵進(jìn)行游戲速度的設(shè)置，也可以按下P(p)鍵進(jìn)行游戲的暫停或繼續(xù)。

游戲進(jìn)行過(guò)程中用戶通過(guò)方向鍵改變蛇的運(yùn)動(dòng)軌跡，當(dāng)蛇頭吞食到食物時(shí)蛇身會(huì)增長(zhǎng)，當(dāng)蛇頭觸及蛇身或障壁則游戲結(jié)束。游戲的程序流程圖如圖9-7所示。項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.2貪食蛇游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)1.食物與貪食蛇的設(shè)計(jì)與實(shí)現(xiàn)食物及蛇是以單元格構(gòu)成。食物以一個(gè)背景為綠色的單元格表示，可以在整個(gè)游戲操作區(qū)內(nèi)隨機(jī)出現(xiàn)；蛇身以若干背景為紅色的單元格表示，游戲開(kāi)始時(shí)蛇身由一個(gè)單元格構(gòu)成，隨著吞食食物而不斷增加長(zhǎng)度，并隨著蛇頭方向的改變而變換蛇身的形狀。食物是通過(guò)Math對(duì)象的random()方法與parseInt()隨機(jī)產(chǎn)生在游戲操作區(qū)的表格中，如果隨機(jī)生成的表示食物的單元格與蛇身重合則重新生成。圖9-8為食物產(chǎn)生的程序流程圖項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.2貪食蛇游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)1.食物與貪食蛇的設(shè)計(jì)與實(shí)現(xiàn)蛇身的設(shè)計(jì)分為初始化和移動(dòng)兩部分，初始化部分與食物生成類似，只是以紅色的單元格表示，并且由于先生成蛇頭，無(wú)需考慮與食物的重合問(wèn)題。蛇身的移動(dòng)是根據(jù)當(dāng)前的方向鍵值確定蛇頭的坐標(biāo)，并將蛇尾擦除。在蛇移動(dòng)的過(guò)程中，如果蛇頭碰到壁障或蛇身，則游戲結(jié)束，可重新開(kāi)始或退出；如果吃到食物，則蛇身增長(zhǎng)，并產(chǎn)生新的食物。程序流程圖如圖9-9所示項(xiàng)目9：貪食蛇游戲設(shè)計(jì)9.3貪食蛇游戲的設(shè)計(jì)9.3.2貪食蛇游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)1.食物

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論