版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
JavaScript程序設計教程項目6：配對記憶游戲的設計項目6：配對記憶游戲的設計6.1功能與技術分析6.1.1配對記憶游戲配對記憶游戲是一個考驗記憶力的游戲。游戲中有20張圖片（字符），初始情況下看到的是它們相同的背面，點擊后圖片翻轉過來，可以看到圖片正面（如圖6-1左圖所示）。項目6：配對記憶游戲的設計6.1功能與技術分析6.1.1配對記憶游戲配對記憶游戲是一個考驗記憶力的游戲。游戲中有20張圖片（字符），初始情況下看到的是它們相同的背面，點擊后圖片翻轉過來，可以看到圖片正面（如圖6-1左圖所示）。
任意點擊其中的兩張圖片，如果兩張圖片的正面不同，兩張圖片翻轉回去，可以憑借記憶繼續(xù)尋找兩張相同的圖片，如果兩張圖片正面一致，則兩張圖片會被定格，直到所有的圖片都被定格，如圖6-1右圖所示。項目6：配對記憶游戲的設計6.1功能與技術分析6.1.2功能分析配對記憶游戲的玩法很簡單，用鼠標左鍵單擊圖片背面就會翻開一張圖片，最多可以同時翻開兩張，如果是兩張相同，就可以配對，不同的話就會自動翻回去，讓用戶繼續(xù)選擇。
游戲同時可以實現(xiàn)計時，直到把所有的圖片都翻開之后游戲結束。這之中其實并沒有什么特殊技巧，完全是要靠瞬間的印象來回想自己點過的圖片花色與位置，然后逐一配對。項目6：配對記憶游戲的設計6.1功能與技術分析6.1.2功能分析游戲實現(xiàn)的功能如下：
(1)繪制圖片內容
(2)每次游戲開始前進行洗牌
(3)當點擊圖片時，判斷是第一次點擊還是第二次
(4)點擊圖片時顯示對應的多邊形或者圖片
(5)當點擊的兩張圖片匹配時，定格這兩張圖片項目6：配對記憶游戲的設計6.1功能與技術分析6.1.3技術分析除了需要上一章所學的知識點之外(如JavaScript基本知識，繪制矩形、圖像，創(chuàng)建對象等)，還需掌握的知識點有：
(1)
JavaScript的循環(huán)結構，以實現(xiàn)對多個圖片的類似操作。
(2)
JavaScript的數組對象，以存放多個圖片的圖片等信息。數組與循環(huán)的結合，可以縮短和簡化程序，因為可以利用下標值設計一個循環(huán)，高效地處理多種情況。項目6：配對記憶游戲的設計6.2
JavaScript的數組數組是用一個統(tǒng)一的名稱表示的、順序排列的一組變量。
數組中的變量稱為數組元素，用下標（數字）來標識它們，因此數組元素又稱為下標變量。
在JavaScript語言中數組表現(xiàn)為對象，即Array對象。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作
JavaScript語言中，使用new操作符來創(chuàng)建新數組，并可通過數組元素的下標實現(xiàn)對任意元素的訪問。1.數組的創(chuàng)建數組可用構造函數Array()產生，標準的構造方法主要有三種：varMyArray=newArray();varMyArray=newArray(4);varMyArray=newArray(arg1,arg2,...,argN);說明：第一句聲明一個空數組并將其存放在以MyArray命名的空間里，可用數組對象的方法動態(tài)添加數組元素；項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作
JavaScript語言中，使用new操作符來創(chuàng)建新數組，并可通過數組元素的下標實現(xiàn)對任意元素的訪問。1.數組的創(chuàng)建數組可用構造函數Array()產生，標準的構造方法主要有三種：varMyArray=newArray();varMyArray=newArray(4);varMyArray=newArray(arg1,arg2,...,argN);說明：第二句聲明長度為4的空數組，JavaScript語言中支持最大的數組長度為4294967295；項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作
JavaScript語言中，使用new操作符來創(chuàng)建新數組，并可通過數組元素的下標實現(xiàn)對任意元素的訪問。1.數組的創(chuàng)建數組可用構造函數Array()產生，標準的構造方法主要有三種：varMyArray=newArray();varMyArray=newArray(4);varMyArray=newArray(arg1,arg2,...,argN);說明：第三句聲明一個長度為N的數組，并用參數arg1、arg2、...、argN直接初始化數組元素，該方法在實際應用中最為廣泛。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作1.數組的創(chuàng)建數組可用構造函數Array()產生，標準的構造方法主要有三種：varMyArray=newArray();varMyArray=newArray(4);varMyArray=newArray(arg1,arg2,...,argN);與上面構造方法相對應，有如下簡化的數組構造形式：varMyArray=[];varMyArray=[,,,];varMyArray=[arg1,arg2,...,argN];項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作1.數組的創(chuàng)建varMyArray=[];varMyArray=[,,,];varMyArray=[arg1,arg2,...,argN];其中第二種方式中表明數組長度為4，并且數組元素未被指定，瀏覽器解釋時，把其看成擁有4個未指定初始值的元素的數組。將其擴展如下：varMyArray=[234,,24,,56,,,,3,4];項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作1.數組的創(chuàng)建varMyArray=[234,,24,,56,,,,3,4];該語句構造一個長度為10、某些位置指定初始值、其他位置未指定初始值的數組MyArray.MyArray又被稱為稀疏數組，可通過給指定位置賦值的方法來修改該數組。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作2.數組元素的訪問可以用數組名及下標唯一地識別一個數組的元素，比如MyArray(5)表示名稱為MyArray的數組中順序號（下標）為5的那個數組元素。又如代碼：t=a(5);a(5)=a(6);a(6)=t;將數組a中的第5個元素與第6個元素做交換。數組的下標從0開始，最后一個元素的下標是其長度-1：length-1。
可通過數組元素的下標實現(xiàn)對它的訪問：vardata=MyArray[i];項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作2.數組元素的訪問可通過數組元素的下標實現(xiàn)對它的訪問：vardata=MyArray[i];但訪問數組中未被定義的元素時將返回未定義的值，如下列代碼：vardata=MyArray[5];運行后，data返回undefined。同樣，使用稀疏數組時，訪問未被定義的元素也將返回未定義的值undefined。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作2.數組元素的訪問【例6-1】使用數組，在表格中分別填入奇數、偶數或全部。
項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作2.數組元素的訪問【例6-1】使用數組，在表格中分別填入奇數、偶數或全部。
(1)編寫網頁界面，使用JavaScript代碼生成表格，使用按鈕接受命令此時的程序運行后已經可以顯示表格，如圖6-3所示。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作2.數組元素的訪問【例6-1】使用數組，在表格中分別填入奇數、偶數或全部。
(2)在<head></head>標記中添加JavaScript代碼生成數組，并初始化：<scripttype="text/javascript">
varMyArray=new
Array();
for(i=0;i<25;i++){
//數組MyArray初始化
MyArray[i]=i+1;
}</script>項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.1數組的基本操作2.數組元素的訪問【例6-1】使用數組，在表格中分別填入奇數、偶數或全部。
(3)添加返回對象的函數$(x)以及根據不同參數s為數組賦值的函數test(s)：function$(x){
returndocument.getElementById(x);}程序運行結果如圖6-2所示。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作利用Array對象提供的屬性和方法，可以對數組進行更多的操作，如增加、刪除和修改數組元素等。1.修改length屬性更改數組
Array對象的length屬性保存目標數組的長度：varstrLength=MyArray.length;
Array對象的length屬性檢索的是數組末尾的下一個可及（未被填充）的位置的索引值，即使前面有些索引沒被使用，length屬性也返回最后一個元素后面第一個可及位置的索引值。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作1.修改length屬性更改數組考察下面代碼：functionMyTest(){
varMyArray=newArray();
MyArray[10]="Welcome!";
vararrayLength=MyArray.length;varmsg="數組的length屬性實例:\n\n";
msg+="MyArray.length="+arrayLength+"\n";
alert(msg);
}
程序運行結果如圖6-4所示。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作1.修改length屬性更改數組在循環(huán)訪問數組元素的過程中，應十分注意控制循環(huán)的變量的變化情況。
length屬性可讀可寫，在JavaScript語言中可通過修改數組的length屬性來更改數組的內容，如通過減小數組的length屬性，改變數組所含的元素，即凡是下標在新length-1后的數組元素將被刪除。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作1.修改length屬性更改數組【例6-2】改變數組的length屬性，觀察數組元素的變化。
(1)編寫網頁界面，使用表格顯示原始數組的元素以及改變后的數組元素，使用按鈕接受命令
(2)在<head></head>標記中添加如下JavaScript代碼，包括根據不同參數s操作數組的函數test(s)，還有將數組的值寫到表格的函數getMsg(arrayName)程序運行結果如圖6-5所示。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作1.修改length屬性更改數組【例6-2】改變數組的length屬性，觀察數組元素的變化。在使用MyArray.length=3語句后，數組長度變?yōu)?，直接刪除數組元素MyArray[3]；在使用MyArray.length=4語句后，數組長度變變?yōu)?，在數組末端添加元素MyArray[3]，且為未定義類型；在使用MyArray[3]="Fifth"語句直接給MyArray[3]賦值“Fifth”后，數組情況如圖6-6所示：更改Array對象的length屬性后，任何包含數據的索引只要大于length-1，將立即被設定為未定義類型。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素
Array對象的splice()方法提供一種在數組任意位置添加、刪除數組元素的方法。語法如下：MyArray.splice(start,delete,arg3,…,argN);參數說明如下：當參數delete為0時，不執(zhí)行任何刪除操作；當參數delete非0時，在調用此方法的數組中刪除下標從start到shart+delete的數組元素，其后的數組元素的下標均減小delete；項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素
Array對象的splice()方法提供一種在數組任意位置添加、刪除數組元素的方法。語法如下：MyArray.splice(start,delete,arg3,…,argN);參數說明如下：如果在參數delete之后還有參數，在執(zhí)行刪除操作之后，這些參數將作為新元素添加到數組中由start指定的位置，原數組該位置之后的元素往后順移。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素【例6-3】使用splice()方法添加和刪除數組元素。編寫步驟如下：
(1)編寫網頁界面，使用表格顯示原始數組的元素以及改變后的數組元素，使用按鈕接受命令
(2)在<head></head>標記中添加如下JavaScript代碼，包括根據不同參數s操作數組的函數test(s)，還有將數組的值寫到表格的函數getMsg(arrayName)：程序運行結果如圖6-7所示。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素【例6-3】使用splice()方法添加和刪除數組元素。其中核心語句如下：MyArray.splice(1,0);MyArray.splice(1,1);MyArray.splice(1,1,"New1","New2");第一句中參數delete為0，不執(zhí)行任何操作，MyArray數組保持不變：MyArray=["First","Second","Third","Forth"];項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素【例6-3】使用splice()方法添加和刪除數組元素。其中核心語句如下：MyArray.splice(1,0);MyArray.splice(1,1);MyArray.splice(1,1,"New1","New2");第二句參數delete不為0（=1）,執(zhí)行刪除下標為start（=1）到start+delete（=2）之間的數組元素,即MyString[1]=Second,其后的數組元素往前挪動delete（=1）位,此時MyArray數組變?yōu)椋篗yArray=["First","Third","Forth"];項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素【例6-3】使用splice()方法添加和刪除數組元素。其中核心語句如下：MyArray.splice(1,0);MyArray.splice(1,1);MyArray.splice(1,1,"New1","New2");第三句在繼續(xù)執(zhí)行一次第二句的刪除操作（刪除MyString[1]=Third）基礎上，將以參數傳入的“New1”和“New2”元素作為數組元素插入到start（=1）指定的位置，原位置上的數組元素順移項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作2.使用splice()方法添加和刪除數組元素【例6-3】使用splice()方法添加和刪除數組元素。MyArray.splice(1,1,"New1","New2");相當于執(zhí)行兩個步驟：MyArray=["First","Forth"];MyArray=["First","New1","New2","Forth"];注意：Array對象的splice()方法在Navigator4中存在一個缺陷，當刪除數組中指定的元素時，返回的不是刪除了指定元素的數組而是該指定的元素，同時，如果數組中沒有元素被刪除，返回的不是空數組而是null。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作3.連接兩個數組
Array對象提供concat()方法將以參數傳入的數組連接到目標數組的后面，并將結果返回新數組，從而實現(xiàn)數組的連接。concat()方法的語法如下：varmyNewArray=MyArray.concat(arg1,arg2,…,argN);該方法將按照參數的順序將它們添加到目標數組MyArray的后面，并將最終的結果返回新數組myNewArray。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作3.連接兩個數組【例6-4】使用concat()方法連接數組。
(1)編寫網頁界面，留出7個位置（div）分別顯示使用的命令、使用命令前后的原數組、參數數組1、參數數組2。使用按鈕接受命令
(2)在<head></head>標記中添加如下JavaScript代碼，其中有操作數組的函數Mytest()，還有將數組的值寫到表格的函數getMsg(arrayName)：程序運行結果如圖6-8所示。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.2數組結構的操作3.連接兩個數組【例6-4】使用concat()方法連接數組。從例6-4的運行結果可知，使用concat()方法后原數組和參數數組的內容不變，由此可見，concat()方法并不修改數組本身，而是將操作結果返回給新數組。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作1.數組元素的排序
Array對象提供若干方法可以實現(xiàn)數組中元素的順序操作，如顛倒元素順序、按程序開發(fā)者制定的規(guī)則進行排列等，主要有Array對象的reverse()和sort()方法。
reverse()方法按照數組索引號的順序將數組中元素完全顛倒，語法如下：arrayName.reverse();項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作1.數組元素的排序
Array對象提供若干方法可以實現(xiàn)數組中元素的順序操作，如顛倒元素順序、按程序開發(fā)者制定的規(guī)則進行排列等，主要有Array對象的reverse()和sort()方法。與reverse()方法相比，sort()方法更為復雜，它可以基于某種順序重新排列數組的元素，語法如下：arrayName.sort();arrayName.sort(function);項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作1.數組元素的排序arrayName.sort();arrayName.sort(function);第一種調用方式不指定排列順序，JavaScript語言將數組元素轉化為字符串，然后按照字母（ASCII碼）順序進行排序。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作1.數組元素的排序arrayName.sort();arrayName.sort(function);第二種調用方式由參數function指定排序算法，該算法接受兩個可以比較的參數a和b，即function(a,b)，并返回一個值以表示兩個參數之間的關系：若函數返回值小于零，則參數a在參數b之前；若函數返回值大于零，則參數a在參數b之后；若函數返回值為零，則a、b不變。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作1.數組元素的排序例如下述函數：functionMyFunction2(arg1,arg2){
returnarg1.length-arg2.length;}提供的算法可以將字符串數組按元素長度排序。下述函數：functionMyFunction2(arg1,arg2){
returnMath.random()-.5;}提供的算法則將數組元素隨機排序。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作1.數組元素的排序【例6-5】對數組元素的多種排序。
(1)編寫網頁界面，使用表格顯示1至25，使用按鈕接受命令
(2)在<head></head>標記中添加生成表格的init()函數，該函數最初由頁面讀入時調用；程序運行結果如圖6-9所示。
項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作2.模擬堆棧和隊列操作的方法為實現(xiàn)數組的動態(tài)操作，Array對象提供了諸如pop()、push()、unshift()、shift()等方法來動態(tài)添加和刪除數組元素。先來了解兩個抽象的數據結構：堆棧（LIFO）：用于以“后進先出”的順序存儲數據的結構，堆（heap）與棧（stack）實際上是兩種不同的數據結構，在不引起歧義的情況下，有時我們也把棧稱之為堆棧。在讀取堆棧的時候，最后存入的數據最先被讀取出來；項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作2.模擬堆棧和隊列操作的方法為實現(xiàn)數組的動態(tài)操作，Array對象提供了諸如pop()、push()、unshift()、shift()等方法來動態(tài)添加和刪除數組元素。先來了解兩個抽象的數據結構：隊列（FIFO）：用于以“先進先出”的順序儲存數據的結構。在讀取隊列的時候，最先存入的數據最先被讀取出來。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作2.模擬堆棧和隊列操作的方法為實現(xiàn)數組的動態(tài)操作，Array對象提供了諸如pop()、push()、unshift()、shift()等方法來動態(tài)添加和刪除數組元素。其中pop()方法模擬堆棧的“出?！眲幼?，將數組中最后一個元素刪除，并將該元素作為操作的結果返回，同時更新數組的length屬性；
push()方法模擬堆棧的“進?！眲幼?，將以參數傳入的元素按參數順序添加到數組的尾部，并將插入的元素作為操作的結果返回，同時更新數組的length屬性。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作2.模擬堆棧和隊列操作的方法為實現(xiàn)數組的動態(tài)操作，Array對象提供了諸如pop()、push()、unshift()、shift()等方法來動態(tài)添加和刪除數組元素。unshift()、shift()方法與pop()、push()方法相對，都是刪除和添加數組元素，僅僅是刪除和添加目標的位置不同.
前者與后者相反方向，即從數組的第一個元素開始操作，后面的元素將分別向前和向后移動，數組的length屬性自動更新。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作2.模擬堆棧和隊列操作的方法【例6-6】堆棧與隊列操作模擬。
(1)編寫網頁界面，使用表格顯示1至4，留兩個空格。使用按鈕接受命令
(2)在<head></head>標記中添加JavaScript代碼。程序運行結果如圖6-10所示。
項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.3數組的高級操作2.模擬堆棧和隊列操作的方法Array對象提供的模擬堆棧和隊列進行數組元素添加、刪除的方法，使用非常簡單。
值得注意的是：Array對象的pop()、push()、unshift()、shift()等添加和刪除數組元素的方法，雖模擬了堆棧和隊列的基本動作，但并不能因此而將數組看成堆棧或隊列。項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.4常見屬性和方法匯總
JavaScript語言的核心對象Array提供大量的屬性和方法來操作數組.表6-1列出了其常用的屬性、方法以及腳本版本支持情況.類型項目及語法簡要說明屬性Array.length返回數組的長度，為可讀可寫屬性Atotype用來給Array對象添加屬性和方法方法Array.concat(arg1,arg2,…argN)將參數中的元素添加到目標數組后面并將結果返回到新數組Array.join()Array.join(string)將數組中所有元素轉化為字符串，并把這些字符串連接成一個字符串，若有參數string，則表示使用string作為分開各個數組元素的分隔符Array.pop()刪除數組末尾的元素并將數組length屬性值減1Array.push(arg1,arg2,…,argN)把參數中的元素按順序添加到數組的末尾項目6：配對記憶游戲的設計6.2
JavaScript的數組6.2.4常見屬性和方法匯總
JavaScript語言的核心對象Array提供大量的屬性和方法來操作數組.表6-1列出了其常用的屬性、方法以及腳本版本支持情況.方法Array.reverse()按照數組的索引號將數組元素的順序完全顛倒Array.shift()刪除數組的第一個元素并將該元素作為操作的結果返回。刪除后所有剩下的元素將下移1位Array.slice(start)返回包含參數start和stop之間的數組元素的新數組，若無stop參數，則默認stop為數組的末尾Array.slice(start,stop)Array.sort()Array.sort(function)基于一種順序重新排列數組的元素。若有參數，則它表示一定的排序算法。Array.splice(start,delete,arg3,…,argN)按參數start和delete的具體值添加、刪除數組元素。詳情請見6.3.4應用實例Array.toSource()返回一個表示Array對象源定義的字符串Array.toString()返回一個包含數組中所有元素的字符串，并用逗號隔開各個數組元素項目6：配對記憶游戲的設計6.3配對記憶游戲的設計為方便程序的調試，采用字符圖形來代替圖片，如圖6-11左圖所示。
其中的字符來自wondows自帶的webdings字庫，如圖6-11右圖所示。項目6：配對記憶游戲的設計6.3配對記憶游戲的設計為方便程序的調試，采用字符圖形來代替圖片，如圖6-11左圖所示。
其中的字符來自wondows自帶的webdings字庫，如圖6-11右圖所示。
游戲程序設計可以分為三個部分：界面設計、圖片初始化設計和游戲應用邏輯設計。項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.1配對記憶游戲的界面設計配對記憶游戲的界面非常簡單，分為圖片列表區(qū)與計時信息按鈕區(qū)兩個部分。其中圖片列表使用網頁表格，如圖6-12所示。圖片列表區(qū)計時信息及按鈕項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.1配對記憶游戲的界面設計1.表格設置為簡化Table對象設置代碼，使用JavaScript的循環(huán)語句來生成HTML表格代碼通過兩重循環(huán)生成4行5列的表格，為每個單元格賦以不同的id：img0～img19。mm+='<tdalign="center"width="32"height="40"'mm+='id="img'+((cols*r)+c)+'"onclick="showimage('+((cols*r)+c)+')">';mm+='</td>';并為單元格的鼠標單擊事件關聯(lián)著showimage()函數，其中參數為單元格在圖表中的具體位置。項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.1配對記憶游戲的界面設計2.程序的開始代碼<bodyonload="init()">，與界面最后的刷新按鈕的代碼<inputtype="button"value="刷新"onclick="init()">都設置了事件處理函數init()，init()包含了游戲的初始化代碼。項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.2配對記憶游戲的代碼實現(xiàn)1.初始化代碼配對游戲用到10種不同的字符圖片，依次編號為1，2，…，10。由于要配對，每一張圖片在界面上都會出現(xiàn)兩個，也就是說要在界面上隨機放好20張字符圖片，開始時不會看到字符，都統(tǒng)一顯示為空白。項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.2配對記憶游戲的代碼實現(xiàn)1.初始化代碼存放字符序號的是map數組，存放字符對應顏色的是tmp_color數組，對這兩個數組進行初始化的代碼為：for(vari=0;i<length/2;i++){
map[i]=i;
map[length/2+i]=i;
//結果是：1,2,3,4,...1,2,3,4...等等
vart=Math.floor(0xFF0000*map[i]/(length/2)).toString(16);
c="#";
for(k=t.length;k<6;k++)c+="0";
tmp_color[i]=c+t;
tmp_color[length/2+i]=c+t;
//設置字符的顏色}項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.2配對記憶游戲的代碼實現(xiàn)1.初始化代碼其中利用for循環(huán)實現(xiàn)從map[0]到map[9]分別是1,2，…9,10，從map[10]到map[19]分別是1,2，…9,10，表示數組map中存放了10對字符圖片的編號，顏色的設置類似。初始化函數init()為游戲的開始做好準備其中代碼：map.sort(function(){returnMath.random()-.5})將數組map()進行了隨機排序，使其隨機存放20個字符圖片的序號。項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.2配對記憶游戲的代碼實現(xiàn)1.初始化代碼初始化函數init()為游戲的開始做好準備init()函數調用了計時函數timego(),開始計時,并顯示游戲時間：functiontimego(){
//計時
if(timeb==true){
$("gameTime").innerHTML=GetTimeString(++times);
//輸出格式化時間
startHandler=setTimeout("timego()",1000)
}}項目6：配對記憶游戲的設計6.3配對記憶游戲的設計6.3.2配對記憶游戲的代碼實現(xiàn)1.初始化
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 休養(yǎng)所老年公寓設計與運營創(chuàng)新策略考核試卷
- 意外傷害保險與保險行業(yè)的風險管理與案例分析研究分析考核試卷
- 家用紡織品的供應鏈管理與物流優(yōu)化考核試卷
- 車險理賠合規(guī)培訓課件
- 花生銷售合同范本
- 裝修押金轉讓合同范本
- 抵押的車位合同范本
- 寄養(yǎng)羊合同范本
- 小學生態(tài)平衡課件
- 超市促銷培訓課件
- 《道路建筑材料緒論》課件
- 醫(yī)學遺傳學教案-山東大學醫(yī)學遺傳學
- 海南省澄邁縣2024-2025學年七年級上學期期末考試地理試題（含答案）
- 2025年湖南現(xiàn)代物流職業(yè)技術學院高職單招職業(yè)技能測試近5年?？及鎱⒖碱}庫含答案解析
- 第二十章手術減肥及體形塑造美容手術美容外科學概論講解
- 2025年蘇州衛(wèi)生職業(yè)技術學院高職單招職業(yè)技能測試近5年?？及鎱⒖碱}庫含答案解析
- 履帶式剪叉高空作業(yè)平臺安全操作規(guī)程
- 《水稻育秧技術新》課件
- 2024-2025年第一學期初中德育工作總結
- 圍手術期手術患者護理要點
- 2025年大連長興開發(fā)建設限公司工作人員公開招聘高頻重點提升（共500題）附帶答案詳解
評論
0/150
提交評論